[모던 자바스크립트 Deep Dive] 05장 - 표현식과 문

목차

• 1) 5.1 값
• 2) 5.2 리터럴
• 3) 5.3 표현식
• 4) 5.4 문
• 5) 5.5 세미콜론과 세미콜론 자동 삽입 기능
• 6) 5.6 표현식인 문과 표현식이 아닌 문
• 7) 5.1 값
• 8) 5.2 리터럴
• 9) 5.3 표현식
• 10) 5.4 문
• 11) 5.5 세미콜론과 세미콜론 자동 삽입 기능
• 12) 5.6 표현식인 문과 표현식이 아닌 문

5.1 값

• 값(value): 식(표현식) 이 평가되어 생성된 결과
  • 평가: 식을 해석해서 값을 생성하거나 참조하는 것

// 10 + 20은 평가되어 숫자 값 30을 생성
10 + 20; // 30

• 모든 값은 데이터 타입을 가지며, 메모리에 2진수(bit의 나열)로 저장됨
• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음 ex) 0100 0001 - 65(숫자로 해석) or ‘A’(문자로 해석)
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 → 변수에 할당되는 것은 값

// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

• 변수 메모리 공간에 저장되는 것은 10+20이 아닌 값 30 → 10 + 20은 할당 이전에 평가되어 값을 생성해야 함

5.2 리터럴

• 리터럴(literal): 사람이 이해할 수 있는 문자 or 약속된 기호를 사용해 값을 생성하는 표기법

// 숫자 리터럴 3
3

• 코드가 실행되는 시점인 런타임에 js엔진이 리터럴을 평가하여 값을 생성 ⇒ 리터럴은 값을 생성하기 위해 미리 약속한 표기법

5.3 표현식

• 표현식(expression): 값으로 평가될 수 있는 문
• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함
• 값으로 평가될 수 있는 문은 모두 표현식
  • 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등
• 표현식과 표현식이 평가된 값은 동등한 관계(동치) → 문법적으로 값이 위치할 수 있는 자리에 표현식도 위치할 수 있음

// 리터럴 표현식
10
'Hello'
 
// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]
 
// 연산자 표현식
10 + 20
sum = 10
sum !== 10
 
// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

var x = 1 + 2;
 
// 식별자 표현식 x는 3으로 평가된다.
x + 3; // -> 6

5.4 문

• 문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위
  • 프로그램: 문의 집합으로 이루어진 것
  • 프로그래밍: 문을 작성하고 순서에 맞게 나열하는 것
• 문은 여러 토큰으로 구성
  • 토큰(token): 문법적으로 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
    ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론 등

• 명령문이라고도 불림 → 문은 컴퓨터에 내리는 명령, 문이 실행되면 명령이 실행되고 무슨 일이 일어남
• 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있음

// 변수 선언문
var x;
 
// 표현식 문(할당문)
x = 5;
 
// 함수 선언문
function foo () {}
 
// 조건문
if (x > 1) { console.log(x); }
 
// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

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

• 세미콜론(;): 문의 종료
• js엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행
• 문을 끝낼땐 세미콜론 붙여야 함. 단, 중괄호로 묶은 코드블록 뒤에는 붙이지 않음
• 세미콜론 자동 삽입 기능(ASI): 문의 끝이라고 예측되는 지점에 세미콜론 자동으로 붙여줌
  • 암묵적으로 수행되므로 코드 작성할 때 생략 가능
• ASI와 개발자의 예측이 일치하지 않는 경우가 간혹 있음

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

• 표현식인 문: 값으로 평가될 수 있는 문
• 표현식이 아닌 문: 값으로 평가될 수 없는 문

⇒ 구별 방법 : 변수에 할당

// 변수 선언문은 표현식이 아닌 문이다.
var foo = var x; // X

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
var foo = x = 100; // O

• 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined 출력(완료 값)되며, 표현식인 문을 실행하면 언제나 평가된 값을 반환

5.1 값

• 값(value): 식(표현식) 이 평가되어 생성된 결과
  • 평가: 식을 해석해서 값을 생성하거나 참조하는 것

// 10 + 20은 평가되어 숫자 값 30을 생성
10 + 20; // 30

• 모든 값은 데이터 타입을 가지며, 메모리에 2진수(bit의 나열)로 저장됨
• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음 ex) 0100 0001 - 65(숫자로 해석) or ‘A’(문자로 해석)
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 → 변수에 할당되는 것은 값

// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

• 변수 메모리 공간에 저장되는 것은 10+20이 아닌 값 30 → 10 + 20은 할당 이전에 평가되어 값을 생성해야 함

5.2 리터럴

• 리터럴(literal): 사람이 이해할 수 있는 문자 or 약속된 기호를 사용해 값을 생성하는 표기법

// 숫자 리터럴 3
3

• 코드가 실행되는 시점인 런타임에 js엔진이 리터럴을 평가하여 값을 생성 ⇒ 리터럴은 값을 생성하기 위해 미리 약속한 표기법

5.3 표현식

• 표현식(expression): 값으로 평가될 수 있는 문
• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함
• 값으로 평가될 수 있는 문은 모두 표현식
  • 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등
• 표현식과 표현식이 평가된 값은 동등한 관계(동치) → 문법적으로 값이 위치할 수 있는 자리에 표현식도 위치할 수 있음

// 리터럴 표현식
10
'Hello'
 
// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]
 
// 연산자 표현식
10 + 20
sum = 10
sum !== 10
 
// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

var x = 1 + 2;
 
// 식별자 표현식 x는 3으로 평가된다.
x + 3; // -> 6

5.4 문

• 문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위
  • 프로그램: 문의 집합으로 이루어진 것
  • 프로그래밍: 문을 작성하고 순서에 맞게 나열하는 것
• 문은 여러 토큰으로 구성
  • 토큰(token): 문법적으로 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론 등

• 명령문이라고도 불림 → 문은 컴퓨터에 내리는 명령, 문이 실행되면 명령이 실행되고 무슨 일이 일어남
• 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있음

// 변수 선언문
var x;
 
// 표현식 문(할당문)
x = 5;
 
// 함수 선언문
function foo () {}
 
// 조건문
if (x > 1) { console.log(x); }
 
// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

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

• 세미콜론(;): 문의 종료
• js엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행
• 문을 끝낼땐 세미콜론 붙여야 함. 단, 중괄호로 묶은 코드블록 뒤에는 붙이지 않음
• 세미콜론 자동 삽입 기능(ASI): 문의 끝이라고 예측되는 지점에 세미콜론 자동으로 붙여줌
  • 암묵적으로 수행되므로 코드 작성할 때 생략 가능
• ASI와 개발자의 예측이 일치하지 않는 경우가 간혹 있음

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

• 표현식인 문: 값으로 평가될 수 있는 문
• 표현식이 아닌 문: 값으로 평가될 수 없는 문

⇒ 구별 방법 : 변수에 할당

// 변수 선언문은 표현식이 아닌 문이다.
var foo = var x; // X

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
var foo = x = 100; // O

• 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined 출력(완료 값)되며, 표현식인 문을 실행하면 언제나 평가된 값을 반환