23년 2월 21일

• 제가 오늘 TIL에서 적는 것은 간략하게 글로만 쓴 내용이다.

배운 것

어제까지는 지옥이였던 코딩테스트 문제는 잠깐 멈추고 심화적인 이론을 배우기 시작하였다. 그 첫번째로 오늘은 자바스크립트의 데이터 타입과 실행 컨텍스트에 대해서 개념과 이론을 배웠다.
제가 오늘 TIL에서 적는 것은 아주 간략하게 글만 쓴 내용임을 알립니다.
오늘 배운 강의 자료는 아래의 링크를 참고하면 된다.
자바스크립트 데이터 타입, 실행 컨텍스트 강의 자료

추가 참고 자료
데이터 타입에 관련 추가 자료
실행 컨텍스트의 관련 추가 자료

1. 데이터 타입

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다.

JavaScript 언어의 타입은 원시 값과 객체로 나뉜다.
먼저 원시값은 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의하며, C 언어와는 달리 문자열은 불변합니다. 당연히 원시값의 종류도 상당히 많은데 다음과 같이 나열이 가능하다.

• Boolean 타입은 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있습니다.
• Null 타입은 null 하나의 값만 가질 수 있습니다.
• undefined 타입은 값을 할당하지 않은 변수는 undefined 값을 가집니다.
• Number 타입은 (-(2^53 − 1)부터 2^53 − 1까지의 수)입니다.
• BigInt 타입은 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값입니다.
• String 타입은 텍스트 데이터를 나타낼 때 사용합니다.
• Symbol 타입은 고유하고 변경 불가능한 원시 값이며 객체의 속성 키로 사용할 수 있습니다.

다음으로 객체는 식별자로 참조할 수 있는 메모리 상의 값을 말합니다. 객체는 속성의 컬렉션으로 볼 수 있고 종류로는 데이터 속성과 접근자 속성 두 종류가 있다. 이 외에도 특수적으로 사용할 수 있는 ES6 함수 메소드도 있어서 이런 것덜을 나타내는 종류는 엄청 많이 존재한다.

2. 호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다.

3. 스코프

스코프(Scope)는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.

프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다.

만약 스코프가 없다면 같은 식별자 이름은 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다. 디렉터리가 없는 컴퓨터로 예시를 든다면, 디렉터리가 없다면 같은 이름을 갖는 파일을 하나밖에 만들 수 없다. 스코프도 이와 같이 식별자 이름의 충돌을 방지한다.

자바스크립트에서 스코프라면 코드 어디에서든지 참조할 수 있는 전역 스코프 (Global scope)와
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있는 지역 스코프 (Local scope or Function-level scope) 구분 할 수 있다.

4. 실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말하고, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

• 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다)
• 외부 환경 정보를 구성한다
• this 값을 설정한다.

이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다.

실행 컨텍스트는 다음과 같은 것들을 이용하면 call stack에 쌓이게 된다.

• 전역공간은 자동으로 컨텍스트로 구성된다.
• 함수를 실행한다.
• eval()함수를 실행한다.
• block을 만든다 (ES6+)

그리고 이러한 실행컨텍스트를 구성할 때 생기는 것들이 있다.

• VariableEnvironment
  현재 컨텍스트 내의 식별자(변수)들에 대한 정보
  외부 환경 정보
  선언 시점의 LexicalEnvironment의 스냅샷(변경사항 반영 X)

• LexicalEnvironment
  처음에는 VariableEnvironment와 같음
  변경 사항이 실시간으로 반영됨

• ThisBinding
  식별자가 바라봐야 할 대상 객체

알게 된 점

오늘 TIL에서 적은 내용은 아주 극히 일부의 내용만 적었고, 핵심적인 내용들만 넣은 것이다. 지난주 월,화때 배웠던 자바스크립트의 기본 문법은 엄청 중요하였고, 그랬기 때문에 자세히 기술 한 것들이 많았지만, 오늘부터는 심화적인 개념 요소를 이해 하는 거라서 아주 간략하게 적은 편이다. 사실 아직까진 완벽하게 개념을 설명하라고 하면 쉽게 스스로 말하지 못하고 있다. 근데 다만 이게 앞으로 면접에서 주로 나오는 키워드 들이라고 하니까 틈틈히 개념을 이해 하는 게 중요하였다. 호이스팅이나 스코프는 어느정도 이해 된 편이긴 하지만, 사실 이것도 글로만 설명하기는 어렵고 예시 코드를 보면서 이해하는 것이 더 빨랐다. 데이터 타입은 첫날에 배우기도 해서 다시 복습 하는 느낌을 받았다. 그리고 제일 이해 어려웠던건 실행 컨텍스트에 관한 내용인데 콜스택에 관한 내용은 이해는 하였다. 하지만 실행컨텍스트 구성할때 생기는 것들은 아직 개념의 이해를 잘 못잡은 편인데, 예시코드들을 돌려보면서 최대한 이해 해야 한다는 느낌을 받았다. 목요일까지는 지루한 내용이 계속 될텐데 최대한 이해 하려고 노력을 해봐야 하는 점이다.

앞으로 계획

오늘 배운 개념에서 이해 못한 내용은 다시 한번 복습하고, 내일은 this와 콜백함수의 개념을 짚게 된다. this도 저번주 화요일에 이론 문법 배울때 아주 잠깐 봤지만 상당히 어려웠던 개념이였던걸로 기억한다. 아마 역시 내일도 쉽지 않을 것으로 예상되지만 내일도 화이팅 하기를 기원한다.