자바스크립트 교과서 - 7. 문법

Seoyong Lee·2023년 10월 2일

JavaScript

개발 공부

목록 보기

9/21

문과 표현식

자바스크립트는 문과 표현식을 모두 가진 문장 언어이다.

프로그래밍 언어는 표현 언어(expression language)와 문장 언어(statement language)로 나눌 수 있습니다. 문장 언어는 문장과 표현식을 가지고 있지만, 표현 언어는 표현식만 가지고 있습니다. …자바스크립트를 포함한 대부분의 인기 있는 언어들은 문장 언어입니다.

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p127.
문과 표현식은 서로 다른 개념이다.

문(Statement)과 표현식(Expression)을 대충 같은 의미라고 넘겨버리는 개발자가 허다하다. 그러나 자바스크립트에서 두 용어는 아주 중요한 차이가 있으므로 명확하게 분별하자.

카일 심슨 , 『You Don’t Know JS - 타입과 문법, 스코프와 클로저』, 한빛미디어(2017), p150.

문

문(Statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
- 문의 집합이 프로그램이며, 문은 여러 토큰으로 구성된다.
- 토큰은 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
문은 문장(Sentence), 표현식은 어구(Phrase)에 해당된다고 볼 수 있다.
```
const a = 3 * 6;
b;
```
위 예시에서 3 * 6 은 표현식이며, 위 아래 모두 표현식이 포함된 문으로 볼 수 있다. 위의 경우 변수를 선언 하므로 선언문(Declaration Statement)이라고 한다.

표현식

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

이웅모 , 『모던 자바스크립트 Deep Dive』, 위키북스(2020), p52.

즉 표현식은 읽히는 즉시 값을 평가한다. 값(value)은 표현식 평가의 결과물로 볼 수 있다.
아래와 같이 표현식이 아닌 문의 경우도 존재한다. 평가 대상이 없다면 표현식이 아니다.

var x; // 이와 같은 변수 선언문은 표현식이 아닌 문이다.
x = 100; // 할당문은 그 자체가 표현식이면서 완벽한 문이다.

표현식의 종류

자바스크립트에서는 문장 위치에 어떤 표현식을 쓰든 상관없습니다. 조잡하지만, 인기가 많은 언어 설계 방식이죠. 문장이 올 자리에 쓰기 좋은 세 가지 자바스크립트 표현식으로는 할당문, 호출문, delete가 있습니다. 아쉽게도 자바스크립트에서는 이 세 가지 외 다른 모든 종류의 표현식을 문장 위치에 쓸 수 있기 때문에 컴파일러가 에러를 찾아내기가 쉽지 않습니다.

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p130.

위 설명과 같이 사실 자바스크립트의 표현식은 생각 이상으로 범위가 넓다.

기본 표현식

단독으로 존재하는 가장 단순한 표현식으로 리터럴, 상수, 변수 참조 등이 있다.
- 1.23
- “hello”
- true
- undefined (전역 객체의 ‘undefined’ 프로퍼티 값)

초기화 및 정의 표현식

객체와 배열의 초기화 표현식은(initializer)는 그 값이 새로 생성된 객체나 배열인 표현식이다.
- [ ]
- [1 , , , 4]
- let q = { };
함수 정의 표현식은 함수를 정의하며 그 값은 함수이다.
```
let square = function(x) { return x * x; };
```

프로퍼티 접근 표현식

객체 프로퍼티나 배열 요소의 값으로 평가된다.
다음 두 가지 접근 문법을 사용할 수 있다.
- expression.identifier
- expression[identifier]
프로퍼티 이름에 스페이스나 구두점이 들어있거나 숫자인 경우 반드시 두 번째 방법을 사용해야 한다.
ES2020에서 추가된 옵셔널 체이닝은 다음과 같이 평가 결과가 null과 undefined인 경우 undefined를 반환한다.
- expression?.identifier
- expression?.[identifier]

호출 표현식

함수나 메서드를 호출(실행)하는 문법이다.
ES2020에서 추가된 조건부 호출을 사용하면 표현식이 null이나 undefined인 경우 호출 표현식 전체를 undefined로 평가한다.
```
function square (x, log) {
	log?.(x); // 함수를 받은 경우에만 호출
	return x * x;
}
```

산술 표현식

단항 산술 연산자
- +, -, ++, — 가 여기에 속한다.
- 오른쪽에서 왼쪽으로 연산을 수행하며 피연산자를 숫자로 변환한다.
비트 연산자
- 이진 비트 대상 저수준 조작을 위한 연산자이다.
- AND(&), OR(|), XOR(^), NOT(~), 왼쪽 시프트(<<), 부호 붙은 오른쪽 시프트(>>), 0으로 채우는 오른쪽 시프트(>>>) 등이 존재한다.

관계 표현식

일치, 불일치 연산자(==, ===, ≠. ≠=)와 비교 연산자(<, >, ≤, ≥)가 포함된다.
in, instanceof 연산자도 관계 표현식으로 볼 수 있다.

논리 표현식

&&, ||, ! 등의 불 연산을 수행하는 논리 연산자.

할당 표현식

= 를 이용해 변수나 프로퍼티에 값을 할당한다.
다음과 같이 할당과 다른 연산자를 합친 단축 표현을 지원한다.
- +=, -=, *=, /=, %=

평가 표현식

인터프리터 언어 특성상 문자열 해석 및 평가를 위해 존재하는 eval( )이 여기에 속한다.
eval은 다음 방식으로 동작한다.

자바스크립트의 eval( ) 함수는 문자열을 인자로 받아들여 실행 시점에 문자열의 내용을 코드의 일부분처럼 처리한다. 즉, 처음 작성한 코드에 프로그램에서 생성한 코드를 집어넣어 마치 처음 작성될 때부터 있던 것처럼 실행한다.

카일 심슨 , 『You Don’t Know JS - 타입과 문법, 스코프와 클로저』, 한빛미디어(2017), p208.

그러나 strict mode를 사용하면 eval 관련 여러 제한을 두고 있으므로 개발 과정에서 실제로 eval을 사용할 일은 없을것이다.

동적으로 문자열을 평가해 소스 코드로 바꾸는 것은 지나치게 강력한 기능이며, 현실에서는 (거의) 절대 필요하지 않습니다. 만약 eval( )을 사용하고 있다면, 정말로 필요해서 사용하고 있는지 심사숙고해야 합니다. 특히 eval( )은 보안 허점을 만듭니다. 사용자가 입력한 문자열을 eval( )에 전달해서는 절대 안 됩니다.

데이비드 플래너건 , 『자바스크립트 완벽 가이드』, 인사이트(2022), p101.

References

데이비드 플래너건 , 『자바스크립트 완벽 가이드』, 인사이트(2022)
더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020)
카일 심슨 , 『You Don’t Know JS - 타입과 문법, 스코프와 클로저』, 한빛미디어(2017)
이웅모 , 『모던 자바스크립트 Deep Dive』, 위키북스(2020)