값식문씨

movie·2022년 7월 17일

누구야 진자..

값 = Value
식 = Expression
문 = Statement

☁️ 값 = Value

프로그램이 조작할 수 있는 어떤 표현
어떤 데이터 type도 가질 수 있다. (문자열, 숫자 등)
L-Value, R-Value로 나눌 수 있다.
- L-Value : = 연산자 기준 왼쪽 / 메모리주소, 식별자를 가진다.
- R-Value : = 연산자 기준 오른쪽 / 단일 표현식에서 잠깐 사용하는 임시 값

// 1️⃣ 조작할 수 있는 어떤 표현
let a;
a = 0;
a = 1; // a는 조작 가능하다. 

// 2️⃣ 어떤 데이터 타입도 가질 수 있다. 
const str = '뭅';
const num = 2;

// 3️⃣ L-Value & R-Value 
// L-Value : a
// R-Value : 15
const a = 15;

모든 값은 데이터 타입을 가지며, bit의 나열로 저장되고, 메모리에 저장된 값이 데이터 타입에 따라 다르게 해석될 수 있다.

☁️ 식 = Expression

= 값으로 평가될 수 있는 문 (statement)

식 ⊂ 문
값을 결정짓기 위해 평가될 수 있는 구문
상수, 변수, 함수, 연산자의 조합으로 이루어진다.

평가(evaluation) : 식을 통해 값을 생성해내는 것
리터럴(literal) : 표현식의 일종으로 문자(숫자, 영어, 한글) 혹은 기호("", [], {})를 사용하여 값을 생성하는 표기법

// 1️⃣ 평가될 수 있는 구문
1 + 2 // 3으로 평가되어지는 식 [3은 값이 된다.]
true && false // false로 평가되어지는 식 

// 2️⃣ 상수, 변수, 함수, 연산자의 조합으로 이루어진다.
a + 3 // 변수 + 연산자 + 상수 
4 + 5 // 상수 + 연산자 + 상수 
1 + returnNum() // 상수 + 연산자 + 함수

// 모두 평가되어 값을 생성해낸다.

☁️ 문 = Statement

프로그램을 구성하는 최소 실행 단위
문은 여러 토큰으로 구성된다.
표현식인 문과 표현식이 아닌 문이 있다.
- 변수 선언문은 값으로 평가될 수 없으니 표현식이 아닌 문이다.
- 할당문은 값으로 평가될 수 있으므로 표현식인 문이다.
- 둘을 구별하는 가장 쉬운 방법은 변수에 할당해 보는 것이다.

완료값(completion value)
크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined를 출력한다. - The result of evaluating a Statement is always a Completion value. 공식문서

토큰이란?
문법적으로 더 이상 나눌 수 없는 기본요소
  var sum = 5 + 10;

  // var, sum, =, 5, +, 10는 6개의 토큰 

// 문을 평가한 결과는 항상 완료값이다. 
let a = 10;

if (true) {
  a = 15;
} // 15가 출력된다.
// {} 블록의 완료 값은 내부에 있는 마지막 문의 값을 암시적으로 반환한 값

if {} 블록이 완료값이 있는 것은 알겠는데 결국 변수에 할당되지 않지 않나?

let a;

a = if (true) { a = 15; }; // error
a = eval('if (true) { b = 15; }'); // eval을 사용하면 완료값이 변수에 할당된다. 

a; // 15

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

let a; // 선언문 (표현식이 아닌 문)
a = 10; // 할당문 (표현식인 문)
a = b = 10; // a와 b모두 10이다. (a = (b = 10)) - 할당문 

10 + 20; // 표현식인 문 
a = 10; // 표현식인 문 (개발자 도구에 쳐보면 10이 출력된다.)
b = let a; // 표현식이 아닌 문을 변수에 할당하면 에러발생

수행할 액션의 구문 단위
데이터에 어떤 액션을 취할 것인지 결정
문은 식을 내부요소로 가질 수 있다.
식은 평가를 통해 side effect를 발생시키지 않지만, 문은 실행시 side effect를 발생시킨다.

// 수행할 액션의 구문단위 (선언, 할당, ..)
const a = 1; // 선언문
a = 1 + 2 // 할당문
for (let i = 0;;) // 반복문
if (isMovie) // 조건문
  
// 데이터에 어떤 액션을 취할 것인지 결정
const a = 1; // 선언문 : 선언해라
a = 1 + 2 // 할당문 : 할당해라

// '문'은 식'을 내부요소로 가질 수 있다. 
const a = 1 + 2; // (1 + 2)를 a에 선언해주기 

// '문'은 '식'과 달리 side effect를 발생시킨다. 
if (돈이 많으면) {
  백수
} else {
  개발자
} // 분기 처리

🤔 완료값과 그냥 값은 다를까요? 🤔

공부를 진행하면서 평가될 수 있으면 표현식인 문이고 평가될 수 없으면 표현식이 아닌 문으로 생각했다.

The result of evaluating a Statement is always a Completion value. 공식문서

이 문장을 보면서 나의 모든 지식이 흔들리기 시작했다.
모든 문(statement)은 평가의 결과가 완료값이라니?
그렇다면 모든 statement는 값으로 평가되는 것이 아닌가?

However, statement completion values aren’t just plain JavaScript values. Instead JavaScript engines have a Completion type that acts as a wrapper around the completion value. - 참고

In addition to normal JavaScript values the Completion type is able to store an empty value. For example, variable statements complete with empty. But empty isn’t part of the JavaScript language, so eval("var a") returns undefined instead of empty.

이것을 참고했을 때 완료값은 plain한 자바스크립트 값이 아니고, 또 완료값을 감싸는 완료 타입은 자바스크립트 언어의 부분이 아닌 empty 값을 가질 수 있다는 것을 보니 자바스크립트 언어의 영역이 아닌 엔진의 영역이란 생각이 들었다.

The Completion type is a Record used to explain the runtime propagation of value and control flow such as the behaviour of statements (break, continue, return and throw) that perform nonlocal transfers of control.

— ECMAScript Specification

완료 타입(Completion type)이 제어 흐름 및 값의 전파를 설명하는 데 사용되는 레코드라는 것을 보아선 코드의 흐름, 실행 원리를 위한 부분인 것이지 값식문을 판단하기 위한 값이 아니라는 것으로 결론내렸다.

🔥 당신은 이런 실수를 할 수 있다!

// in jsx ..
postList.map(post => 
             (<li>
    			key={ if (condition) {console.log('뭐하는..?')} } 
    			{/* 값을 원하는 key */}
  			 </li>))

// 정신 좀 차렸네..
postList.map(post => 
             (<li>
    			key={post.id || post.name + Math.random()}
  			 </li>))