[javascript] 항해99과제/ 용어및 개념정리

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

자바 스크립트의 언어는 어떤 특정 타입과 연결 되지 않으며 모든 타입의 값으로할당 가능하능하다

• 전에 배웠던 자바 언어에서는 변수를 선언하기 위해 변수명 앞에 변수의 타입을 지정하고 변수의 값을 할당 했었는데 자바스크립트에선 선언자
  let var const 만 구분하여 값을 할당하면 알맞은 타입으로 변수가 선언된다.

형변환의 차이점

자바스크립트에서는 크게 두가지의 형변환 방법이 있다
연산의 결과에 의해 암시적으로 형이 변하는 암시적 형변화, 개발자가 직접 형을 변환시켜 주는 명시적 형변환이다

• 암시적 형변환
  예로 '+' 연산을 할 경우 숫자와 문자열, 불리언과 문자열을 더할경우 반환되는 값은 모두 문자열이다.
• 명시적 형변환
  예로 Number 타입의 객체의 메서드 toString()을 통해 숫자형을 문자열로 명시적형변환이 가능하다

undefined와 null의 미세한 차이를 비교

undefined는 할당된 값이 없음을 의미하며,
null은 명시적으로 '비어있음'을 나타내는 하나의 값이라고 생각한다

JavaScript 객체와 불변성이란 ?

자바스크립트의 불변성

Boolean
null
undefined
Number
String
Symbol (New in ECMAScript 6)

위의 타입들은 원시타입으로서 변경 불가능한 값을 가진다
원시 타입이외의 모든 값은 객체(Object) 타입이며 변경 가능한 값을 가진다.

• 변수는 할당한 데이터값을 직접 가지는게 아니라 메모리에 저장된 해당 값의 주소를 가지는데 원시타입의 변수들은 값을 재할당 할 경우 해당 메모리의 값이 바뀌는게 아닌 메모리에 새로운 데이터값을 저장하여 그 값을 가르키는 주소가 바뀌는 것으로 이해하였음

• 불변객체를 만드는 방법으로는

Object.freeze()

오브젝트의 메소드인 프리즈 메소드를 사용하며,
isFrozen() 메소드를 활용하여 여부를 불리언값으로 확인할 수 있다.

console.log(Object.isFrozen())
>true or false

하지만 이경우 객체내부의 프로퍼티로 객체를 가지고 있다면 해당 내부객체는 변경이 가능하다 주의!
내부객체 까지 불변객체로 만들기 원한다면 아래 코드를 참고!

function deepFreeze(obj) {
  const props = Object.getOwnPropertyNames(obj);
  props.forEach((name) => {
    const prop = obj[name];
    if(typeof prop === 'object' && prop !== null) {
      deepFreeze(prop);
    }
  });
  return Object.freeze(obj);
}
const user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

deepFreeze(user);

user.name = 'Kim';           // 무시된다
user.address.city = 'Busan'; // 무시된다

console.log(user); // { name: 'Lee', address: { city: 'Seoul' } }

호이스팅과 TDZ는 무엇일까?

기본개념 -

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

변수의 선언은 총 3가지 단계로 이루어진다

• Step 1. Declaration phase : 선언 단계
  변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다.
  이 변수 객체는 스코프가 참고하는 대상이 된다.

• Step 2. Initialization phase : 초기화 단계
  실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성된 변수를 위한 메모리를 만드는 단계이다.
  이 단계에서 할당된 메모리에 undefined 를 할당한다.

• Step 3. Assignment phase : 할당 단계
  초기화 단계에서 undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.

var 키워드 변수는 선언 단계와 초기화 단계가 동시에 진행된다. 즉, 자바스크립트 내부적으로 실행 콘텍스트의 변수 객채에 변수를 등록하는 동시에 메모리를 undefined로 만들어버린다.
그렇기 때문에 변수에 값이 할당되기 전에 호출해도 Reference 에러가 발생하지 않고, undefined가 리턴된다.

2. let 키워드 변수
   let 키워드는 var 키워드와 다르게 선언 단계와 초기화 단계가 분리되어 진행된다. 실행 컨텍스트의 변수 객체에 변수를 등록했지만, 메모리에 할당되지 않아 접근할 수 없다. 그래서 Reference Error: Cannot access before initialization 에러 문구가 나오는 것이다.
   즉, 호이스팅 되지 않는 것이 아니라, 호이스팅은 되었으나 메모리가 할당되지 않아 접근할 수 없는 것이다. 이때 등장하는 개념이 TDZ 이다.

TDZ 란?
한글로 직역하자면 일시적인 사각지대이다.
스코프 시작 지점 에서 초기화 시작 지점 까지를 TDZ(Temporal Dead Zone) 라고 한다.

함수 표현식의 경우, 선언/초기화/할당 단계가 모두 동시에 진행된다. 그래서 할당 전 호출해도 undefined가 아니라, 함수 내용이 리턴된다.

내가 생각하는 개념정리

자바스크립트 엔진은 코드를 실행전 실행 가능한 코드를 형상화하고 구분하는 과정을 걸친다(실행 컨텍스트 형성)

이과정에서 모든 선언이 변수 객체 메모리에 저장되는데 코드실행 전 이미 변수,함수에 대한 선언이 메모리에 저장,등록 되어 있기때문에 선언문보다 참조, 호출이 먼저 나와도 동작 가능한것이다.