[모던 자바스크립트 딥다이브] 표현식과 문

1. 값

값(value): 표현식(expression)이 평가되어 생성된 결과

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

• 모든 값은 데이터 타입을 가짐
• 메모리에 2진수(bit)의 나열로 저장
  • 메모리에 저장된 값을 ㅋ데이터 타입에 따라 다르게 해석 가능
  • ex) 0100 0001 → 숫자: 65, 문자: ‘A’

 

2. 리터럴

 

리터럴(literal)은 값을 생성하는 방법 중 하나로, 사람이 이해할 수 있는 문자/기호를 사용하는 표기법을 말한다.

JS 엔진은 코드가 실행되는 런타임에 리터럴을 평가해 값을 생성한다.

 

// 리터럴을 사용하면 다음과 같이 다양한 데이터 타입의 값을 생성할 수 있다.

// 문자열 리터럴
'Hello'
"World"

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Lee', gender: 'male' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

 

3. 문

 

문(statement)

• 프로그램을 구성하는 기본단위/최소 실행 단위
• 프로그램: 문의 집합으로 이뤄진 것
• 프로그래밍: 문을 작성하고 순서에 맞게 나열하는 것

토큰(token)

• 문을 구성하는 기본 단위
• 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
• 키워드, 식별자, 리터럴, 세미콜론(;), 마침표(.) 등이 모두 토큰이다.

 

문은 컴퓨터에 내리는 명령으로, 명령문이라고도 부른다. 문이 실행되면 프로그램에 명령이 실행된다.

문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

// 변수 선언문
var x;

//할당문
x = 5;

// 함수 선언문
function myFunction(x, y) {
  return x + y;
}

// 조건문
if(x > 0) {
  // do something
}

// 반복문
for (var i = 0; i < 10; i++) {
  // do something
}

 

문은 코드 블록(code block, {…})으로 그룹화할 수 있다. 그룹화의 목적은 함께 실행되어져야 하는 문을 정의하기 위함이다.

문은 일반적으로 위에서 아래로 실행된다. 그러나 이러한 실행 순서는 조건문, 반복문을 통해 제어할 수 있다. 이를 **흐름제어(Control Flow)**라고 한다.

 

var time = 10;
var greeting;

if (time < 10) {
  greeting = 'Good morning';
} else if (time < 20) {
  greeting = 'Good day';
} else {
  greeting = 'Good evening';
}

console.log(greeting); // 'Good day'

 

 

4. 표현식

 

표현식(expression): 값으로 평가될 수 있는 문(statement)

리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다. 다음과 같이 다양한 표현식이 있지만 값으로 평가된다는 점에서는 모두 동일하다. 즉, 값으로 평가될 수있는 문은 모두 표현식이다.

 

//리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식 (선언이 이미 존재한다고 가정)
square()
person.getName()

 

 

6. 문과 표현식의 비교

 

문은 완전한 한 문장, 표현식은 문을 이루는 구성요소로 볼 수 있다.

 

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.

 

표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다. 문은 var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.

 

 

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

 

문은 완전한 한 문장, 표현식은 문을 이루는 요소 중 하나이다.

그러나 문의 종류에는 선언문, 제어문(if/for…) 등이 있기 때문에 모든 문이 표현식인 것은 아니다.

 

// 변수 선언문
var x; // 값으로 평가될 수 없기 때문에 표현식이 아니다.

// 변수 선언 + 값 할당
var y = 1 + 2;
// var y : 변수 선언문 (표현식 X)
// y = 1 + 2 : 표현식 

 

 

표현식인 문과 표현식이 아닌 문을 구별하는 가장 명료한 방법

: 변수에 할당해보기

var foo = var x; // SyntaxErrorL Unexpected var
// 표현식이 아닌 문은 값처럼 사용할 수 없다.

 

할당문은 표현식인 동시에 완전한 문이다.

// 선언문: 표현식 X
var x;

// 할당문: 표현식이자 동시에 완전한 문
x = 100; 

 

표현식을 값처럼 변수에 할당해보기

var foo = x = 100;
console.log(foo) // 100

 

참조

모던 자바스크립트 Deep Dive (이웅모 저) 5장 

https://poiemaweb.com/js-syntax-basics