[에이블런] TIL(24.05.20): 자바스크립트 1

오늘 배운 내용

프로그래밍 언어

• `컴파일러 언어`: ISA(어셈블리) ⇒ CPU가 이해할 수 있는 코드, 컴파일 후 한번에 바로 실행 (TypeScript: 트랜스파일러 )
• `인터프리터 언어`: 실행을 먼저 함 (node, phython - a.js, a.py…)  ⇒ 실행을 하면 컴파일 과정(평가, 실행)이 반복해서 이루어진다. (컴파일러 언어와 달리, 한 단계를 더 거친다 → valuable context / valuable table를 거쳐야 함)

 

⭐ 자바스크립트 언어의 interprete 과정

Memory 구조

• kernel (os)
• code (mc)
• data (전역/정적) — null, undefined
• stack (primitive) — 변수 테이블 존재
• Heap (Reference)

var i = 0;
// 평가: var i;
// 실행: i = 0;
var arr = [1, 2];
// 평가: var arr;
// 실행: arr = [1, 2];

평가부

• 평가가 진행되면 평가된 변수는 기계어로 바뀐다(machine code)
  • 변수 &10, 변수 &20: cpu는 i와 arr 대신 해당 주소만을 인식할 수 있다.(즉, 식별자는 메모리 주소로 바뀐다)
• 평가 진행된 변수는 변수 영역(valuable context)에 들어간다.
• 평가가 진행된 뒤 값이 들어오지 않으면(값을 초기화시키지 않으면), 해당 변수의 값은 undefined로 초기화된다.

평가부 강의 이미지

 

실행부

• mov arr &10 [1, 2] (식별자 arr 대신 주소값이 들어가 있다)
• mov x &20 1
• 별도의 스택 영역/힙 영역에 실제 값을 저장한다.

• 값이 있으면 primitive, reference type. 참조값의 경우 메모리 크기가 유동적이므로 Heap의 주소를 참조한다.
  • arr이 스택의 300번지를 참조하지 말고 바로 heap의 700번지를 참조하면 안 되는가?
    • ❌: 나중에 뒤에서 arr = 2; 라고 코드가 바뀌어버리면, arr도 300번지를 참조할 필요가 생김(이렇게 되면 heap 부분은 다 gc가 됨(가비지 코드))
• variabl table (변수 영역) - 변수들이 모여있는 곳 (변수 테이블의 값에는 실제 값이 존재하는 메모리 영역의 주소가 들어간다) → 실제 값은(primitive type) 스택에 존재
  • 자바스크립트의 number type: 8byte

 

---

 

노드 설치

node

자바스크립트를 실행시켜주는 도구

 

노드 설치 확인

node -v
npm -v

 

• LTS: Long Term Support, 오랜 기간 지원 보증 (⇒ 이 버전의 노드를 사용할 것)
• library: 노드 함수로 만들어진 코드의 집합
• 패키지: 라이브러리의 집합

 

nvm (node version manager, 노드 버전관리자)

A 프로젝트, B 프로젝트에서 각각 다른 버전의 노드를 편리하게 사용할 수 있다.

 

nvm 설치 확인

nvm ls

 

 

npx (node package executer, 노드 패키지 실행기)

노드 패키지를 실행하는 역할을 한다. 설치 확인 방법은 아래와 같다.

npx -v

 

---

변수와 타입

변수와 상수 (variable vs constant)

• 변수 = 선언 + 식별자 + 타입 + 값 + 스코프
  • 스코프
    • 전역 스코프: 전 지역에서 사용 가능한 변수
    • 함수 스코프: 특정 함수 내에서만 사용될 수 있는 변수
    • 블록 스코프: 특정 블록 내에서만 통용되는 변수
  • 선언
    • var: 함수 스코프 (function도 함수 스코프)
    • const: 블록 스코프
    • let: 블록 스코프
  • 타입: 값이 저장될 때 정해진다.

 

변수 vs 상수 vs 변수상수

• 변수
  • 변수를 나타내는 것
  • var `i` = 0;
• 상수
  • 값을 나타내는 것
  • var i = `0`;
• 상수변수
  • const c = 1;
  • 불변(immutable)

 

primitive vs Object

js의 모든 valuale === immutable

• 스택에 저장된 수를 참조할 때, 변수의 숫자가 바뀌면 해당 주소의 값이 바뀌는 것이 아니라 스택의 새로운 주소에 새로운 값이 생기고 해당 주소를 valuable context(변수테이블)가 참조한다.
• 아무도 참조하지 않는다면 gc가 되어 추후 가비지 컬렉터가 처리한다.

원시 타입

• 메모리의 스택 영역에서 값을 가지는 타입

`==` vs `===`

• ===: 타입까지 따진다. 두 변수의 크기가 다르면, 타입이 다르다고 보고 false

• • 문자열의 concat / number의 덧셈
  • ‘123’ + 10 ⇒ ‘12310’

• NaN: null pointer처럼 별도로 존재하는 값
• new String(’abc’) ⇒ 객체로 만듬.
  • 레퍼런스 타입(바로 heap을 가리킴, 기본 문자열 경우에는 stack의 값에서 주소를 가리키고 heap을 가리키므로 원시타입임)
• symbol table(data 영역)
• `null` & `undefined`
  • typeof null : ‘object’ ⇒ 참조는 object 타입

nu = null;
un = undefined;

nu === un; //false -> 값 + type(메모리) 비교
nu == un; //True -> 오로지 값만 비교한다 (논리연산 진행 => 둘다 falsy 값이므로 같다고 판단하고 true)

형변환

• 수동 형변환: type casting (n.toString(), +’12’)
• 자동(암묵적) 형변환: implicity coercion (i = 100) ⇒ 해당 라인(문)에서만 형변환되고 추후 복원된다. 즉 실제 값이 바뀌지는 않는다.

 

• constant pool: 문자열, symbol 타입
• data 영역: null 타입, NaN, undefined 타입
• DebugPrint(x)
  • oldSpace = Heap

---

호이스팅의 원리

호이스팅

• 평가, 실행 두 단계 중 `평가` 시 호이스팅된다
• 호이스팅이란 평가하기 위해 선언부를 끌어올리는 것
• 호이스팅은 컴파일 이전에 이루어진다

//var i; // var i = undefined => 호이스팅
console.log(i);
var i;

//undefined

• 평가: 호이스팅(선언부) ⇒ 컴파일(평가부)
• 실행

 

TDZ (Temporary Dead Zone)

//let i; // let i = NotInitializedYet => 호이스팅 불가. 에러 발생
console.log(i);
let i;

// error

• `let i` : undefined가 아닌, `NotInitializedYet`으로 초기화됨 → 따라서 초기화하지 않고 호스팅할 시 에러가 남

 

• globalThis
  • 전역객체.
  • globalThis 속성은 환경에 무관하게 전역 this 값, 즉 전역 객체에 접근하는 표준 방법을 제공한다.
  • 따라서 코드를 구동하는 환경을 모르더라도 전역 객체에 일관적으로 접근할 수 있다.
  • 출처: https://jesstory-codinglish.tistory.com/18

 

---

연산자와 제어문

NaN === NaN // false

• 각각 배정받는다. 각각 다른 메모리를 가리킴

 

NaN == NaN //false

• NaN은 equal 연산을 할 수 없게 되어 있음
• 어떤 값과도 비교할 수 없음

 

isNaN(NaN) === isNaN(NaN) //true

• boolean 기준으로 보았을 때 True

null == undefined //true
null === undefined // false

 

z = x `??` y

• null 병합 연산자
• x값이 null이나 undefined일 때는 z변수에 y를 할당, 아니라면 x를 할당

 

오늘 잘한 점

-

 

 

앞으로 개선해야 할 점

자바스크립트 기초에 대해 아직도 모르고 있는 부분이 많다.

개념은 대충 아는데 완벽하게 설명할 정도는 되지 않는 내용이 많아서, 해당 부분 지식을 채울 수 있도록 더 열심히 공부해야겠다.