24.06.18 day02 코드트리 입출력 코드 학습, 호이스팅(Hoisting)이란?

06.18 기록

 

 

출력에 배열의 특정 값을 가져올 때

arr = [5, 6, 10]
print(f"First element is {arr[0]}")
print(f"Second element is {arr[1]}")
print(f"Third element is {arr[2]}")

이런식으로 중괄호를 사용해 배열의 인덱스 값을 넣어주면 된다.

 

 

입력받은 값을 특정 기호에 따라 나눌 때

a = input()
print(a.split("-"))

a = 50-60-70
['50', '60', '70']

split() 안에 나눌 기호를 작성하면 해당 기호를 기준으로 값을 나눌 수 있다.

 

---

 

프론트엔드 기술면접 질문 - 1

호이스팅(hoisting)이란?

자바스크립트에서 변수나 함수의 선언이 코드 실행 전에 미리 처리되어 동작하는 메커니즘이다.

변수와 함수는 호이스팅이 다른 방식으로 작동한다.

 

변수 호이스팅

변수의 선언이 해당 변수가 속한 범위의 최상단으로 끌어올려지는 것처럼 동작하지만 변수에 값을 할당하기 전에는 undefined값을 가지게 되며, 이 메커니즘은 var, let, const키워드에 따라 다르게 동작한다. 

• var의 호이스팅

console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

 

자바스크립트는 위 코드에서 a의 선언을 먼저 해석하고 코드가 실행이 되지만 초기화되지 않은 상태로 해석되기 때문에 초기화 전에 접근하면 undefined가 뜬다.

 

• let과 const의 호이스팅

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

let과 const도 var와 같이 변수 선언이 최상단에서 해석되지만 Temporal Dead Zone(TDZ)라는 개념으로 인해 변수가 선언되기 전에는 접근할 수 없다. 이는 선언이 되었어도 변수에 접근할 수 없기 때문에 ReferenceError가 발생한다.

 

• 함수 내부의 변수 호이스팅

function example() {
  console.log(d); // undefined
  var d = 40;
  console.log(d); // 40
}
example();

함수 내부에서도 var로 선언된 변수는 함수의 최상단으로 호이스팅 된다. let과 const도 함수 내부에서 호이스팅이 동작하지만 TDZ에 의해 해당 변수에 접근이 불가능하다.

 

 

함수 호이스팅

함수 선언문은 변수와 다르게 함수 자체가 호이스팅된다.

hoistedFunction(); // "Hello, world!"

function hoistedFunction() {
    console.log("Hello, world!");
}

따라서 함수를 먼저 호출하고 이후에 함수 선언을 해도 최상단으로 끌어올려지기 때문에 정상적으로 동작한다.

 

하지만 함수 표현식은 변수 호이스팅과 비슷하게 동작하기 때문에 변수가 초기화 되기 전에는 호출할 수 없다.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
    console.log("Hello, world!");
}

 

호이스팅의 장점

호이스팅의 장점은 코드의 유연성, 가독성, 유지보수성에 있다.

• 함수 선언이 먼저 와도 호출할 수 있는 유연성
• 변수 선언 위치의 명시적 이해
• 선언과 초기화의 구분을 통한 코드 안정성
• 초기화 순서의 명확성 

이는 코드 작성과 디버깅에 유용할 수 있다.