Topic

JavaScript 자료형, 추상화, 제어문

What I Learned

자료형

1. 자료형(Data type)

   • 숫자(Number)
   • 문자열(String)
     • 문자열끼리 덧셈(+) 연산이 가능하다
     • 따옴표 대신 백틱(``)도 사용할 수 있다
   • 불린(Boolean): true와 false 값을 가질 수 있는 논리 요소
   • Operator precedence - JavaScript | MDN

2. typeof 연산자

   • 데이터의 자료형을 리턴(return)

3. 형 변환(Type conversion)

   • String(), Number(), Boolean() 내장 함수로 형 변환을 할 수 있다
     • Number('123') return 123
     • Number('문자열') return NaN
     • Number(true) return 1
     • Number(false) return 0
     • Boolean(truthy) return true
     • Boolean(falsy) return false
       • falsy 값
         • 0, -0, 0n
         • ""
         • null, undefined, NaN
   • 자동 형 변환
     • 산술 연산자 +, -, *, /, %, **
       • 산술 연산자는 데이터를 숫자형으로 형 변환 후 연산한다
       • 문자열끼리 덧셈(+) 연산을 하면 형 변환이 일어나지 않는다
       • NaN은 어떤 값과 연산해도 NaN을 리턴한다
     • 관계 비교 연산자 <, <=, >, >=
       • 관계 비교 연산자는 데이터를 숫자형으로 형 변환 후 연산한다
     • 같음 비교 연산 ===, !==, ==, !=
       • JavaScript에서 ==, ===의 차이점 참조

4. 템플릿 문자열(template strings)

• 템플릿 문자열은 백틱을 이용해 문자열에 변수를 쓸 수 있는 syntatic sugar입니다.
• ex) `생년월일은 $(year)년 $(month)월 $(day)일 입니다.` (year, month, day는 변수고, 함수도 넣을 수 있다)

5. null과 undefined
   • null 의도적으로 할당한 빈 값
   • undefined 선언했으나 값이 주어지지 않을 때의 값
   • null == undefined return true
   • null === undefined return false

추상화

1. 할당 연산자(Assignment operators, =)

   • 오른쪽의 피연산자를 왼쪽의 피연산자에 할당한다
   • 복합 할당 연산자(Compound assignment operators)
     • +=, *=, -=, /=, %=
   • 증가(increment), 감소(decrement) 연산자
     • x++;, x--;
     • ++x; 연산은 작성된 코드의 줄을 실행할 때 x를 1 증가시킨 상태로 코드를 실행한다

2. return문

   • 값을 반환한다
   • 함수의 실행을 중단한다

3. 옵셔널 파라미터(optional parameter)

   • 옵셔널 파라미터란 argument가 없을 때의 값이 주어진 파라미터입니다.
   • 가장 뒤쪽에 선언하는 것이 좋습니다.

4. 변수의 scope

   • 렉시컬 스코프(lexical scope)
     • 식별자 유효 범위가 함수를 호출할 때 결정되는 것이 아닌, 선언할 때 결정되는 것을 뜻한다
     • JavaScript는 렉시컬 스코프를 따른다
   • var
     • 함수 내에 var로 변수가 정의되면 함수 내에서만 유효한 로컬 스코프를 갖는다
     • 함수 스코프(function scope)를 갖거나 전역 스코프(global scope)를 갖는다
   • let, const
     • 블록문 내에 let, const로 변수나 상수가 정의되면 블록문 내에서만 유효한 로컬 스코프를 갖는다
     • 블록 스코프(block scope)를 갖거나 전역 스코프(global scope)를 갖는다

5. 상수

   • Naming convention: 대문자로 작성하고, 두 단어 사이는 밑줄로 구분하여 작성한다 (변수는 camelCase로 작성한다)
   • 같은 변수명으로 재선언할 수 없고, 할당된 값을 바꿀 수 없다

제어문

1. if문

   if (conditon) {
   		[statement1]
   	} [else {
   		[statement2]
   	}]

   • condition: 참 또는 거짓으로 평가되는 표현식
   • statement1: 조건이 참으로 평가될 경우 실행되는 문장
   • statement2: 조건이 거짓으로 평가될 경우 실행되는 문장
   • else if (condition) {statement} 이런식으로 else if 문도 활용할 수 있다

2. switch문

   switch(expression) {
     case value1:
       [statement]
       [break;]
     case value2:
       [statement]
       [break;]
     ...
     case valueN:
       [statement]
       [break;]
     [default:
       [statement]
       [break;]]
   }

   • expression: case 값과 비교할 결과 값을 갖는 표현식입니다.
   • case valueN: expression의 결과값과 valueN이 일치한다면 break를 만날 때까지 case 절 내부가 실행된다
   • default: expression의 결과값과 일치하는 case value가 없다면 default가 실행된다
   • switch문은 암시적 형 변환을 허용하지 않는다

3. for문

   for ([initialization]; [condition]; [final-expression])
     	statement

   • initialization: 식 또는 변수 선언
     • 주로 카운터 변수를 초기화할 때 사용한다
     • var 키워드로 선언한 변수는 반복문에 제한되지 않고 for 문과 같은 scope를 갖는다
     • let 키워드로 선언한 변수는 반복문의 local scope를 갖는다
   • condition: 매 반복마다 평가할 식으로 평가 결과가 참이라면 statement를 실행하고 거짓이라면 for 문의 바로 다음 식으로 건너 뜁니다
   • final-expression: 매 반복 후 평가할 식
     • 주로 카운터 변수를 증감하거나 바꿀 때 사용한다

4. while문

   while (condition)
     statement
     [break;]
     [continue;]

   • condition: 참 또는 거짓으로 평가되는 표현식
   • statement: 조건문이 참일 때 실행된다
   • break: 루프의 실행을 완전히 종료합니다
   • continue: break 문과 달리 루프의 실행을 완전히 종료하지 않고, 다시 조건으로 점프합니다
   • for문에서도 break와 continue 문을 쓸 수 있다

Feedback

• 기초적인 내용이지만 다른 언어와의 차이점에 유념하도록 하자
• 다음으로 '프로그래밍과 데이터 in JavaScript' 코드잇 콘텐츠를 수강할 예정이다

Reference

• 거짓같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
• if...else - JavaScript | MDN
• switch - JavaScript | MDN
• for - JavaScript | MDN
• while - JavaScript | MDN
• 프로그래밍 핵심 개념 in JavaScript - 자바스크립트 강의 | 코드잇