[TIL] - 1

JavaScript 기본 정리

스코프에 대해서 설명하세요.

• 변수를 참조할 수 있는 유효범위를 말함. 지역변수와 전역변수로 나눌 수있는데 전역변수는 최상단의 스코프로써 이곳에 선언된 변수를 전역변수라하고, 로컬 스코프에 선언된 변수는 지역변수로써 해당 스코프와 스코프의 하위에서만 탐색이 가능함.

클로져에 대해서 설명하세요.

• 반환된 내부함수가 자신이 선언됐을때의 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 자신이 생성될때의 환경을 기억하는 함수
  사용 하는 이유 :
  1) 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
  2) 전역 변수의 사용을 억제 하기위해
  3) 정보를 은닉하기 위해

• 클로져를 사용하면 은닉화가 가능함. 내부 변수와 메서드를 안전하게 관리할 때 사용 함. 하지만 매번 사용할 때마다 다른 메모리공간을 차지하기 때문제 성능적 측면을 고려했을 때 꼭 필요한 경우에만 사용하면 좋을 것 같음.

• 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요.

호이스팅 (Hoisting)

• 호이스팅이란 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 뜻함. (실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻하며 실제 메모리에서는 변화가 없음) => 미리 선언문을 실행해둔다고 이해하면 됨.

  1. var, 함수선언문 : 호이스팅이 발생함
  • 변수 a 가 선언되기 전에 참조되었음에도 에러가 발생하지 않음. 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined 로 초기화를 해두었기 때문임. 함수선언문 또한 동일하게 선언되기 전 호출됨에도 에러가 발생하지 않음.
  • 변수 호이스팅 시 : undefined
  2. let, const, 함수표현식 : 호이스팅이 발생하지만, 다른 방식으로 작동됨
     let이나 const로 선언된 변수 a가 선언되기 전에 변수를 초기화하면 참조 에러가 발생함. 이는 호이스팅이 발생하지 않는 것이 아닌, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상임.
  • 함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것임.
  • 변수 호이스팅 시 : ReferenceError: a is not defined

자바스크립트에서 배열의 타입

• 자바스크립트의 배열의 타입은 객체임.
• 자바스크립트에서는 원시 자료형을 제외하고는 전부 객체(object)로 이루어져 있음.
• Array.isArray()메서드를 통해 배열을 확인할 수 있음.
  +++ 원시자료형 - 하나의 데이터를 고정된 크기로 담고 있음(string, number, bigint, boolean, undefined, symbol)
  --- 참조자료형 - 동적으로 크기가 변하는 데이터를 보관하기 위해 다른 곳에 데이터를 저장하고 변수에는 해당 데이터가 있는 곳의 주소값만 할당(원시자료형 이외 모든 것이 참조자료형임)

undefined와 null 그리고 undeclared의 차이

• undefined는 변수를 선언했지만 값이 할당되지 않은 변수이고, null은 비어있는 변수 혹은 명시적으로 할당한 것을 뜻함. 그리고 undeclared는 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태를 의미함

깊은 복사와 얕은 복사의 차이에 대해서 설명하세요. 자바스크립트에서 깊은 복사를 하는 방법은 무엇인가요?

• 얕은복사는 주소값만 복사하여 같은 메모리를 가리키는 것을 말함. 복사하더라도 데이터가 새로 생성되는 것이 아닌 한 데이터를 참조하게 됨.
• 깊은복사는 데이터를 통째로 복사하는 것을 의미. 복사된 객체는 원본과 완전히 독립된 메모리를 차지함.
• 자바스크립트에서 깊은 복사 방법은 JSON.stringify()로 객체를 json문자열로 변환하는 것. 이 과정에서 원본 객체와의 참조가 모두 끊어짐.객체를 json 문자열로 변환 후,JSON.parse()를 이용해 다시 객체(자바스크립트 객체)로 만들어줌.이 방법이 가장 간단하고 쉽지만 조금 느리다는 것 단점이 있음.
  다른 방법으로는 Lodash 라이브러리를 설치해서 사용하는 것임.
  stringify보다 쉽고 빠르게 복사할 수 있음.

2022.08.22 Daily 회고
오늘 한 일

• HTML / DOM / Javascript 기본 학습
• 모의면접

느낀 점

• 공부한 내용을 말로 설명하려니 버벅이고 어려운 부분이 있었음. 확실히 이해하고 난 후에 나만의 언어로 설명하는 연습이 필요할 것 같음.
• 부족한 부분을 알고, 일정 외의 시간에 차근차근 정리할 예정