모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 05장 표현식과 문

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 05장 표현식과 문

5.1 값

값이란, 식이 평가되어 생성된 결과를 뜻합니다.

그렇다면, 식은 무엇인가요?

'식'은 프로그램이 특정한 값을 얻기 위해 계산해야 하는 코드의 조각입니다. 이 계산은 간단한 덧셈이 될 수도 있고, 복잡한 함수 호출이나 객체의 속성을 참조하는 것이 될 수도 있습니다. 결국 어떤 형태의 계산이든, 그 결과로 '하나의 값'을 산출합니다. 아래의 표현식 파트에서 좀 더 자세히 알아보도록 하겠습니다.

• 2 + 3은 5라는 값을 산출하는 식입니다.
• "Hello" + " World"는 "Hello World"라는 값을 산출하는 식입니다.
• array.length는 array라는 배열의 길이를 산출하는 식입니다.
• myFunction()은 myFunction이라는 함수를 호출하고 그 반환값을 산출하는 식입니다.

평가란 무엇인가요?

평가는 표현식이나 식을 해석하는 과정입니다. 표현식의 평가 결과는 값의 생성 또는 값의 참조로 이루어집니다.

• 값이 생성되는 경우: 상수 또는 변수에 값을 할당하는 경우 값의 생성이 이루어집니다. 예를 들어, 5 + 3이라는 표현식은 두 수의 덧셈을 통해 8 이라는 새로운 값을 생성합니다. 또는 let a = 10;이라는 표현식은 10이라는 값을 생성하고 이를 변수 a에 할당합니다.

• 값이 참조되는 경우

  • 원시 데이터 타입: 이미 선언된 변수의 값을 참조하려면 해당 변수를 사용합니다. 원시 데이터 타입은 값을 복사하여 전달하는 방식을 사용하기 때문에, 다른 변수에 할당할 때 원본 변수의 값이 복사됩니다. 예를 들어, let a = 10; let b = a;라는 표현식을 사용하면, a의 값 '10'이 b에 복사됩니다.

  • 참조형 데이터 타입: 이미 선언된 변수나 객체의 프로퍼티에 접근하면서 해당 값에 대한 참조가 이루어집니다. 참조형 데이터는 참조를 통해 값을 전달하기 때문에, 다른 변수에 할당할 때 원본 변수가 가리키는 메모리 주소가 복사됩니다. 예를 들어, let obj1 = {name: 'John'}; let obj2 = obj1;이라는 표현식을 사용하면, 'obj1'이 가리키는 메모리 주소가 'obj2'에 복사되어 둘은 같은 객체를 가리키게 됩니다.

5.2 리터럴

리터럴은 소스 코드에 바로 작성된 값 자체를 의미합니다. 원시 타입의 값들은 스택 메모리에 저장되고, 참조 타입의 값들(단, 참조 데이터의 주소 값은 스택 메모리에 저장)은 힙 메모리에 저장됩니다. 예를들어, 아래 코드는 모두 리터럴입니다.

3
"hello"
true
null

스택 메모리랑 힙 메모리가 뭔가요?

스택 메모리는 변수와 함수 호출 스택을 저장하는 메모리입니다. 후입선출(LIFO)에 따라 작동하며, 함수 호출이 발생할 때마다 해당 함수의 실행 컨텍스트가 스택에 쌓입니다. 각 실행 컨텍스트는 해당 함수의 변수, 매개변수, 반환 주소 등을 저장합니다. 함수의 실행이 완료되면 해당 실행 컨텍스트는 스택에서 팝되어 제거되고 메모리가 자동으로 해제됩니다. 스택 메모리는 크기가 정해져 있으므로, 큰 데이터 구조를 저장하기에는 덜 적합합니다.

힙 메모리는 참조 타입의 데이터를 저장하는 메모리입니다. 힙 메모리는 크기가 크고, 가변적인 데이터 구조(예: 객체, 배열)를 저장하는 데 이상적입니다.

왜 원시 타입은 스택 메모리에 저장되고, 참조 타입은 힙 메모리에 저장되나요?

원시 타입은 크기가 작고, 불변성을 가지기 때문에 스택 메모리에 직접 저장할 수 있습니다. 반면에 참조 타입은 크기가 가변적이고, 클 수도 있기 때문에 힙 메모리에 저장됩니다.

원시 타입의 불변성이라는게 무슨 뜻인가요?

원시 타입이 불변성을 가진다는 말은, 한번 생성된 원시 타입의 값은 읽기 전용으로 변경할 수 없다는 것을 의미합니다. 예를들어, let a = 1; a = 2;라는 코드가 있을 때, 1이라는 원시 값이 2로 바뀐 것이 아니라 a라는 변수가 2라는 새로운 원시 값에 연결되었다는 것을 뜻합니다. 이처럼 각 원시 값 자체는 변경되지 않는다는 것이 원시 타입의 불변성입니다. 이 특성 덕분에 원시 타입 값은 안전하게 복사하거나 전달할 수 있습니다.

5.3 식(표현식)

'표현식'이란, 수학의 수식처럼 어떤 값을 만들어 내는 코드를 말합니다. 예를 들어, 2 + 3이나 'Hello, ' + 'World!'같은 코드가 표현식입니다. 이들은 계산하면 각각 5와 'Hello, World!'라는 값을 얻을 수 있기 때문입니다.

5.4 문

'문'은 컴퓨터가 실행할 수 있는 명령 또는 지시를 의미합니다. 예를 들어, let a = 5;이라는 코드는 a라는 변수를 만들고, 그 변수에 5라는 값을 넣어라'라는 지시를 나타내는 문입니다.

5.5 세미콜론과 세미콜론 자동 삽입 기능

자바스크립트에서 세미콜론(;)은 대개 문장의 끝을 나타냅니다. 이는 프로그램에게 '이것이 문의 끝이다'라고 알려주는 역할을 합니다. 세미콜론을 통해 여러 문장을 한 줄에 쓸 수도 있습니다. 또, 자바스크립트는 세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)이라는 기능을 가지고 있습니다. 이 기능은 개발자가 세미콜론을 잊어버렸거나 생략했을 때, 자바스크립트 엔진이 문맥을 보고 세미콜론이 필요한 위치에 세미콜론을 자동으로 삽입해주는 기능입니다.

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

가장 큰 차이점은 '표현식'은 값이라는 결과를 만들어 내지만, '문'은 특정 동작을 지시한다는 점입니다. 그래서 '표현식'은 어떤 값으로 평가될 수 있지만, '문'은 값을 가지지 않습니다.

하지만 표현식은 문의 일부가 될 수 있습니다. 예를 들어, let a = 5 + 3;라는 코드는 문입니다. 그런데 여기에서 5 + 3은 표현식입니다. 이 표현식은 8이라는 값을 만들어 내지만, 이 전체 코드는 'a라는 변수에 8을 할당한다'는 문입니다.