[모던 자바스크립트 딥다이브]_표현식과 문 어디까지 보고 오셨어요?

값

값이란 식을 통해 도출된 결과를 말합니다.

예를 들어 5+20 이란 식이 있을때,

+연산자를 기준으로 양 옆에 있는 5와 20이라는 수를 인식하고,

25라는 수를 도출해 냈을 때,

우리는 이것을 값이라고 부를 수 있게 됩니다.

---

리터럴

리터럴이란, 우리가 앞서 보았던 5라는 아라비아 수를 단순히 수가 아닌 숫자 리터럴이라고 합니다.

즉, 글자 정보라는 것이죠,

여러가지 리터럴이 있고 다음과 같습니다.

• 정수리터럴
• 부동소수점 리터럴
• 2진수 리터럴
• 8진수 리터럴
• 16진수 리터럴
• 문자열 리터럴
• 불리언 리터럴
• null 리터럴
• undefined 리터럴
• 객체 리터럴
• 배열 리터럴
• 배열 리터럴
• 함수 리터럴
• 정규 표현식 리터럴

---

표현식

표현식은 간단하게 값으로 사용할 수 있는 문장입니다.

var exampleData;

console.log(exampleData = 10); // 10

console.log(exampleData); // 10

위의 코드에서 보인 것처럼 값 자체로 평가될 수 있는 문은 모두 표현식입니다.

---

문

문은 자바스크립트의 문법에서 가장 기본적인 구조단위를 말합니다.

예를 들어

var exampleCode = 'let' + 'me' + 'go'

위와 같은 코드가 있을 때,

var, exampleCode, =, 'let' ....등이 모두 토큰이고,

각 토큰들이 모여 문을 이루게 됩니다.

하지만 이전 표현식에서 본 것처럼 값자체로 평가되는 문은 모두 표현식이라고 했습니다.

그렇다면 표현식이 될 수 없는 문은 어떤게 있을까요?

변수 선언문은 값이 될 수 없겠죠?

가장 쉽게 파악할 수 있는 것은 변수에 할당해보고 문법적 오류가 발생하면 표현식이 아닌 겁니다.

var example;

example = 50;

var newx = var example; // SyntaxError
var newx = example; // 50

변수 선언문 자체는 표현식이 아니지만 할당문은 표현식이 될 수 있는 것을 확인해보았습니다.

---

세미콜론

자바스크립트에서 세미콜론은 문의 종료를 나타냅니다.

우리는 줄바꿈으로 다른 문장임을 인식하지만,

자바스크립트 엔진은 세미콜론으로 다른 코드임을 인식하게 됩니다.

따라서 우리가 원하는 코드가 끝이 났다면 세미콜론으로 표현해주면 됩니다.

그리고 생략이 가능할 때도 있습니다.

세미콜론 자동 삽입 기능이 암묵적으로 수행(ASI : Automatic Semicolon Insertion)될 때가 있습니다.

중괄호로 묶은 코드블럭 뒤에는 붙이지 않아도 자체적으로 종결성을 가지기 때문입니다.

이 외에도 return과 같은 예약어도 합니다.

다만 자동으로 수행되는 것이기 때문에 우리가 원치 않는 방향으로 인식될 수 있습니다.

 

function ( )  {
    return
    {}
        // ASI 동작 결과 : return; {};
        // 개발자 의도 : return {};
}

ASI의 경우 return을 해버리고 이후에 나올 {} 객체를 무시하고 바로 함수가 종료되어 버립니다.

개발자의 의도는 객체를 반환하도록 설계했는데 말입니다.

따라서 이러한 불상사를 방지하기 위해 세미콜론을 붙여주는 것을 권장합니다.