호이스팅 (Hoisting) 이란?
코딩을 배우던 초반에는 많이 언급되던 개념이지만 어느순간 우리의 입에서 오르내리지 않게된
호이스팅.. 기술면접을 준비하며 차근히 하나하나 보고 있던 중에 오랜만에 보는 반가운 이름이
있길래 오늘은 이 녀석을 공부해볼까 한다.
일단 나의 기억을 되짚어 보자.. 호이스팅이 뭐였을까?
뭔가를 끌어올리는거였다는건 기억이 난다, 그리고 선언문도 관련이 있었던걸로 기억을 한다.
나란녀석, 개발자가 되고싶은 건 맞나?? 이런 기초적인것도 기억을 못해서야...
하지만 괜찮다, 이제 제대로 알거니깐 하핳 자 구글을 켜라~ 그리고 검색을 해라~
(검색중)
다녀왔다, 그리고 나는 조금 더 강해졌다.
이제 그럼 본격적으로 호이스팅에 대해 포스팅 해보자. 그리고 그 다음은 선언문에 대해서
간단하게 정리도 해보겠다.
일단 상황극을 하나 해볼까, 코딩을 이제 막 공부하는 코린이 친구가 나한테 묻는다.
"야, 호이스팅이 뭐냐?"
"아 그거? 니자식이 코드를 치는데, 함수를 만들었어 그치?"
"ㅇㅇ 그렇겠지?"
"그럼 그 함수가 좀 길다 싶으면 안에 막 선언문도 만들어 놓고 그러겠지?"
"ㅇㅇ 그렇겠지?"
"그때 자바스크립트가 그 함수를 한번 싹 훑어서 안에 있는 선언문을 다 파악을 할꺼야,
그리고 나서 그 선언문들을 함수 맨 위로 싹 올려버릴것임"
"아 선언문을 치면 그걸 자동으로 위로 올려준다고?"
"ㄴㄴ 코드 위치는 그대로고 다 파악한 선언된 변수를 맨 위에서부터 읽을 수 있게 해주는거"
"아? 근데 말이 안댐, 내가 만약 중간에다가 a = 1 이라는 변수를 만들어놨다고 쳐,
근데 그 위에 코드에서 a 를 사용하는 로직을 만들면 그 위에서도 1을 쓸 수 있다는겨?
코드는 무적권 업 투 바텀이자나. 말이 안되지 자식아"
"아 한국말 끝까지 안들어버리네, 유학도 안갔다온 자식이.. 변수를 읽을 수 있다는거지
값까지 사용할 수 있다고는 안했음, 귀찮지만 예를 하나들어주겠음, 그래야 이해가 빠르니까"
var a = 1
console.log(a)"만약 이렇게 로직을 짰다면 console에는 뭐가 뜰까?"
"1이 뜨겠지"
"그렇지"
console.log(a)
var a = 1
console.log(a)"그럼 콘솔을 위에 하나 만들면 저 첫번째 콘솔은 뭐라고 뜰까?"
"음.... a 를 찾을 수 없다?"
"ㄴㄴ undefined 가 뜸"
"그게 그거아님? a를 찾을 수 없다랑 undefined나, 못찾는건 똑같은거 아녀"
"ㄴㄴㄴㄴㄴㄴ 이건 굉장히 큰 차이임 잘 들어라, a를 찾을 수 없다는것은 a라는 변수 자체를
찾을 수 없다는 이야기고, undefined는 a는 찾았으나, 그 값을 찾을 수 없다 라는 뜻임"
"아...!!"
"이 말이 뭐겠음? undefined가 떳다는건 a를 찾긴 했다는거지? a위에 있는데도 말이지"
"그르네 신기하네"
"하지만 그 a에 할당되어 있는 1이라는 값은 아직 할당되기 전이라 그 값만 못찾는 중인거여"
"아 그 값을 할당하는건 그 코드가 있는 자리에서 해주는거고, 그 전에 변수가 있는지 없는지만
자바스크립트가 파악해서 일단 가지고 있는거구먼?"
"그러치 그러치 이해를 해버렸네"
"이게 호이스팅이란거고?"
"그러치 그러치~"
"오케 이해를 해버려쓰~~"
.... 자 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이렇게 해서 호이스팅에 대한 이해가 끝났다.
요약하자면, 함수안에 있는 선언되어있는 변수를 자바스크립트가 한번 싹 훑어서 최상단에서
가지고 있는것이다. 하지만 변수의 유무만을 파악하고, 그 할당된 값은 해당 변수가 선언되어있는
그 자리에서부터 할당되어 그 값을 가진다, 그 전까지는 변수는 알지만, 할당값을 알지 못하여
undefined가 나게 될것이다. 이것이 호이스팅이다.
호이스팅에 대한 정보는 알게 되었고.. 이제 이 호이스팅과 항상 함께 따라다니는
선언문에 대해서도 알아보자.
선언문은 총 세가지가 있다, const, let, var 이 세가지로 나뉘는데
우리는 이런 선언문에 대해서 이런저런 얘기를 많이 들어봤을것이다.
"const는 상수를 선언하는 녀석이어서 바뀌지 않아야 할 값을 선언할 때 쓰인다." 이런 말들?
아니면 "이제 var는 쓰지 말고 let을 쓰세요~" 이런말들 많이 들어봤을것이다.
들어는 봤지만 들어만 보면 안되겠지. 정확한 정보를 알아야 제대로 변수를 선언할테니까.
const야 뭐 그 역할이 워낙에 정확해서 어렵지는 않지만 저 두놈이 문제다.
let 과 var, 이 두녀석을 집중마크해서 공부해 보겠다.
일단 var가 먼저 이 자바스크립트 세계에 들어왔었다, 그 후에 let이 생겨났는데,
이 코딩의 세계는 다 그렇듯이, 같은 기능을 하는 녀석들이 생겨난다는것은 그 전에 있던녀석에
무언가 문제가 있어 그 문제를 보완한 새로운 녀석을 만들어 내는것이 다반사였다.
let 도 그 중 하나였다. var의 문제점으 보완하여 나온것이다.
그럼 var에는 어떤 문제점이 있었던 것일까?
1. 지역변수, 전역변수의 구분이 어렵다.
var는 지역변수, 전역변수의 구분을 할 수 없었다, 전부는 아니었다. 함수에서는 예외였다.
하지만 for문이나 if문 등에서는 내부에서 쓰인 지역변수가 전역변수로도 활용이 되었다.
내부에서 사용되던 변수가 외부로 나가서까지 반응을 하니, 결과에도 혼란이 올 수 밖에 없었다.
2. 변수선언을 여러번 할 수 있다.
선언관련 문제도 있었다. 기본적으로 우리는 한 선언문에 하나의 변수를 할당한다.
그런데 var를 사용하면 하나의 변수에 여러개의 값을 할당할 수 있다.
var a = 1
console.log(a) // 1
var a = 2
console.log(a) // 2이런 결과가 나타나게 된다. 뭐.. 이렇게 쓸려고 일부러 var를 쓰는 사람들도 있다던데..
굳이 이렇게 쓸 필요가 있나 싶긴 하다.
아무튼 이런식으로 var는 굉장히 유연한(?) 선언문이다. 하지만 코드가 너무 유연하면
복잡하거나 길어지는 코드에서는 절대적으로 사용해서는 안된다. 무조건적으로 혼란이 오기때문,
let의 탄생
그래서 생겨난것이 let이다. let은 var보다 빡빡해졌다.
let a = 1
console.log(a)
let a = 2
console.log(a)
// 에러: a가 이미 선언되었습니다.이렇게 아까처럼 같은 방식에 선언문만 let으로 교체했는데 바로 이렇게 에러가 뜬다.
이미 선언된 변수를 다르게 사용해서 생긴 에러이다. 이런식으로 let은 좀더 빡빡하게 참견한다.
그리고 함수를 포함한, for문, if 문에서도 정확하게 지역변수로 사용을 할 수 있다.
그리고 결정적으로 아까 호이스팅에서도 다른 결과를 보인다.
내가 아까 위의 호이스팅 관련 상황극에서 사용한 선언문은 var 이다.
console.log(a)
var a = 1
console.log(a)이랬던 코드를 이제
console.log(a)
let a = 1
console.log(a)이렇게 바꿔준다면 자바스크립트는 이 코드를 조금 다르게 해석한다.
var를 썻을때 코드는 "a가 선언된건 알겠어, 하지만 아직 값이 할당되지 않았기 때문에 첫번째
콘솔로그에는 undefined를 줄게." 라고 해석을 하지만.
let을 쓴다면 "a가 선언된건 알겠어, 하지만 아직 값이 할당되지 않았기 때문에, 너는 이 a라
는 변수에 값이 할당되는 코드가 나오기 전까지 이 a에 접근할 수 없어" 라는 해석을 한다.
크게 차이는 없다, 둘다 직접적인 값이 할당되는 코드가 나오기 전까지는 해당 변수를 활용할 수
없다는 것은 같다. 하지만 그때까지 그 변수에 대한 접근을 얼마나 제지하는지에 대한 강도가
좀 달라진다고 볼 수 있겠다. 아까도 말했다시피, let은 var보다 조금 더 빡빡하기 때문에
아까 var는 그냥 undefined를 주고 끝났지만, let은 오류를 띄워준다. 이정도의 차이다.
그리고 이제 코드에서는 유연한 var를 쓸일이 없기때문에 이제는 let을 쓰라는 개발자들의 말을
듣고 코드는 const와 let 을 이용하여 작성하는것이 좋을 듯 하다.
혹여나 어떤 로직들이 var로 구성이 되어있다면 그것은 es5 시절의 코드라고 알면 되겠다.
이렇게 호이스팅, 그리고 선언문에 대해 간단하게 고찰했다.
너무 무지성으로 포스팅 한거 같지만, 그래도 읽다보면 재밌는게 이 포스팅의 매력.
쉽게 다가가야 쉽게 배울 수 있다.
