5.1 값
값 Value은 식(표현식 expression)이 평가 evaluate되어 생성된 결과를 말한다.
모든 값은 데이터 타입을 가지며, 메모리에 2진수 (즉, bit의 나열)로 저장된다.
// 변수 sum에는 10 + 20이 평가되어 생성된 숫자 "값" 30이 할당된다.
var sum = 10 + 20;위의 예제에서는 sum 변수에 10 + 20 그 자체가 저장되는 것이 아니라, 이를 연산한 값인 30이 값으로 할당된다. 값은 다양한 방법으로 생성할 수 있는데 가장 기본적인 방법은 리터럴 Literal을 사용하는 것이다.
5.2 리터럴
리터럴 Literal은 사람이 이해할 수 있는 문자(숫자, 알파벳 등등) 또는 약속된 기호(' ', " ", [], {}, 등등)를 사용해 값을 생성하는 표기법 notation을 뜻한다.
리터럴을 사용하면 다음과 같이 다양한 종류 Data Type의 값을 생성할 수 있다.
| 리터럴 | 예시 | 비고 |
|---|---|---|
| 정수 리터럴 | 100 | |
| 부동소수점 리터럴 | 10.5 | |
| 2진수 리터럴 | 0b01000001 | 0b로 시작 |
| 8진수 리터럴 | 0o101 | ES6에서 도입. 0o로 시작 |
| 16진수 리터럴 | 0x41 | ES6에서 도입. 0x로 시작 |
| 문자열 리터럴 | 'Hello', "World" | |
| 불리언 리터럴 | true, false | |
| null 리터럴 | null | |
| undefined 리터럴 | undefind | |
| 객체 리터럴 | { name : 'Lee', address: 'Seoul' } | |
| 배열 리터럴 | [ 1, 2, 3 ] | |
| 함수 리터럴 | function() {} | |
| 정규 표현식 리터럴 | /[a-zA-Z0-9]+/g |
5.3 표현식
표현식 expression은 값으로 평가될 수 있는 문 statement이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다. 5.2에서 본 리터럴도 값으로 평가되기에 표현식이라고 할 수 있다.
👉 즉, 값으로 평가될 수 있는 문은 모두 표현식이다.
// 리터럴 표현식
10
'Hello'
// 식별자 표현식(선언이 이미 존재한다고 가정하자)
sum
person.name
arr[1]
// 연산자 표현식
10 + 20
sum = 10
sum !== 10
// 함수 or 메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()5.4 문
문 statement은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
문은 여러 토큰으로 구성되게 되는데, 토큰 token이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
var sum = 1 + 2;위의 코드를 보면 var, sum, =, 1, +, 2, ; 으로 세부적으로 볼 수 있다. 키워드, 식별자, 연산자, 리터럴, 세미콜론이나 마침표 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다. 즉, 문을 이루는 각각의 요소가 토큰이라고 볼 수 있다.
문은 명령문이라고도 부르는데, 다음과 같이 구분할 수 있다.
- 선언문 :
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에서도 문의 종료를 뜻한다
C/C++과 같은 언어에서는 문장의 끝에는 무조건 세미콜론을 붙여야 하지만, JS에서의 세미콜론은 선택이다. 붙여도 되고 붙이지 않아도 된다. 이는 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI automatic semicolon insertion)이 암묵적으로 수행된다.
JS를 이용하여 개발을 할 때에 세미콜론의 유무는 자유이기 때문에 ESLint를 통해 편한대로 설정한 뒤 개발을 하면 될 것 같다. ESLint에 관해서는 Prettier와 함께 설정하는 방법을 따로 글을 쓸 예정이다.
나는 이전에 swift와 python을 이용하여 개발을 많이 하였기 때문에 세미콜론을 붙이지 않는 것이 더 익숙해져있다. 그렇기에 나는 붙이지 않고 개발을 하는데, 추후 협업을 할 때에는 다른 개발자와 협의를 통해 결정을 해야 할 부분이라고 생각한다.
5.6 표현식인 문과 표현식이 아닌 문
표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다. 이게 무슨 말일까..?
다음의 코드를 살펴보자.
// 변수 선언문은 값으로 평가될 수 없기에 표현식이 아니다.
var x
// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2문에는 표현식인 문과 표현식이 아닌 문이 있다. 표현식은 값으로 평가될 수 있는 문이고 표현식이 아닌 문은 값으로 평가될 수 없는 문이라고 한다. 도대체 이게 뭔 소리인가 싶다.
var foo = var x위의 코드를 살펴보면 SyntaxError: Unexpected token var 에러가 뿜어져 나올 것이다. 표현식인지 알 수 있는 가장 간단한 방법은 변수에 할당해 보는 것인데, 위의 코드는 var x가 var foo의 값으로 평가될 수 없다. 따라서 변수 선언문은 표현식이 아니다.
