💻 호이스팅 그리고 클로저

프로그래머스 데브코스에 🎉합격🎉하고 처음으로 작성하는 TIL!
꾸준히 작성하자!🙏🏻
공부한 내용 그리고 어려웠던 점, 더 알고싶은 점, 느낀점을 위주로 정리할 것이다.

📃 오늘 공부한 것

호이스팅

어디에 선언했느냐에 상관없이 선언을 제일 위로 끌어올려주는 것!
var 변수 선언과 함수 선언문에서만 일어난다.

많은 도움이 된 블로그 출처
[JavaScript] 호이스팅(Hoisting)이란

클로저

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

function func() {
  let i=1;
  for (i=1; i<=5; i++) {
    setTimeout(function() {
    	console.log(i);
    }, i*500);
  }
}
func(); // 5 5 5 5 5

분명 보았던 코드임에도 불구하고 또! 결과를 1 2 3 4 5로 예측했다. 나는 바보다🤦‍ 콜백함수는 클로저이기 때문에 상위 i 값을 물어보고 이미 i값은 5까지 증가하였기 때문에 5가 5번 출력되는 것이다.

해결 방법

• 즉시 실행 함수(IIFE)를 이용하여 해결

function func() {
  for (var i=1; i<=5; i++) {
    (function (num) { 
      setTimeout(function() { 
      console.log(num);
      }, num*500);
    })(i);
  }
}
func(); // 1 2 3 4 5

즉시 실행 함수 : 정의되자마자 즉각적으로 실행되는 함수

• 블록 스코프로 해결 : let을 사용하면 for문 내의 새로운 스코프를 갖기 때문에 매 반복마다 새로운 i가 선언되고 반복이 끝난 이후의 값으로 초기화된다.

function func() {
  for (let i=1; i<=5; i++) {
    setTimeout(function() {
    	console.log(i);
    }, i*500);
  }
}
func(); // 1 2 3 4 5

😁그동안 클로저를 자주 사용하고 있던 나!
백준에서 node.js로 입력을 받을 때 사용하던 코드이다. 이제 확실히 알고나니 보인다.. 클로저가!

//백준(BOJ) 입력 받기
const fs = require('fs');
const stdin = fs.readFileSync('/dev/stdin').toString().split('\n');

const input = (() => {
  let line = 0;
  return () => stdin[line++];
})(); 

즉시 실행 함수와 클로저를 사용하여 input 함수를 만들었고
입력값이

10 10 3
13 2 5 11
1
2

이렇게 주어질 경우 input함수를 실행할 때마다 한 줄 씩 반환하도록 하는 코드이다!

🔥 느낀점

사실 오늘 공부한 내용들을 예전에 포스팅 한 적이 있었다. 그 때에는 나름 이 개념들을 적고 올렸었는데 이해를 100프로 하지 못했음에도 우선 작성했던 것 같다. 다시 복습하면서 이해하니까 이제 개념을 헷갈리는 일은 없을 것 같다.

예전에 올렸던 개념
[FE/JavaScript] 클로저(Closure)
[FE/JavaScript] 호이스팅(Hoisting)
[FE/JavaScript] Scope(스코프)

그동안 원리도 모르고 사용했던 클로저! 내가 사용하는 코드가 왜 이렇게 사용해야 하는지, 어떤 원리로 실행되는지 등을 확실히 알지 못한 채 구현에만 집중했던 것을 반성한다.
앞으로 낯선 개념들도 나오겠지만 이해할 때 까지 끝까지 파고들어야 겠다. 화이팅🔥 하자!!

오늘의 내용 정리

데브코스 Day1