[TIL] 데브코스 TIL - this, 전역오염방지, 변수선언방식, 클로저

 

 

 

오늘은 Javascript 사전문제 7문제 풀고 해설강의 들으면서  배운 내용 + 느낀 점 정리해보려고 합니다 ⏰🔥

 

📍 오늘 배운 내용

1. this

var thisTest = {
 whoAmI: function (){
  console.log(this) // {whoAmI : f, testInTest :{}}  (이 this는 thisTest 객체를 가리킴)
 },
 testInTest : {
  whoAmI : function (){
   console.log(this) // {whoAmI : f}  (이 this 는 testInTest 객체를 가리킴)
  }
 }
}

• this 는 현재 자신이 속한 (바로 상위) 객체를 가리킴

 

 

2. 함수를 선언하자마자 사용하는 방식

 

ex 1)

(function(name){
  console.log(`hello ${name}`)
})('judahyeon')

• 함수를 감싸게 되면 ()로 감싸진 함수만 전역에 묶이게 되어 내부 코드는 전역에서 접근할 수 없게 된다. 즉, 전역을 오염(?)시키지 않고 사용가능

 

ex 2)

const logger = (function(){
 
 let logCount = 0;

 function log(message){
  console.log(message);
  logCount+=1;
 }
 
 function getLogCount(){
  return logCount;
 }
 
 return {
  log:log,
  getLogCount: getLogCount
 }

}) ()

console.log(logger.getLogCount()) // 2
console.log(logger.logCount) // undefined

• 전역에서 logCount 값에 접근할 수 없게 되어 변수를 private 하게 사용 가능

 

 

3. setTimeout 함수 등 비동기 처리 함수 동작원리

const numbers = [0, 1, 2, 3, 4]

for(var i=0 ; i<numbers.length ; i++){
 setTimeout(function(){
  console.log(`[${i}] number ${numbers[i]} turn! `)
 }, i*1000)
}

 

setTimeout 함수는 비동기 함수로 실행시 background로 이동한다. 

• setTimeout 으로 인해 1초 지난 이후 참조한 i는 이미 for문이 끝난 이후의 i이기 때문에 항상 5
• 배열에 없는 값인 5를 참조하려고 하니 numbers[i]는 undefined가 뜬다. 

 

해결방법 :

 1 ) var 대신 let 쓰기

      : let 은 블록 스코프이기 때문에 setTimeout 내에서 i가 0일때, i가 1일 때 각각 참조되어 정상 동작

 

 2 ) setTimeout 함수를 function()으로 한번 더 감싸고 i를 즉시 넘겨 사용 

      : 위와 이유 동일, 각 i값마다 각각 참조됨

 

 3 ) for 대신 forEach 쓰기

      : forEach 문에서 setTimeout 함수를 감싼 함수를 콜백함수로 이용하면 forEach가 numbers를 순회하면서 각각 function을 만들기 때문에 i의 값이 고유해진다. 

 

 

4. var, let, const 의 차이점

 

 - var : 함수 스코프, 재선언 가능, 재할당 가능, 호이스팅 발생, var은 이제 권장되지 않음

 

 - let : 블록(if, for, while) 스코프, 재선언 불가, 재할당 가능, 호이스팅 발생하지만 TDZ 존재

 

 - const  : 블록(if, for, while) 스코프, 재선언 불가, 재할당 불가, 선언과 동시에 초기화 필수 , 호이스팅 발생하지만 TDZ 존재

 

 

5. 클로저

 

ex) 클로저를 이용한 이전의 상태값 저장

function outterFunction() {
 const name = 'judahyeon'

 return function () {
  alert(name)
 }
}

const printName = outterFunction()

printName()

• outterFunction 실행 후 name 변수는 소멸해야함 (const 는 블록스코프이기 때문~!)
• 그러나 alert(name) 이 잘 동작함 -> ????????? name 이 참조가 잘 되고 있다는 얘기,,,
• 다음과 같이 이전의 상태를 저장할 수 있는 것을 클로저라고 한다.

 

ex) 클로저를 이용한 private 효과

function Counter() {
 let count = 0

 function increase() {
  count++
 }
 function printCount() {
  console.log(`count : ${count}`)
 }
 return {
  increase,
  printCount
 }
}

const counter = Counter()

counter.increase()
counter.increase()
counter.printCount()

//이때 외부에서는 Counter 함수 내의 count에 접근 불가
console.log(counter.count) // undefined

 

📍 어려웠던 내용

• 나는 클로저가 봐도봐도 어렵다. 와닿지 않는다,,,,,,,,

 

📍 궁금한 내용 / 부족한 내용

• arrow function 과 this 에 대해서 아직 확실히 모르는 것 같아 딥다이브를 다시 정독해야겠다.
• 비동기 처리 함수 실행원리 빠삭하게 다시 정리하기 
• this 가 쓰이는 방법이 4가지가 있었던걸로 기억하는데 그 4가지가 뭔지 기억이 잘 안나서 다시 공부 필요
• 실제로 내가 프로젝트 할 때는 this를 거의 안 썼어서 this 를 현업에서 많이 쓰는지 궁금하다. 

 

📍 느낀점

바닐라 자바스크립트에 대해서 항상 부족하다고 생각했는데 이렇게 헷갈릴만한 개념을 추려서 사전문제 내주시고 직접 풀어보니까  어떤게 헷갈릴 수 있는 개념인지, 내가 뭘 모르는지 알게 되었다.

물론 이것보다 모르는거 더 많겠지만........ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ😂

 

예전에 모던 자바스크립트 딥다이브 스터디를 한 적이 있었는데 그때 내가 var, let, const 와 호이스팅에 대해서 발표를 했었다.

확실히 내가 발표했었어서 그런지 기억에 잘 남아있었고 사전 문제에서 var, let, const 차이점을 쓰라고 해서 막힘 없이 썼던게 좀 뿌듯했다ㅎㅎ

 

또, 사전문제 해설 듣고 코드 쳐보면서 이게 왜 undefined로 출력되는지 직접 보면서 배우니까 재미있었다. 

확실히 직접 치고 경험해 봐야 나에게 더 오래 남는 것 같으니 강의를 좀 더 진취적으로 들어야겠다!

 

그리고 ES6 부터 나온 신문법은 알긴 알지만 잘 활용을 못하는 느낌이었는데 이번 기회에 es6를 잘 활용해보려고 한다. 

모르는 것에 집중하기보다 모르는걸 알게 되는 것에 대해 더 집중하는게 정신건강에 더 좋은 듯!!!

 

 

 

+) 

팀원 분이 TIL 예시 자료를 보내주셔서 그걸 참고하여 TIL 을 쓰는 방법을 좀 바꿔보려고 한다. 

 

원래는 정리하고 싶은 주제가 생기면 그 주제에 대해서 쓰는 편이었는데 그러면 쓰고 싶은 주제 생길 때까지 블로그 정리를 안 하는 나 자신 발견~~~

 

그래서 짧게라도 Til (뭐 배웠는지랑 느낀 점 위주로 ) 쓰고 주제가 생기면 그 주제에 대해 추가적으로 깊게 포스팅 하는 방식으로 하기로 했다. 

 

이렇게 하니까 1일차이지만 더 뿌듯하고 그렇다. 바꾼지 고작 1일차면서,,,,,

 

오늘의 TIL 끝! 💛

 

 

 

 

---