[모던 자바스크립트 Deep Dive] - 5장 정리

표현식과 문 

먼저 가장 기본부터 시작해야 한다.

자바스크립트에서 "값"이 뭐냐?

 

→ 식(표현식)이 평가되어 나온 결과

여기서 "평가" 라는 말이 중요하다.

평가란
→ 코드를 해석해서 실제 결과를 만들어내는 과정

예를 들어

1 + 2

이건 단순한 코드처럼 보이지만
자바스크립트는 이걸 해석해서 3이라는 값을 만들어낸다.

이게 바로 평가다.

---

그럼 값은 어디에 존재하냐

모든 값은

• 데이터 타입을 가지고
• 메모리에
• 2진수 형태로 저장된다

숫자든, 문자든, 객체든
결국 전부 0과 1로 바뀌어서 저장된다.

---

그럼 이런 질문 가능

“문자열도 진짜 2진수로 저장됨?”

→ 맞다

"hello"

이것도 내부적으로는 전부 숫자(아스키/유니코드)로 바뀌어서 저장됨

---

리터럴과 값 생성

값을 만드는 가장 기본적인 방법은 리터럴이다.

리터럴은

→ 사람이 이해할 수 있는 형태로 값을 직접 적는 것

예시:

100        // 숫자 리터럴
"hello"    // 문자열 리터럴
true       // 불리언 리터럴
[]         // 배열 리터럴
{}         // 객체 리터럴

즉

→ “그 자체로 값이 되는 코드”

---

그럼 이런 질문 가능

“변수는 리터럴이야?”

var a = 10;

→ 10은 리터럴
→ a는 리터럴 아님 (식별자)

---

표현식의 정체

이제 제일 중요한 개념

표현식

정의:

→ 값으로 평가될 수 있는 문

말이 어렵다. 쉽게 풀면

→ “실행하면 값이 나오는 코드”

---

예시를 보면 바로 이해된다.

1 + 2        // 3이 나옴 → 표현식
"hi"         // 값 자체 → 표현식
a            // 변수 값으로 평가됨 → 표현식

여기서 중요한 포인트 하나

→ 값을 “생성”하지 않아도
→ 값을 “참조”하면 표현식이다

---

이 부분 많이 헷갈림

var x = 10;
x

이건 값을 만들지 않았는데 왜 표현식일까?

→ x는 메모리에 있는 값을 가져오기 때문

즉

→ “값으로 평가되면 무조건 표현식”

---

표현식이 어디든 들어갈 수 있는 이유

이 문장 이해 안 되는 사람들이 많다.

“값이 들어갈 수 있는 자리에 표현식도 들어갈 수 있다”

이걸 쉽게 풀면

→ 표현식은 결국 값이기 때문

---

예시

var x = 1 + 2;

이건

var x = 3;

이랑 똑같다.

즉

→ 표현식과 그 결과값은 같은 취급을 받는다

---

더 중요한 예시

var x = 1 + 2;
var y = x + 3;

이건 이렇게 이어진다.

• 1 + 2 → 3
• x → 3
• x + 3 → 6

즉

→ 표현식은 다른 표현식 안에 들어가서 계속 값을 만들어낸다

---

여기서 나오는 질문

“그럼 함수도 표현식임?”

function add(a, b) {
  return a + b;
}

add(1, 2)

→ add(1,2)는 표현식 (3이 나오니까)

---

문이란 무엇인가

이제 “문”으로 넘어가자.

문은

→ 프로그램을 구성하는 최소 실행 단위

쉽게 말하면

→ “한 줄의 명령”

 

예시

var x = 10;
x = x + 1;

이 두 줄이 각각 문이다.

문이 모여서 프로그램이 된다.

---

토큰이란

문을 더 쪼개면 토큰이 나온다.

토큰은

→ 더 이상 나눌 수 없는 최소 문법 단위

예시:

var x = 10;

토큰으로 나누면

• var (키워드)
• x (식별자)
• = (연산자)
• 10 (리터럴)
• ; (세미콜론)

---

질문

“문은 토큰들의 집합이냐?”

→ 맞다

토큰들이 모여서 문이 된다

---

문 종류

문은 여러 종류로 나뉜다.

• 선언문 → 변수 선언
• 할당문 → 값 대입
• 조건문 → if
• 반복문 → for, while

---

예시

var x;        // 선언문
x = 10;       // 할당문
if (x > 5) {} // 조건문
for (...) {}  // 반복문

---

세미콜론의 정체

세미콜론은

→ “문이 끝났다”는 표시

var x = 10;

 

 

근데 자바스크립트는 특이하게

→ 세미콜론 자동 삽입 기능이 있다

그래서 이게 가능하다.

var x = 10

 

 

그럼 안 써도 되냐?

→ 대부분은 됨
→ 근데 가끔 문제 생김

 

예시 (위험한 케이스)

return
{
  a: 1
}

이건 실제로 이렇게 해석됨

return;
{
  a: 1
}

그래서 결과는 undefined

---

표현식 vs 문 (핵심)

여기 진짜 중요하다.

문은 두 가지로 나뉜다.

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

표현식인 문

→ 실행하면 값이 나온다

x = 10;

이건 10이라는 값으로 평가됨

표현식이 아닌 문

→ 실행해도 값이 없다

var x;

이건 값이 아니라 “행위”다 (변수 생성)

---

구분하는 방법 

가장 쉬운 방법

→ 변수에 넣어보기

var a = (x = 10);  // 가능

var b = (var x);   // 에러

 

이유:

• x=10 → 값 있음 → 표현식
• var x → 값 없음 → 표현식 아님

---

완료값 (크롬에서 보이는 undefined)

이거 은근 헷갈린다.

크롬 콘솔에서

var x = 10;

실행하면

undefined

이게 왜 나올까?

---

이건 변수 값이 아니라

→ 완료값 (completion value)

이다.

완료값이란

→ “이 문이 실행되고 나서의 결과”

근데 중요한 포인트

→ 표현식의 결과가 아니다

 

예시 비교

1 + 2

→ 3 출력 (표현식 결과)

var x = 10;

→ undefined 출력 (완료값)

 

아래는 어떻게 될까? 

if (true) {
  10;
}

→ 10 출력됨

왜?

→ 블록 안 마지막 표현식 결과가 반환됨

---

if (true) {
  var x = 10;
}

→ undefined

왜?

→ var x는 표현식이 아님

 

참고 자료

모던 자바스크립트 Deep Dive — 이웅모

ECMAScript Specification — https://tc39.es/ecma262/

MDN Web Docs — https://developer.mozilla.org/