모던 자바스크립트 Deep Dive 5장

값

• 값
  • 식이 평가되어 생성된 결과
  • 평가: 식을 해석해서 값을 생성하거나 참조하는 것
  • 해석: 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음(ex. 0100 0001을 숫자로 해석하면 65, 문자로 해석하면 ‘A’)
• 값은 다양한 방법으로 생성 가능하다: 식, 리터럴 …

리터럴

• 리터럴
  • 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
  • 쉽게 말하면 변수, 상수 이런 거 말고 ‘값 자체’. 약속된 기호라는 것은 데이터 타입별로 표기법이 다르다는 의미(ex. 정수 - 100, 문자열 - ‘Hello’, 불리언 - true … )

표현식

• 표현식

  • 값으로 평가될 수 있는 문(statement)

  • 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

    var score = 100;   //리터럴 100이 평가되어 100이라는 값을 생성 
    //									 -> 이 자체(리터럴 100)로 표현식임

    var score = 50+50; //50+50이 평가되어 100이라는 값을 생성 -> 50+50이 표현식

    score;            //값을 생성하지는 않지만 값으로 평가되므로 표현식

  • 즉, 값으로 평가될 수 있는 문은 모두 표현식이다.

  • 표현식과 표현식이 평가된 값은 동등한 관계(동치)이므로 표현식은 값처럼 사용 가능하다. → 즉 문법적으로 값이 위치할 수 있는 자리에서는 표현식도 위치할 수 있다.

    1 + 2 + 3;   //6
    
    var x = 1 + 2;
    x + 3;       //6

  • 위 예시에서 x는 3으로 평가되고 있으므로, 똑같이 3으로 평가되는 1+2가 위치한 자리에 표현식 x도 위치할 수 있다.

  • x+3이 6으로 평가되고 있는 것처럼, 표현식은 다른 표현식의 일부로 들어가 새로운 값을 만들어낼 수 있다.

문

• 문과 표현식을 구별할 필요가 있다!!!
• 문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위
  • 문의 집합으로 이뤄진 것이 프로그램, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍
  • 문을 ‘명령문’이라고도 한다. 즉 문 = 컴퓨터에 내리는 명령. 문이 실행되면 명령이 실행되고 무슨 일인가가 일어나게 된다.
  • 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.
  • 문은 여러 토큰으로 구성
• 토큰: 문법적인 의미를 갖는 최소 단위(문법적으로 더 이상 나눌 수 없는 코드의 기본 요소)
  • 코딩계의 형태소인듯
  • 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등등

세미콜론과 세미콜론 자동 삽입 기능

• 세미콜론: 문의 종료를 의미
  • 자바스크립트는 순차적으로 한 줄씩 실행한다 → 이 한 줄이 어디까지인지를 세미콜론으로 파악
  • 단 코드 블록({}) 뒤에는 세미콜론을 붙이지 않는다
• 세미콜론은 생략 가능하다
  • 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여 주는 세미콜론 자동삽입 기능(Automatic Semicolon Insertion, ASI)을 암묵적으로 수행하기 때문
• 세미콜론 자동삽입 기능의 동작과 개발자의 예측이 일치하지 않는 경우도 간혹 있기 때문에, 세미콜론 사용을 권장하는 분위기이다.
  • 다만 붙이지 말아야 한다는 주장도 설득력이 있어서 논쟁이 있는 부분이다.
  • https://okayoon.tistory.com/entry/자바스크립트-세미콜론-꼭-써야하나요 → 붙여라
  • https://bakyeono.net/post/2018-01-19-javascript-use-semicolon-or-not.html → 붙이지 마라
  • 궁금하면 위 게시글 참고
• 세미콜론 자동 삽입: 리액트에서 ESLint 커스텀 가능. 이 부분에서는 ESLint.jsc, ESLint.js가 있는데, prettier을 쓰면 풀리퀘스트 과정에서 충돌이 있을 수 있음(큰따옴표, 작은따옴표를 쓸 건지, 세미콜론을 쓸 건지 이런 거를 다 협업할 때 맞추는 게 좋다)
• props check: props의 타입을 설정을 안 해줘서 관리 시 오류가 난다. 돌아는 가지만 ESLint 자체가 ts에 맞춰서 검사함. js를 쓴다면 props validation check를 끈다던지의 커스텀을 해야 한다.

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

• 표현식은 문의 일부일 수도 있고, 그 자체로 문이 될 수도 있다

  var x;     //변수 선언문은 값을 평가될 수 없으므로(undefined) 표현식이 아니다.
  x = 1 + 2; //표현식이면서 완전한 문

  • 표현식인 문: 값으로 평가될 수 있는 문(ex. 선언문)

  • 표현식이 아닌 문: 값으로 평가될 수 없는 문(ex. 할당문)

  • 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. → 표현식이라면 값으로 평가되기 때문에 변수에 할당이 될 것이므로!!

    var foo = var x;    //선언문은 표현식이 아니므로 변수 할당 불가
    
    var x;
    x = 100;            //리터럴 100은 그 자체로 표현식으므로 변수 할당 가능
    
    var foo = x = 100;  //할당문은 표현식으므로 변수에 할당 가능

    💡 **크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다**

    표현식이 아닌 문을 실행 = 완료 값
    완료 값은 표현식의 평가 결과가 아니기 때문에 변수에 할당할 수도, 참조할 수도 없다 → undefined를 출력한다.

    반대로 표현식인 문을 실행하면 평가된 값을 반환한다.