코밍이의 하루

[Deep Dive Study] 5장 표현식과 문 본문

웹언어 공부/JS

[Deep Dive Study] 5장 표현식과 문

코밍이 2023. 2. 24. 12:54

5.1 값

1. 값 : 식(표현식)이 평가되어 생성된 결과

1) 평가 : 식을 해석해서 값을 생성하거나 참조하는 것

2) 예제

// 10 + 20은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30

// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

5.2 리터럴

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

1) 정수 리터럴 : 100

2) 부동소수점 리터럴 : 10.5

3) 2진수 리터럴 : 0b010002

4) 8진수 리터럴 : 0o101

5) 16진수 리터럴 : 0x41

6) 문자열 리터럴 : 'Hello' , "World"

7) 불리언 리터럴 : true, false

8) null 리터럴 : null

9) undefined 리터럴 : undefined

10) 객체 리터럴 : { name: 'Lee', address: 'Seoul' }

11) 배열 리터럴 : [1, 2, 3]

12) 함수 리터럴 : function() {}

13) 정규 표현식 리터럴 : /[A-Z]+/g

 

5.3 표현식

1. 표현식(expression) : 값으로 평가될 수 있는 문

1) 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[i]

// 연산자 표현식
10 + 20
sum = 20
sum !== 10

// 함수 메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()


var x = 1 + 2;

// 식별자 표현식 x는 3으로 평가된다.
x + 3; // 6

5.4 문(명령문)

1. 문(statement)(명령문): 프로그램을 구성하는 기본 단위이자 최소 실행 단위

1) 문의 집합으로 이뤄진 것이 프로그램이며 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.

2) 문은 여러 토큰으로 구성된다.

* 토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미

ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표(.) 등의 특수기호

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

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

1. 세미콜론(;) : 문의 종료

1) 문을 끝낼 때는 가급적이면 세미콜론을 붙여야 한다.

- 단, 0개 이상의 문을 중괄호로 묶은 코드 블럭({...}) 뒤에는 세미콜론을 붙이지 않는다.

(ex. if문, for문, 함수 등 자체 종결성 가지는 문)

2) 세미콜론은 자바스크립트 엔진에 있는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되고 있어서 생략이 가능하다.

- 하지만 간혹 개발자의 예측과 다르게 작용할 수 있기 때문에 1)에서 설명한 것처럼 가급적이면 세미콜론을 붙여야 한다.

 

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

1. 표현식인 문 : 값으로 평가될 수 있는 문

- ex) 할당문

2. 표현식이 아닌 문 : 값으로 평가될 수 없는 문

- ex) 변수 선언문

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

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

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

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // 에러 발생

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

 

Review

- 이번 장을 통해서 표현식과 문에 대해서 좀 더 자세히 알 수 있었고 두 용어에 대한 차이점도 알 수 있었다. 처음에는 수학이 생각나서 표현식이라고 하면 a = b 만 되면 다 표현식인 줄 알았는데 그런 것은 아니었고 표현식 정의를 보면 값으로 평가될 수 있는 문이기 때문에 이 정의를 생각하면서 코딩할 때도 의식하게 되는 계기가 되었다. 

출처 : https://wikibook.co.kr/mjs/

 

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리

269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도

wikibook.co.kr