기술 면접 준비 - CS 공부

호이스팅 (Hoisting)

hoisting 의 사전적 의미 : 끌어 올리기, 들어올려 나르기.

변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상

단순하게 설명하자면 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 '끌어올려~~'진 듯한 현상이다. 포인트는 물리적으로 '끌어올려'지는 것이 아니라 자바스크립트 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다.

 

var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ(Temporary Dead Zone)이라고 한다. 즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 ReferenceError가 발생한다.  함수 호이스팅은 선언문에서 발생한다. 선언된 함수는 상단에서 참조, 호출이 가능하다. 함수 표현식은 결국 변수에 할당하는 모습이라 변수 호이스팅의 사례로 볼 수 있다. 

(변수 선언 3단계: 선언 -> 초기화 -> 할당)

 

 

 

클로저는 무엇인지? 원리와 왜 사용하는지? 

 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 즉, 함수 안에 함수를 선언한 환경에서의 관계를 의미한다. 해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미한다. 이러한 이유가 발생하는 이유는 자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능하다. 클로저는 반환된 내부함수가 자신이 선언 되었을 때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능하다.

 

const closureComponent = () => {
	// 외부 함수 영역
	const outerFunc = () => {
		let x = 1000;

		// 내부 함수 영역
		let innerFunc = () => {
			console.log(x); // 내부 함수에서 외부 함수로 지역 변수의 접근
		};
		return innerFunc;
	};

	// 외부 함수를 실행
	const callInnerFunc = outerFunc();

	// 외부 함수의 실행이 끝나더라도 변수에 접근이 가능
	callInnerFunc(); // 1000
};
export default closureComponent;

 

https://www.youtube.com/watch?v=tpl2oXQkGZs

 

 

 

this의 용법

 

this는 함수를 호출할때 생성되는 실행 컨텍스트 객체다. 현재 실행 중인 함수 내에서 this 키워드가 사용된 위치에 따라 참조하는 객체가 동적으로 결정된다. 즉, 함수가 호출될때 결정되기 때문에, 함수를 호출하는 방법에 따라 this가 참조하는 객체가 달라지게 되는 것이다.  

 - 함수가 객체의 메서드로 호출될 때, this는 해당 객체를 참조한다.
 - 함수가 일반적인 함수로 호출될 때, this는 전역 객체(window 또는 global)를 참조한다.
 - 함수가 생성자로 호출될 때, this는 새로 생성된 객체를 참조한다.
 - call(), apply(), bind() 메서드를 사용하여 명시적으로 this의 값을 지정할 수 있다.
 
객체의 메소드에서 this를 사용하여 해당 객체의 속성에 접근하거나 수정할 수 있다.
this를 사용하는 가장 큰 차이점은 호출 방법에 따라 this가 참조하는 값이 달라진다는 것이다. 이러한 동적인 특성 때문에 this의 값이 예상과 다르게 결정될 수 있다. 따라서 this를 사용할 때는 주의가 필요하다.
특히, 콜백 함수나 중첩 함수에서 this를 사용할 때는 주의가 필요하다. 이러한 경우에는 this를 변수에 저장하여 사용하거나 bind() 메소드를 사용하여 this를 지정할 수 있다.

 

 

 

 

 

---