3 분 소요

▶ 값(value)

값이란 표현식이 평가되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하는 것을 말한다.

// 10+20은 평가되어 30이라는 값을 생성하였다.
10 + 20; //30

값은 다양한 방법으로도 생성할 수 있다. 가장 기본적인 방법은 리터럴을 사용하는 것이다.


▶ 리터럴

리터럴이란 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳 등)나 약속된 기호({},’’,// 등)를 사용해 값을 생성하는 표기법을 말한다.(즉, 값 그자체인 것이다.)

const value = 100; // 100은 정수 리터럴
const arr = [1,2,3]; // 1,2,3은 배열 리터럴
{name:"박시은", age:"22"} // 객체 리터럴
[1, 2, 3] // 배열 리터럴
function() {} // 함수 리터럴
'Hello, World' // 문자열 리터럴

이처럼 리터럴을 사용하면 다양한 종류의 값을 생성할 수 있다. 참고) 객체 리터럴을 사용하면 객체를 간편하게 생성할 수 있다.


▶ 표현식(Expressions)

표현식은 프로그램에서 값으로 평가될 수 있는 코드 조각을 의미한다. 즉, 표현식이 평가되면 새로운 값을 생성하는 것이다.

  • 예를 들어보자, 표현식 2 + 3 이라는 값을 평가하면 코드 실행시 2 + 3 = 5라는 값이 반환된다. 즉, 표현식 235라는 값을 가진 것으로 평가되었다고 말할 수 있다.
  • 표현식을 console.log()에 넣었을 때 하나의 값으로 변한다.


아래 코드의 리터럴 100은 js엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.

const value = 100;


리터럴과 연산자로 이루어져있는 50+50 또한 평가되어 숫자 값 100을 생성하므로 표현식이다.

const value = 50 + 50;


아래 코드들은 실행시 결과 값을 반환할 수 있기 때문에 표현식이다.

// 리터럴 표현식
10;
("hello");

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

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

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

위처럼 표현식은 값으로 사용할 수 있다!


기본적으로 복잡한 표현식은 단순한 표현식과 연산자의 조합으로 구성된다.

  • 아래 그림에서는 표현식, 연산자, 표현식, 연산자와 같은 구조로 복잡한 표현식을 만들었고, 이것 역시 표현식이기때문에 ‘2’라는 값으로 평가되는 것이다.


그렇다면 아래 코드는 표현식일까?

const x = 1 + 2;
x + 3;

당연히 표현식이다!!! 좌항 x는 식별자 표현식으로 3으로 평가되고, 두 피연산자 사이에 연산자가 있어서 두 값을 더하고 결과값을 만들어 내기 때문이다!




▶ 문(statement)

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

  • 표현식이 ‘평가’를 통해 값으로 바뀐다면 문은 ‘실행’을 통해 어떤 동작을 수행한다.
  • 문장이 마침표로 끝나는 것처럼, 문의 끝은 세미콜론으로 끝난다.
  • 문은 선언문과 표현문으로 나뉜다.
  • 실행되는 문의 실행 순서나 조건을 제어할 수 있는데, 이것들은 조건’문’, 반복’문’이라고 부른다.


문은 리터럴, 연산자, 표현식, 키워드 등으로 구성된다.

// 변수 선언문
var x;

// 할당문
x = 5;

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

// 조건문
if (x > 5) {  }

// 반복문
for (var i = 0; i < 10; i++) {  }




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

표현식 문은 값으로 평가될 수 있는 문을 말하며, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다.

console.log("Hello, World!"); // 표현식 문


표현식은 그 자체로 문이 될 수 있고, 문의 일부일 수도 있다.

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

x = 100; // 표현식이면서 완전한 문이다.


표현식의 문은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문이다.

const value = const x; // 표현식이 아닌 문은 값처럼 사용할 수 없다.




▶ 표현식 vs 문

표현식과 문을 어떻게 구별할까❓

  • 간단하다! 바로 변수해 할당해보면 된다.
  • 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있지만, 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.


// 변수 선언문
var value = var x;

위 코드를 보자. var x를 값으로 평가할 수 있을까? 당연히 불가능하다. 따라서 변수 선언문은 표현식이 아닌 문인 것이다!


// 할당문
const value = 10;
console.log(value);

하지만 위와 같이 value = 10은 그 자체가 표현식이기 때문에 표현식인 문이다. 따라서 표현식인 문은 값처럼 사용할 수 있다!


즉, 표현식은 프로그램의 상태를 어떤 형태로도 바꾸지 않는다. 문은 값을 가지지는 않지만, 프로그램의 상태를 변경한다. ➡️ 자바스크립트 프로그램은 실행할 문의 모음인 것이다!




📎참조

  • mozilla 표현식
  • https://ko.javascript.info/function-expressions
  • https://nbcamp.gitbook.io/javascript-handbook/p-art.01-hello-world/0.-../undefined-2

댓글남기기