[TIL/JavaScript] 2023/01/20

호이스팅(Hoisting)

호이스팅(Hoisting)이란 변수나 함수가 어디에서 선언이 되든지 간에, 최상단에 위치하게 되어(=최상단으로 끌어 올려져) 동일한 스코프에서는 어디서든 '참조'할 수 있게 되는 현상을 말한다. 역시 한국말이 세상에서 가장 어렵다. 예제 코드를 통해 이해해 봤다.

일반적으로 코드는 위에서부터 아래로(Top to Bottom) 해석되는 것이 logical하다고 할 수 있다. Hoisting의 개념이 없었다면 위 코드는 작동하지 않을 것이다. 함수를 통과하기도 전에 30이라는 값이 콘솔로 입력될 수 없기 때문이다. 변수의 Hoisting 현상도 살펴보자.

논리에 맞으려면, 첫 번째 콘솔에 대해서는 에러가 나와야 한다. 변수 'a'를 할당하기 전인데 a를 찍어달라고 하는 것은 택도 없는 소리이기 때문이다. (Hoisting이라는 개념이 없었다면 말이다.) 마치 '결제를 하지도 않고 물건을 들고 나가려는 편의점 고객'같은 느낌이다.

하지만 JS라는 녀석이 걸어와서 _var를 먼저 살펴보고_, "음... a는 1이구만... 그런데 첫 번째는 할당하기 전이니까 'undefined'를 줄게. 다음 콘솔은 정상적으로 1을 주마..."라고 말한다. 이것이 _hoisting_이다.

'함수 선언식'은 hoisting에 영향을 받고, '함수 표현식'은 hoisting에 영향을 받지 않는다는 말의 뜻은 이해했다. 사실 hoisting을 조금 더 깊게 이해하고 싶지만 이것만 하다가는 기존에 계획했던 forEach는 건드리지도 못할 것 같아서 여기까지만 살펴보았다.

Array.prototype.forEach()

"'forEach'는 array 내부 데이터 각각에 영향을 주는 method가 아닐까? 예상이 맞다면 'map method'와는 어떤 차이가 있을까?"라는 예상과 궁금증을 들고 학습에 임했다.

'forEach'는 '배열을 순회하면서 인자로 전달할 함수'를 호출하는 반복문이라고 한다. 후...

배열에는 보이는 바와 같이 '20, 11, 33, 10, 7, 77', 총 6개의 데이터가 존재한다. 이어서 forEach method를 통해 배열을 순회하며 작동할 'addTotal'이라는 이름의 함수를 호출했다.

최초에는 20이라는 데이터가 addTotal 함수로 투입된다. 0인 'sum'값에 20을 더해서 다시 20이라는 데이터가 산출되었다. 다시 11이라는 데이터가 addTotal 함수로 투입되면서 20과 11이 더해져 31이라는 값이 산출된다. 반복을 거듭하여 콘솔에는 158이라는 최종 결과값이 나타난다. '배열을 순회하면서 인자로 전달할 함수'(=addTotal)를 forEach method가 호출해주는 것을 확인할 수 있다. '순회'라는 keyword가 forEach의 정체성을 담고 있다고 생각된다.

이런식으로 표현할 수도 있겠다.

이쯤되면 forEach section 서두에 언급한 'map'과의 차이가 궁금해진다. 궁금하면 바로 확인해보면 된다.

흠... 고민이 더 깊어진다.

구글링을 해봤다. map method와 거의 유사하지만 따로 return하는 값이 없다는 점이 차이라고 한다. ---> 무슨 말인지 이해가 안 됐다. 더 알아보니 그저 새로운 배열을 만들 수 없다는 뜻이었다.

forEach를 단순히 map으로 변경했을 때에는 문제가 없었지만, 'newArr'이라는 새로운 배열을 만들기 위해서 forEach를 사용했을 때에는 원하던 배열이 아닌 'undefined'가 현출되었다. map을 사용하면 원하던 값이 출력된다. 역시 중요한 것은 꺾이지 않는 마음이다!

forEach method는 세 개의 argument를 받아들이는 함수라고 나온다. 무슨 의미인지 코드를 통해 확인해봤다.

중요한 것은 꺾이지 않는 마음!이지만,,, 이건 잘 모르겠다 :)

회고

비록 휴학 중이지만 9 to 6로 아르바이트(=유사 직장인)를 하며 공부를 하고 있는데, 이게 생각보다 쉽지 않다. 여하튼 정말 다행인 건 아주 좋은 어른을 만났다는 것이다.

어느 날은 갑자기 대표님께서 "민관아 사람은 '오직 나만이 해결할 수 있는 일' 또는 '남들에게 물어봐도 답이 나오지 않는 일'을 마주했을 때 괴로워한다. 나는 이런 감정을 '외로움'이라고 정의한다. 네가 학교로 돌아가서도 '외로움'을 느낄 때면 언제든지 나를 찾아오면 된다."라고 말씀해 주셨다. 감사할 따름이다.

그래도 이 공부는 '외로움'을 덜 느끼게끔 해주는 Tool이 너무 많아서 다행이다. 나약한 놈을 꾸역꾸역 나아가게 해주니 그것만으로도 참 감사한 일이다. 성실한 하루하루를 쌓아나가서 나도 누군가에게 좋은 어른이 되고 싶다. 아무튼 화이팅이다!