[Java Script] 모던 자바스크립트 정리 - 02. 표현식과 문

leegayeon·2023년 3월 20일
0
post-thumbnail

[
💻 모던 자바스크립트 Deep Dive 핵심 정리 💻


2.1 값(value)

값(value) : 표현식(expression)평가(evaluate)되어 생성된 결과를 말한다.

10 + 20;   // 10 + 20이 평가되어 숫자 값 30을 생성한다.
  • 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트(bit)의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.
    예를 들면, 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만 문자로 해석하면 'A'다.
  • 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 이다.
var sum = 10 + 20;   // 변수에는 10+20이 평가되어 생성된 값 30이 할당된다.
  • 위 예제에서 sum 변수에 할당되는 것은 10 + 20이 아니라 평가된 결과인 숫자 값 30이다. 즉, sum에 해당하는 메모리 공간에 저장된 것은 숫자 값 30이다. 따라서 10 + 20은 할당 이전에 평가되어 값을 생성해야 한다.

2.2 리터럴(literal)

리터럴(literal) : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말한다.

  • 사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성한다.
  • 이처럼 리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호('', "", ., [] 등)로 표기한 코드다.
    자바스크립트 엔진은 코드가 실행되는 시점인 런타임(runtime)에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.
  • 리터럴을 사용하면 다음과 같이 다양한 종류의 값을 생성할 수 있다.
리터럴예시비고
정수 리터럴100
부동소수점 리터럴10.5
2진수 리터럴0b010000010b로 시작
8진수 리터럴0o101ES6에서 도입. 0o로 시작
16진수 리터럴10x41ES6에서 도입. 0x로 시작
문자열 리터럴'Hello' "World"
불리언 리터럴true false
null 리터럴null
undefined 리터럴undefined
객체 리터럴{ name: 'Lee', address: 'Seoul' }
배열 리터럴[ 1, 2, 3 ]
함수 리터럴function() {}
정규 표현식 리터럴/[A-Z]+/g

2.3 표현식(expression)

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

리터럴도 값으로 평가되므로, 따라서 리터럴도 표현식이다.

var score = 100;
  • 위 예제의 100은 리터럴이다. 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.
var score = 50 + 50;
  • 50+50은 리터럴과 연산자로 이뤄져 있다. 하지만 50+50도 평가되어 숫자 값 100을 생성하므로 표현식!
score;   // score 변수 참조
  • 변수 식별자를 참조하면 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다!

  • 이처럼 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
    다음과 같이 다양한 표현식이 있지만 값으로 평가된다는 점에서 모두 동일한다.

    즉, 값으로 평가될 수 있는 모두 표현식이다!

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

// 식별자 표현식(이미 선언했다는 가정)
sum
person.name
arr[1]

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

// 함수/메서드 호출 표현식(이미 선언했다는 가정)
square()
person.getName()
  • 표현식은 값으로 평가된다. 이때, 표현식과 표현식이 평가된 값은 동등한 관계, 즉 동치(equivalent)다.
    예를 들어, 1 + 2 =3에서 1 + 2는 3과 동치다. 즉, 1 + 2와 3은 같다고 할 수 있다. 자바스크립트 표현식 1 + 2는 평가되어 3이라는 값을 생성하므로 표현식 1 + 2와 값 3은 동치다.
  • 따라서, 표현식은 값처럼 사용할 수 있다. 이것은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다.
  • 산술 연산자 +의 좌항과 우항에는 숫자 값이 위치해야 한다. 이때 숫자 값으로 평가될 수 있는 표현식이라면 숫자 값 대신 사용할 수 있다.
var x = 1 + 2;

// 식별자 표현식 x는 3으로 평가된다.
x + 3; 
  • 위 예제의 x + 3은 표현식이다. + 연산자는 좌항과 우항의 값을 산술 연산하는 연산자이므로 좌항과 우항에는 숫자 값이 위치해야 한다. 이때, 좌항 x는 식별자 표현식이다. 즉, x는 할당되어 있는 숫자 값 3으로 평가된다.
  • 따라서 숫자 값이 위치해야 할 자리에 표현식 x를 사용할 수 있다.
    이처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

2.4 문(statement)

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

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

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

여러 토큰으로 구성된 것이 바로 이다. 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰에 해당된다.

  • 문을 명령문이라고도 한다. 즉, 문은 컴퓨터에 내리는 명령이다.
// 변수 선언문
var x;

// 할당문
x = 5;

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

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

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }
  • 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.
  • 변수 선언문을 실행하면 변수가 선언되고, 할당문을 실행하면 값이 할당된다. 조건문을 실행하면 지정한 조건에 따라 실행할 코드 블록({...})이 결정되어 실행되고, 반복문을 실행하면 특정 코드 블록이 반복 실행된다.

2.5 세미콜론

세미콜론(;)문의 종료를 나타낸다.

즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.

  • 따라서 문을 끝낼 때는 세미콜론을 붙여야 한다. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록({ ... }) 뒤에는 세미콜론을 붙이지 않는다.
  • 예를 들어, if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문이다.
  • 문의 끝에 붙이는 세미콜론은 옵션. 즉, 세미콜론은 생략 가능!
    이는 자바스크립트 엔진이 소스코드를 해석할 때, 문의 끝 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 때문이다.

2.6 표현식인 문 or 표현식이 아닌 문

// 변수 선언문은 값으로 평가될 수 없으므로 표현식 X
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;    // 변수 선언문은 표현식이 아닌 문.

x = 100;   // 할당문은 그 자체가 표현식이지만, 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
  • 위 예제처럼 할당문 x = 100은 그 자체가 표현식.
    즉, 할당문은 표현식인 문이므로 값처럼 사용 가능하다!
// 표현식인 문은 값처럼 사용할 수 있다

var foo = x = 100;

console.log(foo);   // 100
  • 할당문을 값처럼 변수에 할당했다. 표현식 문인 할당문은 할당한 값으로 평가된다.
    그러므로, x = 100은 x 변수에 할당한 값 100으로 평가된다. 따라서 foo 변수에는 100이 할당된다.

완료 값(completion value) : 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력하는데, 이를 완료 값이라 한다.

완료 값은 표현식의 평가 결과가 아니다. 그러므로 다른 값처럼 변수에 할당할 수 없고, 참조할 수 없다.

profile
개발자 성장 일지💻

0개의 댓글