코드 구조

문

• 문은 어떤 작업을 수행하는 문법 구조와 명령어를 의미한다.
• 코드에는 원하는 만큼의 문을 작성할 수 있다. 서로 다른 문은 세미콜론으로 구분한다.
• 코드의 가독성을 위해 각 문은 서로 다른 줄에 작성하는게 일반적이다.

세미콜론

• 자바스크립트는 줄 바꿈이 있으면 이를 암시적인 세미콜론으로 해석한다.(세미콜론 자동 삽입)
• 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 못하는 상황도 존재한다.

---

자바스크립트 딥 다이브

값

• 값은 식(표현식)이 평가되어 생성된 결과를 말한다.
• 평가란 식을 해석해서 값을 생성하거나, 참조하는 것을 의미한다.
• 모든 값은 데이터 타입을 가지며, 메모리에 2진수 비트의 나열로 저장된다.
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
• 변수에 할당되는것은 값이다.

// sum에 저장되는것은 10 + 20이 아니라 10 + 20이 평가된 결과인 숫자 값 30이다.
var sum = 10 + 20; 

• 값은 다양한 방법으로 생성할 수 있다. 가장 기본적인 방법은 리터럴을 사용하는 것이다.

리터럴

• 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다.

// 숫자 리터럴 3
3

• 사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성한다.
• 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호( ’’, “”, ., [ ], { }, // )로 표기한 코드다.
• 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

표현식

• 표현식은 값으로 평가될 수 있는 문이다.
• 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.

var score = 100;

• 코드의 100은 리터럴이다.
• 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴 그 자체로 표현식이다.

var score = 50 + 50;

• 50 + 50 은 리터럴과 연산자로 이루어져 있다.
• 50 + 50도 평가되어 숫자 값 100을 생성하므로 표현식이다.

score; // 100

• 변수 식별자를 참조하면 변수 값으로 평가된다.
• 식별자 참조는 값을 생성하지 않지만 값으로 평가되므로 표현식이다.
• 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이루어질 수 있다.
• 값으로 평가될 수 있는 문은 모두 표현식이다.

// 리터럴 표현식
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

• 예제처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

문

• 문과 표현식을 구별하고 해석하는것은 중요하다.
• 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
• 문은 여러 토큰으로 구성된다. 토큰은 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
• 키워드, 식별자, 연산자, 리터럴, 세미콜론이나 마침표 등의 특수기호는 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다.
• 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

// 변수 선언문
var x;

// 변수 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if(x > 1){ console.log(x); }

// 반복문
for(var i = 0; i < 2; i++){ console.log(i); }

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

• 세미 콜론은 문의 종료를 나타낸다. 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고, 순차적으로 하나씩 문을 실행한다.
• 0개 이상의 문을 중괄호로 묶은 코드 블록 뒤에는 세미콜론을 붙이지 않는다.(if 문, for문, 함수 등의 코드 블록 뒤에는 세미콜론 x ⇒ 문의 종료를 의미하는 자체 종결성을 갖기 때문)
• 문의 끝에 붙이는 세미콜론은 옵션이다.(생략 가능) ⇒ 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능이 암묵적으로 수행되기 때문
• 개발자가 세미콜론 자동 삽입 기능의 동작을 제대로 예측하지 못해 활용하지 못하는 경우가 생긴다.

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

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

// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;

• 문에는 표현식인 문과 표현식이 아닌 문이 있다.
• 표현식인 문은 값으로 평가될 수 있는 문이다.
• 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다.
• 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.
• 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다. 하지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.

var x

x = 100;

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

// 표현식인 문은 값처럼 사용할 수 있다.
var f00 = x = 100;
console.log(foo); // 100