[Day 14] 클로저, ES6 주요 문법

오늘은 자바스크립트의 핵심 개념중 하나인 클로저와 그 외 ES6 의 주요 문법(전개연산자, 구조분해할당 등)에 대해서 공부했다. 원래 공부한 내용을 그날 정리하는 것을 원칙으로 하는데, 오늘 너무 피곤해서 간단하게만 정리하고 나중에 따로 블로깅을 하려고 한다. 

(아래 내용은 매우 간략한 요약과 일부 뇌피셜이 있으므로 주의)

클로저

• 클로저 : 함수가 생성될 시점의 정보를 기억했다가, 나중에 접근하여 사용하는 것. 함수가 중첩되어 있을 때, 즉 외부 함수와 내부 함수가 있을 때 내부 함수는 외부 함수에서 생성된 변수에 접근할 수 있는데, 심지어 외부 함수가 종료되어 실행 컨텍스트에서 pop되어도 이 정보는 렉시컬 환경에 그대로 남아있기 때문에 접근하여 사용할 수 있다. 
• 생성될 시점의 정보를 기억하고 있다는 것이 포인트인데, 이는 함수의 호출 위치가 중요한 것이 아니고 함수가 선언(만들어진) 위치가 중요하다는 것이다. 
• 클로저는 하나의 규칙? 현상 정도로 생각되고, 클로저의 원리를 사용해 전역 변수의 무분별한 사용을 방지할 수 있다. 하나의 함수를 선언하고 이 함수를 다른 변수에 담아 그 변수로 호출하게 되면, 해당 변수에 별도의 기록이 남게 되고 다른 변수와 구별되는 값을 만들어낼 수 있다. - 한 마디로 함수의 재사용성이 극대화 되는 것이다. 
• 이런 방식을 사용하면 바깥 스코프에서는 안쪽 스코프를 참조할 수 없다는 스코프의 규칙에 의해서 데이터가 보호되는데, 이를 캡슐화라고 한다. 이런 방식을 클로저 모듈 패턴이라고 하고, 이 패턴에 네임 스페이스 패턴, 즉시실행함수등이 포함된다.

객체의 구조 분해 할당

• 구조 분해 할당에 대해서는 어느정도 이해했는데, 객체와 배열이 약간 다른 방식을 갖는 것 같아 따로 정리를 해보려고 한다. 
• 먼저 객체의 구조 분해 할당의 경우, 배열과는 다르게 인덱스가 중요하지 않기 때문에 그냥 필요한 프로퍼티를 순서에 상관없이 분해할 수 있다. 다만 이때는 실제 객체에 존재하는 프로퍼티 이름으로 접근해야 한다.

const { name, openingHours, categories } = restaurant;
console.log(name, openingHours, categories);

• 위 코드에서 만약 restaurant 라는 객체가 존재한다면, 이 객체 내의 프로퍼티인 name, openingHours, categories 를 각각 따로 분해할 수 있다. 구조 분해 할당의 패턴에서는 좌측이 변수의 이름 (객체의 실존 프로퍼티 이름) 우측은 분해할 객체가 된다.
• 구조 분해 할당, 특히 객체의 구조 분해 할당이 유용할 때는 외부에서 데이터를 가져올 때이다. API등으로 받아오는 경우의 자료구조는 대게 객체 형태인 경우가 많고, 이 때 필요한 부분을 추출하기 위해서 구조 분해 할당 문법을 사용하면 편리하다.

const {
  name: restaurantName,
  openingHours: hours,
  categories: tags,
} = restaurant;
console.log(restaurantName, hours, tags);

• 만약, restaurant 객체에 존재하는 프로퍼티들을 추출할 때, 해당 프로퍼티 이름 말고 다른 이름으로 변경하고 싶다면 콜론을 기준으로 우측에 새로 할당할 변수 이름을 작성해주면 된다. 

const { menu = [], starterMenu: starters = [] } = restaurant;
console.log(menu, starters);

• 내가 뇌피셜로 restaurant에 menu라는 프로퍼티가 있겠지? 하고 추출하려고 하는데, 이 값이 없다면 menu는 undefined가 될 것이다. 이런 프로퍼티가 없어 undefined 가 할당될 것을 미리 방지하는 방법은, 할당과 동시에 기본값을 설정해주는 것이다. 기본값은 = 할당 연산자를 사용해서 우측에 설정할 기본값을 작성해주면 된다. 위 경우는 빈 배열 []을 기본값으로 한다.

function test({ name: restaurantName, openingHours: { thu: open } }) {
  console.log(restaurantName, open);
}

test(restaurant);

• 이런 구조 분해 할당은, 객체를 함수로 넘겨주면서 그 매개변수를 지정할 때 곧바로 적용할 수 있다. 
• 중첩된 객체를 분해할 경우, 구조분해문법도 똑같이 중첩 중괄호를 사용하여 하면 된다. 위 코드에서 보면 openingHours 내의 thu 라는 실제 프로퍼티를 open이라는 변수 명으로 가져오려고 한다.

---

오늘은 클로저의 개념을 이해하는게 힘들었다. 예전에 강의를 들을 때 설명하길, 쉬운 버전으로 보자면 클로저는 함수가 들고다니는 가방 같은 것이고, 그 가방에 내가 어디서 태어났고 난 어떤 변수들을 참조할 수 있었고 그 값은 무엇이었는지를 다 가지고 다니기 때문에 부모 함수가 없어도 그 내용을 알 수 있다~고 했다. 어려웠던 부분은 일단 '렉시컬 환경' 이런 용어가 어려웠다. 

또 오늘 koans 과제를 하면서 알게된 새로운 사실들이 조금 있는데, 이 또한 다른 글로 정리할 예정이다. 흐 이렇게 미루다 계속 밀리는건 아니겠지