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

• 느슨한 타입(loosely typed)의 동적(dynamic) 언어
  js의 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입으로 할당이 가능하다.
  js의 type은 두 종류로 나뉘는데 하나는 원시적 타입, 또 하나는 객체로 나뉜다.
  원시적 타입 = 숫자, 문자 , boolean, undefined등
  객체 : {key(property) : value} 형태로 이루어진것 (리터럴 방식) 종류가 매우 많다
• JavaScript 형변환
  원시적 타입에서 숫자, 문자 등 종류가 많은데 타입 즉 형태를 변환하는 메소드들이 많다.
  ex) let 변수 = parselnt(문자) // 문자를 정수형 숫자로 바꿈.
  let 변수 = Number(문자) // 문자를 숫자형으로 바꿈.
  let 변수 = String(숫자)// 숫자를 문자형으로 바꿈.
  등 매우 종류가 다양하다
• ==, ===

let a = 1
let b = "1"
console.log(a==b) // true
console.log(a===b) //false

즉 생긴 모양만을 판별 하려면 ==
타입까지 같은지 확인 하려면 === 를 사용해야한다.

• 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
  동적타입인 언어는 런타임 후 브라우저 환경에서밖에 확인을 못해 코드가 복잡하고 길어지면 에러를 찾기 힘들다. 하지만 이러한 문제를 보완하는 방법은 TypeScript를 배우는 것이다!!!! 여담으로 Ts는 코드에 에러가 생기면 즉시 알려주어 보다 정확하고 편안하게 코드를 칠 수 있으며 compiler라는 프로그램으로 js파일을 생성해준다 대박..
• undefined와 null의 미세한 차이들을 비교해보세요.
  undefined는 값을 할당받지 못한을 의미하고
  null은 의도적으로 값을 할당하지 않은 것을 의미한다
  두개 다 원시적 타입에 속한다.

JavaScript 객체와 불변성이란 ?

• 기본형 데이터와 참조형 데이터
  하나의 객체 데이터는 특정한 메모리 주소에 값이 들어가져 있다. 그래서 변수는 사실상 메모리에 있는 특정한 객체 데이터의 메모리 주소만 참고해서 가지고 있는 것이다. 이러한 데이터를 참조형이라한다.
  참조형 : {},[],function
  원시형 : string, number, boolean, null, undefined
  원시데이터들은 새롭게 만들어지는 것이 아니고 항상 불변한다는 불변성이라고 하는 것이다(한번 메모리에 만들어졌다는 전제하에)
  참조형데이터는 새로운 값을 만들때 마다 그것이 새로운 메모리주소에 할당되는 구조를 가짐. 참조형 데이터는 결국 불변성이 없다 즉 가변성이다.
• 불변 객체를 만드는 방법
  const로 변수를 선언한다. 하지만 객체 재할당은 불가능하지만 객체의 속성은 변경이 가능
  js가 제공해주는 메소드 중에서 Object.freeze()를 사용한다. 속성을 변경하는 것은 불가능 하지만 재할당은 가능하다
  그러므로 불변 객체를 만드는 방법은 두가지를 합치는 것인데

const test = {
  name : 'Sim',
  age : 24
}
Object.freeze(test)
console.log(test) // { name: 'Sim', age: 24 }
test = {
    age : 24
  }
  
console.log(test) // { name: 'Sim', age: 24 }
//할당 연사자를 사용해도 값은 그대로 첫번째 console에 찍은 값이 된다.

• 얕은 복사와 깊은 복사
  참조형 데이터를 할당 연산자로 다른 변수에 할당할때 즉 메모리 주소만 옮겨가게 하는 의도라면 상관이 없지만 a라는 변수와 b라는 변수를 별개로 구분해서 관리하고싶으면 복사라는 개념을 사용해야한다 이 복사에는 얕은 복사와 깊은 복사가 있는데.
  쉽게 말하자면 얕은 복사는 겉에 표면만 복사하는 것이다.
  깊은 복사는 사실상 js로 구현하기 복잡하고 어렵기 때문에 필자는 lodash를 사용한다.
  필자는 참조형데이터인 객체 및 배열을 복사할때는 내부의 또 다른 참조형 데이터가 없다는 전제하에는 얕은 복사를 하지만 특정한 참조데이터 내부에 또 다른 참조형 데이터가 있다면 깊은 복사를 한다.

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

• 스코프, 호이스팅, TDZ
  스코프란 변수의 범위라고 생각하면 된다. 범위도 전역스코프, 로컬스코프로 나뉘는데 단어의 뜻 그대로 전역은 모든 지역을 의미하고 로컬스코프는 해당범위만 접근할 수 있어 범위를 벗어나면 값을 불러오지 못하거나 에러가 발생하는 일이 자주 생긴다.
  호이스팅이란 함수선언부가 유효범위 최상단으로 끌어올려지는 현상을 의미한다.
  TDZ란 Temporal Dead Zone로 일시적인 사각지대라는 의미이다. 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 한다.
• 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
  함수 선언문 호이스팅 가능

const a = 7
double()

function double(){
console.log(a*2) // 14 
}

함수 표현식 호이스팅 불가능

const a=7
double()

const double = function(){
  console.log(a*2) // TypeError

• 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
  1단계 : 선언단계
  2단계 : 초기화단계
  3단계 : 할당단계
• 실행 컨텍스트와 콜 스택
  실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
  

콜스택은 여러 함수들을 호출하는 스크립트에서 해당 위치를 추적하는 interpreter를 위한 메커니즘이다.현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어한다.

• 스코프 체인, 변수 은닉화
  스코프 체인(Scope Chain)은 리스트라고 생각하면 된다.
  전역 객체와 함수의 스코프의 레퍼런스를 저장하고 있다.
  스코프 체인은 실행 컨텍스트가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 리스트를 가르킨다.
  변수 은닉화란 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 한다.

실습과제

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.
주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

에러 수정 :

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b); // 1, 101
console.log(a); // 1

console.log(b); // 101

}



hi(); //1,101
	  //1
      // 101

console.log(b); // 1

첫번째에 선언된 b가 console.log(b)에 찍혀 값은 1이다
이유는 스코프(로컬, 지역의 차이) 때문이다
현재 hi라는 함수 스코프 안에 들어있는 b의 범위는 hi함수 안에 뿐이다. 함수 안에 코드를 살펴보면 끝에 b++이 존재하기 때문에 b는 100이 아닌 101이 되는 것이고 hi() 이후에 오는 console.log(b)는 let b = 1로 전역변수를 생성했기 때문에 답은 1이다. 그래서 console.log(a)가 hi()함수 스코프 밖에 있으면 a is not defined로 에러가 나는 이유가 a를 변수로 할당을 안해줬기 때문에 not defined라는 에러가 발생.