오늘의 개념은 호이스팅 입니다.
먼저 영어 단어의 사전적 의미를 찾아보면
hoist = 끌어올리다.
입니다. 즉, 호이스팅은 끌어올리는 것을 의미하는데 무엇을 끌어올리는 지
살펴 봅시다!
console.log(a)
var a = "호이스팅"
console.log(a)이 코드는 JS 의 코드입니다.
만약 자바나 파이썬같은 언어에선,이미 첫 줄에서 선언된 a가 없기에, 오류 처리가 되겠지만,
자바스크립트는 호이스팅으로 인해, 오류가 나지 않고
첫 째줄에 undefined 를 출력하고
세 번째 줄엔 호이스팅을 출력합니다.
즉, JS에선 함수나 변수들을 먼저 맨 위로 선언을 해 두고,
코드를 읽어나가는데, 쉽게 설명해서
코드 전체에서 var a= 를 호이스팅해서 undefined로 두고,
var a = "호이스팅" 줄에서 a를 초기화, 선언합니다.
그래서 세 번째 줄에서 선언된 a인 "호이스팅"을 출력합니다.
말하면서도 어려운 개념이지만, 호이스팅은 JS에서 유용한 기능을 해주기도 합니다.
예를 들어
Hoisting()
const Hoisting = () => {
console.log("호이스팅");
}
이런 코드가 있을 때, 파이썬 같은 언어에선 선언되지 않았다고 에러를 표시하지만, JS에선 호이스팅을 통해 Hoisting이란 변수를 미리 선언했기에, 함수가 정상적으로 출력 됩니다.
이는 코드의 가독성에도 도움을 주고, 함수의 배치에 신경을 쓰지 않아도 되기에
이점이 있습니다.
또한 호이스팅은 '선언' 을 하는 것이지, '할당'을 미리 하는 게 아니기에
더 유용한 JS 동작 이라고 생각합니다.
다만, var과 호이스팅의 상호관계에서 var은 오류, 실수 유발에 영향을 주었고
예를 들어
console.log(a)
a = 10
var a
console.log(a)
var a = 20
console.log(a)위와 같은 코드가 있을 때, 놀랍게도 모든 console.log에
각각 undefined // 10 // 20
이라는 값들이 찍힙니다.
이는 변수 라는 것에 의미를 상실하게 하고, 여러 문제를 야기하기에
이를 방지하려고 나온 변수가
let과 const 입니다.
즉, var의 단점을 지우기 위해 나온 변수 표기법이기에,
2022년 12월 16일인 오늘을 기준으로, 대부분의 JS관련 문법에선
var을 쓰지 않고, let을 씁니다!
그리고 저는 대부분의 변수를 먼저 const로 선언,할당해주고(const는 선언과 할당을 동시에 합니다!)
나중에 값이 바뀌는 변수들에 대해선 let으로 교체해줍니다.
let은 var과 똑같이 호이스팅을 통해 선언을 하긴 합니다.
다만, TDZ 일명 데드존으로 이동하기에, 만약
console.log(a)
let a = 10
console.log(a)위와 같은 코드를 실행 시,
ReferenceError: Cannot access 'a' before initialization
라는 에러가 나타나게 됩니다!
다시 말해 호이스팅은 JS에 많은 이점을 가져다 주지만,
혼란을 야기할 수 있기에.. 이러한 특징을 이해하고 있다면
코드를 더 효율적으로 짜면서도, 에러, 오류 ,실수등을 줄일 수 있는
개념 이라고 생각합니다!
처음으로 개념 설명을 해봤는데,
참고도 많이했고 사실 어려운 부분이 많았습니다.
참고 자료:chatGPT , Youtube , 여러 블로그들 !
내일은 JS의 또 다른 특징인 비동기처리에 대해 깊게 공부해서 개념을 파헤쳐 보겠습니다!
