모던 자바스크립트 5장 - 표현식과 문

목차

• 값이란 무엇인가?
• 값은 어떻게 생성하는가?
• 표현식이란?
• 문이란 무엇인가?
• 표현식인 문과 표현식이 아닌 문

 

값이란 무엇인가?

표현식을 알기 위해서는 "값"이라는 용어를 알고 있어야 한다.

값이란, 식이 평가 되어 생성된 결과를 말한다.

  

    
    
    
    
  
10 + 20; // 30

위 코드에서, 10 + 20이라는 식은 평가되어서 숫자 값 30을 생성한다.

 

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석된다.

예를 들어서, 메모리에 저장된 값 0100 0001은 숫자로 해석하면 65지만 문자로 해석하면 'A'이다.

 

값은 어떻게 생성하는가?

값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것이다.

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

  

    
    
    
    
  
100 // 정수 리터럴

10.5 // 부동소수점 리터럴

0b01000001 // 2진수 리터럴

0o101 // 8진수 리터럴

0x41 // 16진수 리터럴

'Hello' // 문자열 리터럴

true
false // 불리언(boolean) 리터럴

null // null 리터럴

undefined // undefined 리터럴

{name: 'Lee', adress: 'Seoul'} // 객체 리터럴

[1, 2, 3] // 배열 리터럴

function() {} // 함수 리터럴

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

리터럴을 이용해 위와 같이 다양한 종류의 값을 생성할 수 있다.

  

    
    
    
    
  
var score = 100;

위 코드는 리터럴을 이용해 값을 생성한 예시로, 정수 리터럴을 사용해 score변수에 100을 할당하였다.

 

값을 생성하는 또 다른 방법은 식을 이용해 값을 생성하는 방법이다.

  

    
    
    
    
  
var sum = 10 + 20;

 

 

 

위 코드에서 10 + 20이란 식을 평가해서 sum에 30이란 값을 할당한다.

값에 대해 알아봤으니 본격적으로 표현식에 대해 알아보자

 

표현식이란?

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

 

  

    
    
    
    
  
var score = 100;     // 1
var score = 50 + 50; // 2
score;               // 3

1번 문에서 100은 리터럴으로서 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 그 자체로 표현식이다.

2번 문에서 50 + 50은 리터럴과 연산자로 이루어져 있는데 50 + 50도 평가되어 숫자 값 100을 생성하므로 표현식이다.

3 번문 또한 변수 식별자를 참조하면 변수 값(100)으로 평가되므로 표현식이다.

 

이처럼 표현식은 리터럴, 식별자, 연산자, 함수, 호출 등의 조합으로 이루어질 수 있다.

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

 

이때 표현식과 표현식이 평가된 값은 동치이므로 표현식 또한 값처럼 사용할 수 있다.

문법적으로 값이 위치할 수 있는 자리에 표현식도 위치할 수 있다는 말이다.

  

    
    
    
    
  
var x = 1 + 2; // 3
x + 3; // 6

 

1번 문에서 1 + 2이 평가되어서 값 3을 생성해 변수 x에 할당하였고,

2번 문에서 x 또한 값 3으로 평가되어서 값 6을 만들어 내었다.

 

 

문이란 무엇인가?

이번 글에서 '문'이라는 표현을 많이 사용했는데 그럼 '문'의 의미는 정확히 무엇일까?

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

즉, 컴퓨터에게 명령을 내리는 최소 단위이다.

  

    
    
    
    
  
var x; // 변수 선언'문'

x = 5; // 할당'문'

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

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

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

위 코드는 '문'의 예시이다.

 

문은 또 토큰으로 구성되는데, 토큰이란

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

  

    
    
    
    
  
var sum = 1 + 2;

위 코드에서 토큰은 var, sum, =, 1, +, 2, ;로 나눌 수 있다.

 

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

  

    
    
    
    
  
var x; // 표현식이 아닌 문

x = 1 + 2; // 표현식인 문

위 코드처럼 표현식과 문은 비슷해서 구별하기 어렵다고 느낄 수 있다.

그렇다면 표현식인 문과 표현식이 아닌 문은 어떻게 구별할 수 있을까?

정답은 변수에 할당해 보는 것이다.

표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다.

 

예를 들어보자.

  

    
    
    
    
  
var x; // 변수 선언문

x = 100; // 할당문

var foo = var x; // SyntaxError

var foo = x = 100;

2번 문장에서 100은 값으로 평가되어 변수 x에 할당이 되었고,

3번 문장에서 var x는 값으로 평가할 수 없으므로 변수에 할당할 수 없다.

또, 할당문 또한 표현식이 될 수 있다.

4번 문장에서 오른쪽에서 왼쪽으로 할당되며 최종으로 변수 foo에 값 100이 할당된다.

 

표현식인 문과 표현식이 아닌 문을 확인할 수 있는 또 다른 방법은

크롬 개발자 도구에서 확인 해보는 것이다.

  

    
    
    
    
  
var foo = 10;
//undefined

if (ture) {}
//undefined

100 + foo;
//110

foo = 100;
//100

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력하고

표현식이라면 언제나 평가된 값을 출력한다.

출력된 값을 완료값이라 한다.

 

오탈자, 오류 지적, 보완할 점 등 언제나 환영합니다.

메일이나 댓글로로 남겨주시면 확인 후 수정하겠습니다.