JavaScript

Today I Learned ... javascript

🙋‍♂️ Reference Book

🙋‍ My Dev Blog

---

5. 표현식과 문

값(value)

• 식(expression)이 평가(evaluate)되어 생성한 결과.
• 평가(evaluate) : 식을 해석해서 값을 생성하거나 참조.

• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석됨.

리터럴

• 사람이 이해할 수 있는 문자 or 기호로 값을 생성하는 표기법(notation)
• 값을 생성하기 위해 미리 약속한 표기법.
• 런타임에 리터럴을 평가해 값 생성됨.

표현식(expression)

• 값으로 평가될 수 있는 문.
• 표현식이 평가 -> 새로운 값 생성 or 기존 값 참조
• 리터럴도 표현식임.
• 값이 위치할 수 있는 곳에 표현식 사용 가능.

문(statement)

• 문은 프로그래밍을 구성하는 기본 단위. 최소실행단위.
• 여러 토큰(token)으로 구성됨.
• 토큰 = 문법적으로 더 나눌 수 없는 코드의 기본요소.
• return값이 항상 undefined이다.

• 문이 끝날때는 세미콜론 붙여야 함.
• 세미콜론 자동삽입 기능 (ASI) 가 암묵적으로 실행됨.

• cf> 코드블록 {} 은 자체종결성을 갖기 때문에 세미콜론이 필요 없다.

표현식인 문 vs 표현식이 아닌 문

선언문	할당문
표현식이 아닌 문	표현식인 문

1. 표현식이 아닌 문 = 값으로 평가될 수 없는 문 = undefined return

var age = 20;
// undefined

2. 표현식인 문 = 값으로 평가될 수 있는 문 = 평가된 값 return

age = 20;
// 10

6. 데이터 타입

• 7개의 원시타입 + 객체타입

원시타입

• number , string, boolean, undefined, null, symbol(ES6)

객체타입

• object (객체, 함수, 배열 등)

Number 타입

• 정수, 실수 구분 없음
• 모든 수를 실수로 처리함.
• 특수 값 표현
  Infinity, NaN(not-a-number)

NaN === NaN // false

String 타입

• '' , "", `` 로 표현
• 문자열은 원시 타입이며, 변경불가능(immutable) 값.
• (ES6) 템플릿 리터럴의 등장 - 멀티라인 / 표현식 삽입 / 태그드 템플릿 등 기능 제공

• 이스케이프 시퀀스 (Escape Sequence)
  \n : LF (Line Feed. 다음 행으로 이동)
  \r : CR (Carriage Return. 첫 문자로 이동)
  \t : 탭

• 개행 문자 = CRLF : 한줄 이동 후 커서 맨앞으로.
• 운영체제별로 개행문자를 인식하지 못함.

Boolean 타입

• 불리언 타입은 논리적 참/거짓 = true / false

undefined 타입

• var 키워드로 변수 선언시 undefined로 초기화됨.
• 즉, 변수선언에 의해 확보된 메모리 공간을 undefined로 초기호하여 쓰레기값 없앰.

• 자바스크립트 엔진이 변수를 초기화하기 위한 값임.
• 개발자가 직접 사용하는것은 자제. -> 의도적으로 변수를 비우려면 null을 사용!

null 타입

• null은 변수에 값이 없음을 의도적으로 명시(의도적 부재, intentional absence)
• 이전에 할당되어있던 값에 대한 참조를 명시적으로 제거함.
• null의 타입은 null이 아닌 Object로 나옴. (error)

typeof null;  // object

-> null인지 확인할때는 일치연산자(===)를 쓰자!

Symbol 타입

• ES6에서 추가된 7번째 타입.
• 변경 불가능한 원시타입의 값.
• 다른 값과 중복되지 않는 유일무이한 값.
  -> 주로 객체의 유일한 프로퍼티 키를 만들기 위해 사용.

• 리터럴이 없고, Symbol() 함수를 호출하여 생성함.

데이터 타입의 필요성

• number 타입은 8바이트의 메모리 공간을 확보함. (=64비트 부동소수점)
• 값을 참조할 때 메모리 공간의 크기를 결정하기 위해 데이터 타입이 필요.
  (단, 객체타입은 메모리 공간을 동적할당 한다.)
• 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해

• 자바스크립트는 동적타입 언어이므로, 선언이 아닌 할당에 의해 타입이 결정된다.
• type inference(타입 추론) - 할당에 의해
• 변수는 타입을 갖지 않지만, 값은 타입을 갖는다.
  -> 현재 갖고있는 값에 의해 변수의 타입이 동적으로 할당되는 것.

❕ 동적타입 언어란?

• 값의 변경에 의해 언제든 타입이 변경될 수 있다.
• 변수의 값을 확인하기 전까지는 타입 확신 X
• 유연성(flexibility)은 높지만, 신뢰성(reliability)은 떨어짐.

• 변수의 유효 범위(=scope)를 최대한 좁게 만들어야 오류 확률 적어짐.
• 변수보다는 상수를 사용할 것. (변경 억제)
• 전역변수는 최대한 사용 자제할 것.

7. 연산자

• 하나 이상의 표현식(=평가되어 값이 생성되는 식)을 대상으로 산술/할당/비교/논리/타입/지수연산 등을 수행.

산술 연산자

• arithmetic operator
• 산술연산 불가시 NaN을 반환.

1) 이항 산술 연산자

• 부수효과(side effect) 없음.

+, -, *, /, % 연산자.

2) 단항 산술 연산자

• ++, -- (증가, 감소) 연산자는 부수효과 존재.

📌 부수효과(side effect)란?
피연산자의 값을 직접 변경함. (암묵적 할당)

전위 증가 연산자	후위 증가 연산자
먼저 증가시킨 후, 다른 연산 수행	먼저 다른 연산을 수행한 후, 증가

• +, - (단항) 연산자는 부수효과 없음.

• - 연산자는 얼핏 보면 값을 변경시키는 것 같지만, 피연산자를 변경하는 게 아니라 부호를 반전한 값을 생성해 반환(return)할 뿐임.

-(-10);  // 10

3) 문자열 연결 연산자

• + 연산자는 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작.

'1' + 2;   // 12
// number 타입인 2가 '2'로 변환되어 문자열이 연결됨.

• 암묵적 타입 변환 (implicit coercion) 이라고 함.

할당 연산자

• = 을 포함함. (=, +=, -=, *=, /=, %=)
• 피연산자의 평가 결과를 좌항에 있는 변수에 할당.
• 변수 값이 변하는 부수효과 존재.

• 할당문은 표현식인 문임.
• 할당된 값으로 평가됨. (할당된 값이 return 되므로)
  cf> 선언문은 undefined를 리턴하므로 표현식이 될 수 없음

var name = 20; // undefined

name = 20;  // 20

비교 연산자

• 좌항, 우항을 비교하여 불리언 값 리턴. (true/false)
• 제어문(조건문/반복문)의 조건식에서 주로 사용.

• 동등비교(loose equality)와 일치비교(strict equality) 연산자가 존재.

동등 비교	일치 비교
==	===
값만 같으면 true	타입까지 같아야 true

• 동등비교(==)는 비교시 암묵적 타입변환을 먼저 진행 - 타입이 달라도 true

0 == '';   // true
false == [];  // true

false == null;  // false
false == undefined;  // false

• 일치비교(===)는 암묵적 타입 변환 없이 값을 비교함.
  단, NaN === NaN의 결과는 false임.
  -> Number.isNaN()을 이용할 것

📌 Object.is 메서드
Object(생성자함수)의 정적 메서드로, 일치비교(===)와 동일하게 동작함.
여기서는 -0과 +0을 다르게 평가하고, NaN === NaN으로 동작함.

대소관계 비교 연산자

• 부등호. (>, <, >=, <=)

삼항 조건 연산자 (? : )

• 조건식의 true/false 여부에 따라 반환할 값을 결정.
• 부수효과(side effect)는 없음.
  -> 피연산자를 직접 변경하지 않고, 반환할 값을 결정하므로

(조건) ? (true) : (false)

• 삼항조건 연산자는 값처럼 사용 가능 (=변수에 대입 가능)하지만,
  if-else문은 값처럼 사용할 수 없다.

논리 연산자

• AND(&&), OR(||), NOT(!) 으로 구성.
• NOT 연산자는 언제나 불리언 값을 리턴함.
  -> !!를 이용하면 해당 값의 boolean 값 알수 있음. (암묵적 타입변환)

쉼표 연산자

• 순서대로 피연산자 평가 후, 마지막 평가 결과를 리턴

그룹 연산자 ()

• 소괄호()로 피연산자 감싸서 우선순위 조절.
• 연산자 우선순위중 가장 높음.

typeof 연산자

• 피연산자의 데이터 타입을 문자열로 리턴.
• typeof null은 object이며,
  array[]의 typeof 결과는 object이다.
  단, 함수의 typeof 결과는 function이다.

지수 연산자

• ES7 도입됨.

• 좌항 = 밑(base) / 우항 = 지수(exponent)

• ex> 2 ** 2; // 4

• Math.pow(밑, 지수)를 쓸 때 보다 가독성이 좋음.

그외 연산자

연산자	의미
?.	옵셔널체이닝 연산자. (좌항이 null,undefined면 undefined 반환)
??	null 병합 연산자. (좌항이 null,undefined면 우항 반환)
delete	프로퍼티 삭제
new	생성자함수 호출 - 인스턴스 생성
instanceof	좌항(객체)가 우항(생성자함수)의 인스턴스인지 체크
in	프로퍼티 존재 확인 (속성 in 객체)

8. 제어문

• control flow statement
• forEach, map, filter, reduce 같은 고차함수로 제어문 사용 억제 필요.

블록문

• 0개 이상의 문을 중괄호로 묶은 것.
• 종결 세미콜론이 필요 없음. (자체 종결성)
• 객체 리터럴과 똑같이 생김.

조건문 (conditional)

• 조건식의 평가 결과에 따라 (true/false) 블록문의 실행 결정.
• if...else문 , switch문이 있음.

1) if-else문

• 대부분의 if-else문은 삼항 조건 연산자로 변환 가능.
• 조건에 따라 단순히 값을 결정해 변수에 할당하는 경우엔 삼항 연산자 사용 권장.

2) switch문

• 주어진 표현식을 평가해 값이 일치하는 표현식을 갖는 case문으로 실행 flow를 옮김.
• case문은 case 지정 후 콜론(:)을 써야함.

switch (변수) {
  case '표현식1' : 
    // 실행 코드
    break;
  case '표현식2' :
    // 실행 코드
    break;
  default: 
    // 실행 코드
}

• switch문에는 조건식(불리안)뽀다는 문자열이나 숫자인 경우에 사용함.
  -참, 거짓보다 다양한 case에 따라 결정할 때 사용.

• 반드시 case문의 끝에 break;로 빠져나오는 처리를 해주야 함.
• 폴스루 (fall through)가 발생할 수 있기 때문.
• default문에는 break 생략 OK.

• 여러개의 case문을 하나의 조건으로 사용 가능. (폴스루 이용)
  예>

switch(month) {
  case 1: case 3: case 5: case 7: case 8: case 10: case 12:
    days = 31;
    break;
  ... }

반복문 (loop)

• 조건식이 true인 경우 코드블록 실행.
• 다시 평가하여 true면 다시 실행.
• 조건식이 false 일 때까지 반복.

for문	while문
반복 횟수가 명확할 때	반복 횟수를 모를 때

1) for문

• 반복변수 (i, iteration) 를 설정하여 반복함.
• for (선언문; 조건식; 증감식) 으로 구성
• 증감식이 실행된 후에 조건식이 실행됨. (주의 - 선언문은 딱 한번만 실행)
• 무한루프 - for(;;)

2) while문

• 조건문이 false가 되면 코드블록을 종료함.
• 무한루프 - while(true)
• if(조건) break; 로 무한루프 탈출 가능.

3) do...while문

• 코드블록을 먼저 실행하고나서, 조건식을 평가함.
• 즉, 선 실행 후 검사.
• 최소 한번이상은 실행됨.
• 조건식이 true면 다시 반복 / false면 빠져나감

break, continue

1) break

• break문은 label(:)문, 반복문, switch문을 탈출함.
• if문에서 break를 쓰면 에러 발생. (단, 위 문들 안에 if는 가능)

레이블 문 (label문)

• 실행순서 제어시 사용.
• 레이블 문을 탈출하려면 break 뒤에 레이블 식별자를 지정.
• 중첩된 for문에서 외부 for문을 탈출할 때 유용.

outer: for (var i=0; i<3; i++) {
   for (var j=0; j<3; j++) {
   // 코드
   if( i + j === 3) break outer;
   }
 }

2) continue

• continue문은 반복문의 단계를 건너 뛸 때 유용.
• 반복문의 증감식(i++)로 실행 흐름 이동시킴.
• break처럼 반복문을 탈출하지는 X

9. 타입 변환과 단축평가

• 개발자가 의도적으로 값의 타입을 변환 -> 명시적 타입 변환 (=타입 캐스팅)
• cf> 강제로 or 암묵적으로 변환됨 -> 암묵적 타입 변환

암묵적 타입 변환

• 원시값은 immutable value이므로 변경할 수 없음. (원본은 바꿀 수 X)
  -> 즉, 새로운 원시 값을 생성해야 함.

• 암묵적 타입 변환은 기존 값을 재할당 하는 것이 아니라, 암묵적 타입 변환한 새 값을 만들어 단 한번 사용하고 버린다.

예>

• 템플릿 리터럴 : 문자열 타입으로 암묵적 타입 변환함.
• 문자열 연결 연산자(+) : 하나라도 문자열이면 나머지를 문자열로 변환.
• 비교 연산자(>,< 등) : 모두 숫자타입으로 타입 변환.
• • 단항연산자 : 숫자 타입으로 암묵적 변환
• !! 또는 if()안 조건문 : boolean 타입으로 암묵적 변환
  -> Falsy Value (false, undefined, null, 0, NaN, '')

특이사항 - 빈 배열, 즉 []는 Falsy 값은 아니지만, false == [] 는 만족.

명시적 타입 변환

• 표준 빌트인 생성자 함수를 new 없이 호출 (=일반함수로 호출)

String(6);  // '6'
Number('6');  // 6

• 빌트인 메서드 사용 (toString, parseInt 등)

3.toString();  // '3'
parseInt('3');  // 3

• 암묵적 타입변환 사용시

3 + '';   // '3'
+'3';   // 3
'3' * 1;  // 3

• 불리언 타입으로 변환 - Boolean() 또는 !!연산자 사용

단축 평가

• short-circuit evaluation

• 논리연산의 결과를 결정하는 피연산자를 타입변환하지 않고 그대로 반환함.

단축평가	결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

• OR(||)은 기본값을 지정하는데 사용하고,
  AND(&&)는 if문을 대체한다.
  -> 좌항이 true면 우항을 반환하고, 좌항이 false면 false를 반환하므로
  (단, if-else문은 삼항연산자로 대체 가능하다.)

옵셔널 체이닝 연산자 (?.)

• 좌항이 null 이나 undefined이면 undefined를 반환함.
• if문의 역할을 대체할 수 있음.
• 이전에는 && 단축평가로 했으나, Falsy값 중 0이나 ''인 경우도 false였던 문제를 해결.

null 병합 연산자 (??)

• 좌항이 null 이나 undefined이면 우항을 반환하고,
  그렇지 않으면 좌항을 반환한다.
• 기본값을 지정할 때 유용.
• 이전에는 || 단축평가로 했으나, Falsy값 중 0이나 ''인 경우에도 false였던 문제를 해결.