TIL: 2022-09-07

⚙️ 오늘 배운 주제

JavaScript 클로저, ES6 문법

 

🐹 오늘의 기분

어제 막막했던 클로저를 오늘 다시 새로운 기분으로 공부했다. 어제보다는 머리에 더 잘 들어와서 다행이었다. 거기에 라이브 세션에서 엔지니어분의 설명까지 들으니 뭔가 딱 잡히는 느낌이었다. 역시 삽질 후 듣는 설명이 최고다.... 물론 아직 완전히 이해한 것은 아니기에 더 많이 공부해야 한다 ㅎㅎ ES6 문법도 새로 배웠는데 이건 뭔가 후루룩 지나가버린 느낌이라 페어분이랑 koans 문제 해결하면서 더 제대로 익힐 수 있을 것 같다. 

koans 실습은 정말 재밌었다. 코플릿 풀면서 궁금했던 expect 함수도 배우고, 이걸 하나씩 수정할 때마다 테스트파일에 체크표시가 되는게 너무 신기하고 재밌었당 무엇보다도 배운 내용을 응용할 수 있다는 게 좋았음! 이론 배우고 퀴즈 풀고 넘어가는 것보다 훨씬 좋았다. 보이는 라디오도 처음 해봤는데 열정 넘치는 사연, 공감되는 사연 등 여러 이야기를 들을 수 있었다. 노래도 듣고 머리를 잠시 식힐 수 있어 좋았다. 중요한 것은 남과 비교하지 말고 어제의 나와 비교하는 것! 

 

🗝 키워드

클로저, 렉시컬 스코프, 스프레드 문법, 레스트 문법, 구조분해할당(destructing)

 

🗣 스스로에게 설명

(Koans에서 공부한 내용은 따로 마련된 블로깅 세션에 쓰기 위해 남겨두고 여기엔 우선 클로저에 대한 내용만 넣었당)

클로저 함수는 간단히 “함수를 리턴하는 함수”로 이해할 수 있다. (정확한 정의는 아님)

참고로 MDN에서는 클로저를 아래와 같이 정의하고 있다. 

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

 

스코프를 이용해서 변수의 접근 범위를 닫는 것이 클로저의 특징이다.

→ 특정 데이터를 스코프 안에 가두어둔 채로 계속 사용할 수 있다.

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

위는 MDN에서 가져온 클로저의 예시이다. 

외부함수 makeFunc() 내부에 displayName()이라는 함수가 또 선언되어 있고, 끝에 내부함수를 리턴하고 있다.

그리고 함수 바깥에 만든 myFunc이라는 변수에는 외부함수 makeFunc()을 할당하고 있다.

결과적으로 이 변수는 내부함수 displayName()을 리턴하게 된다. 

즉 8번 줄이 또 다른 함수 표현식이 된다고 이해하면 될 것 같다. (이건 나의 뇌피셜.... 이해를 돕기 위한 수단이니 믿지 마세용)

myFunc()을 리턴하면 이제 displayName 함수가 실행되는 것이다. 

 

데이터를 보존하는 함수

일반 함수는 함수 외부에서 함수 내부의 변수에 접근할 수 없다. (바깥쪽 스코프에서는 안쪽 스코프에 접근할 수 없는 특징 때문)

하지만 클로저는 외부 함수의 실행이 끝나도 외부 함수의 변수가 메모리에 저장된다.

어휘적 환경(=렉시컬 스코프)을 메모리에 저장하기 때문이다.

렉시컬 스코프는 쉽게 변수가 선언되었던 환경 그 자체라고 생각하면 된다.

클로저로 불필요한 전역 변수 사용을 줄이고, 스코프로 값을 더 안전하게 다룰 수 있다.

 

함수의 모듈화

함수의 재사용성을 극대화하여 함수 하나를 독립적인 부품 형태로 분리하는 것

클로저를 이용해 데이터와 메서드를 같이 묶어서 다룰 수 있음.

클로저는 모듈화에 유리하다.

 

❓ 막히는 or 막혔던 부분

암묵적 타입 변환이 살짝 헷갈리는데 이걸 전부 외우고 있기 보다는 대략 이런 값이 나오겠구나~ 하고 예상할 수 있는 정도로 공부해둬야겠다. 자바스크립트는 참 신기한 언어이다.. 

클로저,, 알 듯 말 듯하다. 개념은 이해했는데 막상 코드를 보면 또 한참 들여다봐야 이해할 수 있다 ㅎㅎ