5장 표현식과 문 (JS Deep Dive)

값 (Value)

값은 식(표현식)이 평가되어 생성된 결과를 말한다.

10 + 20  // 표현식
= 30  // 숫자 값

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

0100 0001  // 숫자: 65, 문자: 'A'

변수 메모리 공간에 저장되는 것은 표현식이 아니라 값이다. 따라서 표현식은 할당 이전에 평가되어 값을 생성한다.

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

리터럴 (Literal)

리터럴은 사람이 이해할 수 있는 문자 또는 미리 약속된 기호로 표기한 코드다.

• 문자: 아라비아 숫자, 알파벳, 한글...등

• 약속된 기호: '', "", ., [], {}, //...등

즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

• 정수 리터럴, 부동소수점 리터럴
• 2진수 리터럴, 8진수 리터럴, 16진수 리터럴
• 문자열 리터럴
• 불리언 리터럴
• null 리터럴
• undefined 리터럴
• 객체 리터럴
• 배열 리터럴
• 함수 리터럴
• 정규 표현식 리터럴

표현식

표현식은 값으로 평가될 수 있는 문(Statement)이다. 리터럴은 표현식일까?

리터럴 100은 아라비아 숫자를 평가해 값을 생성한다. 따라서 리터럴은 표현식이다.

const score = 100

식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

• 표현식
  • 리터럴
  • 식별자(변수, 함수...등의 이름)
  • 연산자
  • 함수 호출
  • 기타...등

값으로 평가될 수 있는 문은 모두 표현식이다. 이때 표현식과 표현식이 평가된 값은 동등한 관계이다. 동치라 하는데 1+2와 3은 동치이다. 따라서 표현식은 값처럼 사용할 수 있다.

const x = 1 + 2

x + 1   // 4

문 (Statement)

문과 표현식을 구별하고 해석할 수 있다면 자바스크립트 엔진의 입장에서 코드를 읽을 수 있고 버그를 줄이고 코드의 품질을 높여줄 것이다.

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.

• 프로그램: 문의 집합.
• 프로그래밍: 문을 작성하고 순서에 맞게 나열.

문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 예를 들어 키워드, 식별자, 연산자, 리터럴, 특수기호(세미콜이나 마침표 등)는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소는 모두 토큰이다.

const score = 1 + 2

// const, score, =, 1, +, 2는 모두 토큰이다.

문은 컴퓨터에 내리는 명령이다. 문이 실행되면 명령이 실행되고 무슨 일인가가 일어나게 된다.

• 문 (명령문)

  • 선언문 (변수, 함수)

  • 할당문

  • 조건문

  • 반복문

  • 기타...등

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

세미콜론(;)은 문의 종료를 나타낸다. 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문이다.

문의 끝에 붙이는 세미콜론은 옵션이다. 생략이 가능하다. 문의 끝이라고 예측되는 지접에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 떄문이다.

하지만 세미콜론 자동 삽입이 어디에 될지 개발자의 예측이 일치하지 않는 경우가 간혹있다.

function score () {
  return
    {}
}
// ASI의 동작 결과 => return; {};
// 개발자의 예측 => return {};

세미콜론을 반드시 붙여야 한다는 주장이 다수를 차지하지만 붙이지 말아야 한다는 주장도 설득력이 있다. 정적분석도구에서도 세미콜론 사용을 기본으로 설정하며 TC39도 세미콜론 사용을 권장하는 분위기 이다.

정적 분석 과정
소스 코드를 정적 분석 도구에 입력하면 Program Model Constructor가 코드를 중간코드로 변환한다.
중간코드에는 변수의 범위나 실행 경로를 추적할 수 있는 정보들이 담겨져 있으며, 이 코드를 Program Path Analyzer가 분석해 실제 실행되는 경로를 추적하면서 결함으로 의심되는 항목을 찾아 리스트를 작성하고, 그 리스트를 사용자에게 보여줌으로써 사용자가 결함 리스트를 검토하고 실제 결함을 찾도록 도와준다.
수정된 부분이 다른 코드에 미치는 영향을 최소화하기 때문에 테스팅 단계에서의 부담을 줄일 수 있고 높은 품질의 소프트웨어 출시가 가능해지게 되기 때문에 정적 분석 과정을 거친다.

TC39
Netscape와 Microsoft 등 이해당사자 간의 이름을 둘러싼 합의 끝에 ECMAScript라는 이름과 ECMA-262, "ECMAScript 언어 표준(ECMAScript Language Specification)"이 탄생했다. 오늘날 우리가 말하는 자바스크립트는 ECMA-262을 만족하는 구현체를 가리킨다. Ecma 인터내셔널의 여러 기술 위원회(Technial Committee, 이하 TC) 중 TC39 라는 위원회가 이 명세를 관리한다.

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

표현식인 문은 값으로 평가될 수 있다. 하지만 표현식이 아닌 문은 값으로 평가될 수 없다. 예를 들어, 변수 선언문은 값으로 평가될 수 없다. 할당문은 값으로 평가될 수 있어서 표현식인 문이다.

const score;   // 표현식이 아닌 문

ball = 100;   // 할당문은 표현식인 문

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 표현식이 아닌 문을 변수에 할당하면 에러가 발생한다.

const score = const ball;   // undefined

또 다른 예로

const score = ball = 100;

console.log(score);   // 100

변수 식별자가 메모리에 값을 지정하는 과정을 생각해보자 undefined로 공간을 확보하고 표현식의 값을 저장한다. 그런데 값은 데이터타입을 따라서 산출된다. 리터럴 값으로 ball은 값이 아니다. 그래서 저장 가능한 데이터타입 100만 메모리에 저장되어 값으로 100만 나온것이다. (뇌피셜임) ball은 식별자.

const play = ball + 50;   // 150