개념을 이해한다는 것은 용어를 정확히 이해하고 설명할 수 있다는 것!!
이번 챕터에서 앞으로 자주 사용할 용어의 의미를 주의 깊게 살펴보자😎
값 : 식(표현식)이 평가되어 생성된 결과
평가 : 식을 해석해서 값을 생성하거나 참조하는 것
// 10 + 20은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트(bit)의 나열로 저장된다.
메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.
예시) 메모리에 저장된 값 0100 0001 (숫자로 해석 - 65, 문자로 해석 - "A")
변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
var sum = 10 + 20; // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
// 숫자 리터럴 3
3위 예제의 3은 아라비아 숫자가 아닌 숫자 리터럴이다.
사람이 이해하는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드애 기술하면 js 엔진은 이를 평가해 숫자 3을 생성한다.
이처럼 리터럴은
사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호("", ., [], {}, // 등)로 표기한 코드이다.
즉, "값을 생성하기 위해 미리 약속한 표기법"이라고 할 수 있다.
리터럴을 사용하면 다음과 같이 다양한 데이터 타입의 값을 생성할 수 있다.
| 리터럴 | 예시 | 비고 |
|---|---|---|
| 정수 리터럴 | 100 | |
| 부동소수점 리터럴 | 10.5 | |
| 2진수 리터럴 | 0b01000001 | 0b로 시작 |
| 8진수 리터럴 | 0o101 | ES6에서 도입. 0o으로 시작 |
| 16진수 리터럴 | 0x41 | ES6에서 도입. 0x로 시작 |
| 문자열 리터럴 | 'Hello' "world" |
|
| 불리언 리터럴 | true false |
|
| null 리터럴 | null | |
| undefined 리터럴 | undefined | |
| 객체 리터럴 | { name: 'Lee', address: 'Seoul' } | |
| 배열 리터럴 | [ 1, 2, 3 ] | |
| 함수 리터럴 | function() {} | |
| 정규표현식 리터럴 | /[A-Z]+/g |
표현식 : 값으로 평가될 수 있는 문
표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.
var score = 100;위 예제의 100은 리터럴이다.
리터럴 100은 js 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식!!
var score = 50 + 50;50 + 50은 리터럴과 연산자로 이뤄져 있다.
But, 50 + 50도 평가되어 숫자 값 100을 생성하므로 표현식이다!
score; // 100변수 식별자를 참조하면 변수값으로 평가된다.
식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.
다음과 같은 것들도 다 표현식이다.
// 리터럴 표현식
3
"Hello"
// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]
// 연산자 표현식
10 + 20
sum = 10
sum !== 10
// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()밑에 예제를 보면 숫자 값이 위치해야 할 자리에 표현식 x를 사용할 수 있다.
이처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들 수 있다.
var x = 1 + 2;
// 식별자 표현식 x는 3으로 평가된다.
x + 3;문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
문은 여러 토큰으로 구성된다.
토큰 : 문법적인 의미를 가지며, 문법적으로는 더 이상 나눌 수 없는 코드의 기본 요소
ex) 키워드, 식별자. 연산자. 리터럴, 세미콜론(;)이나 마침표(.) 등의 특수기호
문을 명령문이라고도 부른다.
즉, 문은 컴퓨터에 내리는 명령어다.
문은 선언문, 할당문, 조건문, 반복문 등으로 구분한다.
세미콜론(;)은 문의 종료를 나타낸다.
문을 끝낼 때에는 세미콜론을 붙여야 한다.(세미콜론 자동 삽입 기능 때문에 생략 가능)
단, 0개 이상의 문을 중괄호로 묶은 코드 블록({...}) 뒤에는 세미콜론을 붙이지 않는다.(자체 종결성을 가짐)
ex) if문, for문, 함수 등의 코드 블록 뒤
표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다.
// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;
// 1, 2, 1 + 2, ㅌ = 1 + 2 모두 다 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이다.
x = 1 + 2;표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것!!
표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다.
반대로, 표현식이 아닌 문은 변수에 할당하면 에러가 난다.
// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError: Unexpected token var따라서 변수 선언문은 값으로 사용될 수 없다!
// 변수 선언문은 표현식이 아닌 문이다.
var x;
// 할당문은 표현식이면서 완전한 문이다. 즉, 표현식인 문이다.
x = 100;
// 표현식인 문은 값처럼 사용할 수 있다.
var foo = x = 100;
console.log(foo); // 100위 예제에서 할당문(x = 100;)은 표현식인 문이기 때문에 값처럼 사용할 수 있다.
크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다. 이를 완료 값이라 한다.
완료 값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당도, 참조도 할 수 없다.
// 변수 선언문
var foo = 10; // undefined 출력
// 조건문
if (ture) {} // undefined 출력표현식인 문을 실행하면 언제나 평가된 값을 반환한다.
var foo = 10; // undefined 출력
// 표현식인 문
100 + foo; // 110 출력
// 할당문
foo = 100; // 100 출력