[Javascript] 값이란 무엇인가? 값에 대해 더 알아보기

📢 들어가며

값은 자바스크립트에서 가장 많이 사용되는 요소 중 하나이다. 그렇기 때문에 값의 정의와 사용방법을 분명히 이해해야만 올바르게 활용할 수 있다.

기본 문법에 대한 설명은 포함되어 있지 않습니다.

 

 

🖥 값과 표현식

값은 표현식이 평가된 결과로 자바스크립트에서 지원하는 8가 타입 중 하나에 속하는 데이터라고 할 수 있다.

 

그렇다면 표현식은 무엇일까?

 

표현식은 자바스크립트 소스에서 문법적으로 완결된 코드 단위로, 평가되면 단 하나의 값을 산출한다.

쉽게 말해 표현식으로 작성 된 코드를 실행했을 때 오류 없이 동작하고, 실행의 결과가 값을 만드는 코드라고 할 수 있다.

즉, 값을 만들지 못하는 코드는 표현식이 아니다.

 

 

표현식에는 무엇이 있는가?

대표적으로 다음과 같은 표현식이 존재한다. 이외에도 다양한 표현식이 존재한다.

 

1️⃣ 리터럴

흔히 사용하는 리터럴 또한 표현식 중 하나이다. 아래의 코드를 실행한 결과가 하나의 값이 되기 때문이다.

1
"hello"
true

 

2️⃣ 연산자 표현식

연산자 혼자로는 사용을 할 수 없지만 연산자와 피연산자로 구성하여 하나의 표현식을 만들 수 있다. 연산의 결과는 항상 값으로 평가되므로, 해당 코드는 표현식이 된다.

1 + 1
x > 10
a && b

 

3️⃣ 함수 표현식

함수 또한 자바스크립트에서 정의된 타입 중 하나이기 때문에 값으로써 사용할 수 있다.

const fn = function () {

};

 

 

함수 표현식 vs 함수 선언문

함수를 정의할 때는 함수 선언문과 함수 표현식 두 가지 방식이 있다. 이름에서 알 수 있듯이, 함수 표현식은 실행 시 "값"으로 평가되며, 함수 선언문은 값이 아니라 실행 가능한 코드 블록으로 처리된다.

 

문법적으로는 두 방식 모두 function 키워드를 사용하고 중괄호 {}로 본문을 작성한다.

const fn = function () {

};

function fn() {

}

 

함수 정의 방식이 표현식인지 선언문인지를 구분하는 가장 직관적인 방법 중 하나는, 함수 정의 후 곧바로 괄호 ()를 붙여 호출이 가능한지 확인하는 것이다.

 

함수 표현식의 실행 결과는 값이기 때문에 바로 호출이 가능하다.

const result = function () {
   return 1;
}()

result 변수에는 함수 호출 후 반환값이 1이 저장된다.

 

하지만, 함수 선언문의 경우 실행의 결과가 값이 아니기 때문에 문법 오류가 발생한다.

function fn() {
    console.log(1)
}()

Uncaught SyntaxError: Unexpected token ')'

 

위에서 살펴본 것처럼, 같은 형태의 코드라도 그것이 어디에 정의되어 있느냐에 따라 자바스크립트는 전혀 다르게 해석하거나 실행할 수 있다.

 

이처럼 문맥에 따라 코드의 의미가 달라지는 값과 관련 된 사례들에 대해 알아보자.

 

 

함수 표현식

함수 표현식을 활용한 대표적인 패턴으로는 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)가 존재한다. 정의되자마자 즉시 실행되는 함수이다.

(function () {
  //
})();

(function () {
  //
}());

(async () => {
  //
})();

 

괄호 () 는 위치에 따라 연산자로써 사용되기도 하고, 함수를 호출할때도 사용된다. 위처럼 즉시 실행 함수에서 함수를 감쌀때 사용되는 용도는 그룹 연산자이다.

 

그룹 연산자는 하나의 피연산자(표현식)를 괄호로 감싸서 평가 우선순위를 높여준다.

그룹 연산자도 연산자의 일종이기 때문에 피연산자(표현식)를 가질 수 있으며, 괄호 안에 오는 요소는 반드시 평가 가능한 표현식이어야 한다.

따라서 괄호 안에 function 키워드가 올 경우, 자바스크립트는 이를 함수 표현식으로 해석한다.

 

아래 코드에서 + 연산자의 우측에는 표현식이 와야 하기 때문에 함수 표현식으로 해석된다.

1 + function () { return 2; }()

 

함수 표현식은 단순히 변수를 통해 저장되는 경우만을 의미하지 않는다.

자바스크립트에서 변수는 오직 값(표현식의 결과)만을 가질 수 있기 때문에, 변수에 할당되는 function은 함수 선언문이 아닌 함수 표현식으로 해석된다.

여기서 중요한 건 형식 자체를 외우는 게 아니라, 함수가 등장한 “문맥”을 이해하는 것이다.
단순히 "괄호 안에 있으니 표현식", "변수에 할당되었으니 표현식"처럼 외우게 되면, 모든 경우를 암기해야한다.
function 키워드가 사용된 위치에 표현식이 요구되는 문맥이면, 그것은 함수 표현식으로 해석된다. 라고 이해해야한다.

 

 

화살표 함수에서 객체 반환하기

화살표 함수는 중괄호를 생략하는 경우 표현식의 평가 결과를 자동으로 반환하게 된다. 그래서 표현식이 아닌 문이 오는 경우 에러가 발생하게 된다.

 

아래 코드에서 if문은 식이 아니기 때문에 에러가 발생한다.

() => if (true) console.log(1)

 

아래 코드에서 1 + 1은 표현식이기 때문에 정상적으로 작동한다. 화살표 함수 호출 시 표현식의 실행 결과가 반환된다.

() => 1 + 1

 

이때 객체 리터럴은 화살표 함수의 표현식 자리에 정의하려고 에러가 발생한다.

() => { name: 'hello', age: 24 }

 

그 이유는 중괄호를 해석할 때 블록문으로 먼저 인식한다. 즉, 해당 중괄호는 객체 리터럴이 아닌 함수 본문을 구성하는 블록문으로 처리된다.

 

이를 해결하려면, 객체 리터럴을 그룹 연산자로 감싸줘야 한다.

 

왜냐하면, 그룹 연산자 내부에 오는 코드는 항상 표현식으로 해석되기 때문에 중괄호를 함수 블록이 아닌 객체 리터럴로 인식하게 된다.

() => ({ name: 'hello', age: 24 })

 

 

🎯 정리

• 중요한 건 형식 자체를 외우는 게 아니라, "문맥"을 이해하는 것이다.