< 목차 >
- 클로저 함수
- ES6 주요 문법 (spread/rest, destructing)
- 회고
1. 클로저 함수
1-1) 클로저 함수의 특징
> 클로저 함수란?
- "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."
< 화살표를 함수를 이용한 간단한 덧셈 함수 >
const add = (x, y) => x + y;
add(5, 7) // 12< 함수의 호출이 두 번 발생 >
const adder = x => y => x + y;
adder(5)(7); // 12< 함수를 리턴하는 함수 >
// 리턴값이 함수다
const adder = x => y => x + y;
adder(5)(7); // 12
typeof adder(5) // 'function'
adder (5) // y => x + y
< 클로저 함수의 기본 형태 >
// 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다
const adder = /* 외부함수 */function (x) { // 외부 함수의 변수 x
return function (y) { // 내부 함수의 변수 y
return x + y; /* 내부함수 */
}
}-> 외부 함수는 y에 접근이 가능한가?
바깥 스코프에서는 안쪽 스코프 접근이 불가하다.
-> 내부 함수는 x에 접근이 가능한가?
바깥 스코프에서 선언한 변수 접근이 가능하다.
< 데이터를 보존하는 함수 >
const adder = function (x) {
return function (y) {
return x + y;
}
}
const add5 = adder(5); // 함수 실행이 끝나도 5라는 값은 사용이 가능하다
add5(7) // 12
add5(10) // 151-2) 클로저의 활용
< 클로저 모듈 패턴 >
const makeCounter () => {
let value = 0;
return {
increase: () => {
value = value + 1
},
decrease: () => {
value = value - 1
},
getValue: () => value
}
}// 내부 함수를 여러 개 만들 수 있다
const counter1 = makeCounter();
counter1 // {increase: f, decrease: f, getValue: f}- makeCounter 함수는 increase, decrease, getValue 메서드를 포함한 객체 하나를 리턴한다. 따라서, counter1은 객체이다.
- 스코프 규칙에 의해 value 라는 변수에 값을 새롭게 할당하는 것은 불가능하다.
< 재활용 가능한 makeCounter 함수 >
//여러 개의 counter를 만드는 것이 가능
const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1
const counter2 = makeCounter();
counter2.increase();
counter2.increase();
counter2.decrease();
counter2.getValue(); // -3
- 위 함수처럼 재사용성을 극대화하고, 함수 하나를 독립적인 형태로 분리하는 것을 모듈화라 한다.
- 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 클로저는 모듈화에 유리하다.
2. ES6 주요 문법
ES6 문법이란?
javascript에도 일정의 버전이 존재한다. 바로 javascript의 표준인 ECMAScript(ES)인데, 현재 출시된 가장 최신버전은 19년도에 출시된 ES2019이지만, 15년도에 출시된 ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다. 이미 내가 흔히 사용하는 let,const, 탬플릿 리터럴 등 ES6부터 적용된 문법이라고 한다. 그래서 오늘은 ES6에서 새롭게 적용된 문법 중 spread/rest 문법과 구조분해 할당에 대하여 학습하고자 한다.
2-1) spread 문법 / rest 문법
- 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 3, 5];
sum(...numbers) // 1 + 3 + 5 = 9배열에서 사용하기
- spread 문법은 배열에서 강력한 힘을 발휘한다.
let a = ['hello', 'world'];
let b = ['oh' ...a, 'my', 'god'];
// let b = ['oh', 'hello', 'world', 'my', 'god']< 배열 합치기 >
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
// arr1 = [0, 1, 2, 3, 4, 5]
// arr1 = arr.< 배열 복사 >
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사하다.
arr2.push(4);// arr은 영향을 받지 않고 남아 있다.< 객체에서 사용하기 >
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }< 함수에서 나머지 파라미터 받아오기 >
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]2-2) 구조 분해 할당
- 구조 분해 할당은
spread문법을 이용하여 값을 헤체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.
분해 후 새 변수에 할당
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a);// 10
consoel.log(b);// 20
console.log(rest);// [30, 40, 50]
- 객체에서 구조 분해 할당을 사용하는 경우, 선언(
const,let,var)과 사용하지 않으면 에러가 발생할 수가 있다.
3. 회고
scope를 학습할 때만 하더라도 머리가 아프지않았는데 클로저 함수를 학습하니 머리가 지끈거리기 시작하였다... 이해할만 하다 싶으면 막히고 뭔가 풀릴듯 안풀리니 짜증이 나면서도 저걸 완전히 이해하고 말겠다는 승부욕이 들었다! 오히려 ES6 spread/rest 문법은 재밌게 학습했다. 아무래도 이번 추석에는 연휴를 반납하고 클로저 함수에 대하여 조금 더 집중해서 학습을 해야겠다...!
