TIL 210720 - 변수, 함수, 타입, 조건문(우와!많다!)

자자! 오늘 코.스 2일차! 두둥!

오늘 배우는 것들! 체킹

변수, 함수, 타입, 조건문!

두려워말라! 읽고 이해하고 페어하면 다 내것된다!

 

그런데 잊지 말아야 할 것은 2가지

^ 공부하는 이유는 시험 통과가 아니다

^ 공부의 궁극의 목적은

   목적에 맞는간결하고 효율적인 코딩을 위해서다!

 

자, 이제 웹페이지 컨트롤하는 JS를 익혀보자.

 

변수 시작!

 

1 . 변수

 1-1. 변수 개념

•    프로그래밍(이하 프로)은 데이터 처리
•    변수사용 목적 데이터 넣기빼기 용이

1-2. 목표

• JS 변수 선언, 할당 설명 가능 
• JS 용어 설명 가능
• 등호(=) 프로에서 할당
• a=a+1은  a에 a+1을 할당

i got it!

 

변수는 데이터 보관함의 이름,

데이터 보관함(=메모리)에 보관

메모리 크기 동일

변수를 통해서 데이터 재활용

변수 선언 let a

변수 할당 let a = 5 (할당은 저장)

선언과 할당 동시 가능

 

코딩 한줄 표현식(expression)이라고 칭함

 

let myname = seo;

myname+"님"

--> seo 님

 

변수는 동일한 변수를 대입하여 할당할 수 있다.

 

num = num+1

 

변수 끝!

 

 

타입 시작!

 

2. 타입

2-1. 목표

• 원시 자료형(String, number, boolean, undefined) 의미
• 참조 자료형 의미
• 자료형(type)마다 다른 속성, 함수(메소드) 가짐
• type of
• 비교 (==, !==)

 

변수 타입 : 숫자(number), 문자열(String), 불린(참/거짓), 배열, 객체

 

배열 타입 예시 [ ]

 

let fruit = [

    'banana',

    'tomato',

    'orange'

       ];

 

 

객체 타입 예시 { }

 

let person = {

 name : 'seo',

 isStudent : true

 }

 

정의되지 않은 것도 할당 가능 undefined

 

타입 끝!

 

함수 시작!

 

3. 함수

3.1 함수 개념

• 내가 생각하는 함수 : 컴퓨터가 수행해야 하는 일을 정해 놓은 코드
• 코.스 : 논리적인 작업 단위, 작은 단위
• 함수 선언 keyword, name, parameter, body
• 함수 선언과 호출 기본 동작 원리 
• 함수 선언과 함수 표현식이 변수에 담기는 과정
• 함수 결과값이 변수에 담기는 과정

3.2 목표

함수 기초, 함수 실습

• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수는 입력값과 출력값을 가짐

함수는 돌아온다(return)

 

함수 제작

 

선언(버튼 제작)

function cal (param 1, param2) {

   console.log(param1+param2);

   return param1*10;

   }

 

호출(버튼 사용) - 언제든지 사용 가능

cal(10,20);

 

자 정리하면

 

let result = cal(10,20) ; //함수가 선언되면 특별보관함 저장된 함수 코드가 조회

function cal (param 1, param2) param 1, param 2에 파라미터 값에 인자(10,20) 가 전달

값이 10,20 으로 바뀜

 

함수의 리턴값이 결과값으로 바낌

return param1*10; // 10*10=100

값 100 이 let result = 100으로 할당

 

즉 result 라는 변수에 값 100이 메모리에 저장

 

함수 표현방법이 3가지나 된다!!

으아아!

 

차근차근 살펴보자!! ieration

(1) 함수 선언식 : 가장 익숙하다

 function cal (a, b) {

   let c = a + b;

   return c;

 }

 

(2) 함수 표현식 : 익숙치 않다. const를 선언하고 거기에 또 function을

넣은 것으로 봐서 비효율적이다. (추가 회색글자)

원시자료형과 참조자료형 메모리 활용원리를 보니 

함수표현식이 이해가 간다.

함수는 어차피 힙에 저장되고 선언된 const cal은

함수의 위치만 저장하고 있기 때문에 함수표현식이

컴퓨터 메모리의 작동원리를 가장 잘 대변해준다고 할 수있다.

그러나 사용자 친화적이지는 않다.

메모리 동작 원리 몰라도 코딩할 수 있게 하는게

공학자들의 차곡차곡쌓기 원리이기 때문이다.

(2021-08-04 추가입력)

 

function (a,b) --> 익명 함수란다.

 

 const cal = function (a,b) {

   let c = a+b

   return c;

 }

 

(3) 화살표 함수 :   굳이 ?

const cal = (a,b) ==>    {

   let c = a+b

   return c;

 }

 

그냥 (1) 함수 선언식이 젤로 깔끔허다! 라고 생각했는데

좀 더 간결한 코딩을 위해서 알려준거 였다.

 

함수의 본문(body) 에 return 문만 있는 경우

return과 중괄호 {} 은 생략이 가능하단다.

 

함수 표현식과 화살표 함수만 적용되겠지?

 

원래 이건데

const cal = (a,b) =>    {

   return a*b;

 }

 

return과 중괄호 생각하면

 

const cal = (a,b) ==>   a*b;

 

으흠 실제로 이런게 많나?

 

추가 화살표 함수에서 코드 2줄이상이면

가독성 위해  return과 중괄호 표시 좋음.

 

자 연습 문제

사각형의 넓이를 구한 함수를 위의 3가지

함수 선언식, 함수 표현식, 화살표 함수로 해보자

go go~!

 

먼저 함수 선언식,

function getSquareArea(hori, verti) {

  let squareArea = hori * verti;

  return squareArea; 

 }

 

다음은 함수 표현식

const getSquareArea = function (hori, verti) {

  let SquareArea = hori * verti;

  return SquareArea; 

 }

 

마지막으로 화살표 함수

const getSquareArea = (hori, verti) => {

  let SquareArea = hori * verti;

  return SquareArea; 

 }

간단하지만 오류 잡고 잘 마무리!

 

함수 끝!

점심이다!

 

코드 학습법 시작!

 

4. 코드 학습법

4.1 목표

• 구글링
• 에러해결
• Chrome developer console 사용
• debugger

구글링 방법 : ① mdn 변수 문자열 변경 

mdn 자바스크립트 오리진 레퍼런스 있는 사이트

10년 전에 비해서 자바스크립트의 체계가 굉장히 안정화되었다.

찾기도 구현도 싶고 가르치고 배우는 활동도 왕성하고

 

② how to convert to string in javascript

 

에러 발생시 에러문구 자체를 검색(stack overflow)

 

Chrome developer console에서

blank new tab 확장 프로그램 설치하면

브라우저 새창 띄울 때 깨끗한 화면으로 뜨고

자바스크립트 연습때 산뜻한 화면에서 할 수 있음

 

 

코드 학습법 끝!

 

coplit 시작!

 

마음에 드는 한 가지! 다 마음에 드는데 그중에서 더 마음에 드는

한 문제를 풀기 위해서 30분 이상을 고민하셨다면, 잠시 쉬거나 다른 문제를 푸시길 권장합니다.

• 페어의 동의를 구하고, 충분히 휴식을 취하고 다시 문제를 푸시거나
• 종이를 꺼내서 손으로 직접 수도코드와 결과를 적어보며 작동방식을 확인합니다.
• 사용하는 툴을 변경하는 것도 발상의 전환을 충분히 도울 수 있습니다.

coplit 끝!

 

 

조건문 시작! - 오후 늦게가 되니 약간 지친다! 아니다 그런거 없다!

 

1. 조건문 개념

• truthy, falsey 가 조건문에서 작동하는 방식
• 비교연산자 엄격한 비교(===,!==)
• if, else if, else
• 논리연산자로 복잡한 조건을 간결한 코딩

 

뭐 간단히 써보자

if  (조건1) {

//조건1이 통과할 경우

} else if (조건2) {

//조건1이 통과하지 않고

//조건2가 통과할 경우

} else {

//모든 조건이 통과하지 않는 경우

}

 

복합조건은 논리 연산자로 표시

그리고 &&

또는 ||

 ~ 가 아닌 !

 

오우 드뎌 불린과 섀넌의 전자회로에서 배운 것들이 나오네

 true || true // true

true && true // true

 

예외

!undefined // true

!'hello' // false

 

논리 연산자(&&, ||, !) 의 결과값에 boolean이 아닌 값이 들어 갈 수 있음

OR연산자는

- truthy한 값을 만나면 그 값을 출력

- 둘다 falsy할 경우 뒤에 있는 값을 출력 ex) undefined || falsy // falsy

 

AND연산자는

- falsy한 값을 만나면 그 값을 출력

- 둘다 truthy할 경우 뒤에 있는 값을 출력

 

(중요) 조건문 문제로 에러메세지 나올 경우

코.스의 내용 수정없이 붙여넣기

==========================

단순한 추측으로 버그를 고치는 것은 예기치 못한 부분에서 새로운 버그를 만들어낼 수 있습니다. 에러 메시지를 잘 해석하는 습관은 버그를 해결할 수 있는 가장 빠른 방법입니다. 주어진 단서(에러 메시지)를 잘 살피는 것으로 잘못 작성된 부분을 빠르게 파악할 수 있고, 에러를 해결하기 위한 방법을 찾을 수 있습니다.

다음은 isOldEnoughToDrink 문제에 대해 [테스트 실행] 버튼을 눌렀을 때 나타나는 에러 화면 중 하나입니다. 다음 에러 메시지를 분석해보고, 문제를 해결하기 위한 방법을 하나씩 찾아보세요!

[그림] 코플릿에서 확인할 수 있는 테스트 케이스의 에러 메시지

1. 먼저 요구사항을 읽어보세요

타이틀에 있는 내용은 문제의 요구사항을 이야기하고 있습니다.

나이를 입력받아 술을 마실 수 있는지(18세 이상) 여부를 리턴해야 합니다.

위 내용은 우리가 만드려는 함수(isOldEnoughToDrink)가 첫 번째 인자는 나이입니다. 나이가 18세 이상인지 아닌지를 판단하여 리턴해주기를 요구하고 있습니다.

이를 바탕으로 이 함수의 리턴해야하는 값은 참 또는 거짓을 나타내는 타입인 boolean인 것을 추측해볼 수 있을 것입니다.

2. 테스트 케이스를 확인하세요

테스트 코드는 JavaScript로 작성되어 있습니다. 코플릿의 문제 통과여부는 JavaScript로 작성된 테스트 코드의 통과여부로 결정됩니다. 다음 내용을 해석해 보겠습니다.

expect(isOldEnoughToDrink(40)).to.be.true;

위 내용의 의미는 다음과 같습니다.

isOldEnoughToDrink(40)의 리턴값이 true가 되기를 기대한다

해당 함수에 40이라는 값을 넣어 함수를 실행했을 때, true 라는 리턴값이 나오면 이 테스트는 통과입니다. 참고로, expect는 이후에 공부하시게 될 테스트 관련 함수 중 하나입니다.

3. 테스트가 통과하지 않은 이유를 확인하세요

테스트를 통과하지 않은 경우, 다음과 같은 결과를 확인할 수 있습니다.

expected undefined to be true

위 내용의 의미하는 바는 다음과 같습니다.

true를 리턴하길 기대했지만, 실제로는 undefined라는 값이 리턴되었다

"함수 isOldEnoughToDrink(40)을 실행한 후의 리턴값이 true가 아니라 undefined 이므로, 함수가 테스트 케이스를 통과하지 못했다" 라는 의미입니다. 작성한 코드의 어딘가에서 undefined를 리턴하거나, 또는 아무것도 리턴하지 않는 경우에 이런 결과를 만나게 됩니다. 이렇게 여러분들이 잘못 작성한 내용에 대해 확인과 분석을 하고나면, 충분히 개선할 수 있습니다.

=====================

 

 

TIWL (Tomorrow I will learn) - JS/Node(기초, 변수, 타입, 함수),  조건문