14일차! (클로저 함수, spread, rest)

오늘은 클로저 함수, spread, rest를 배웠다. 페어활동도 했다. 이번 페어 활동은 둘이 으쌰으쌰하며 해서 너무나 좋았다. 클로저 함수는 이해가 된것 같으면서도....안된것 같고..... 이상하다...?

 

1. 클로저

클로저 함수는 외부 함수의 변수를 사용하는 내부 함수를 말한다. (또는 외부 함수의 변수를 기억하는 함수, 함수를 리턴하는 함수)

//화살표 함수
const add = x => y => (x + y);

let add1 = add(7);  // x에 7이라는 값을 넣은 함수

add1(6);    // x에 7이라는 값을 넣은 함수의 y에 6이라는 값을 넣음
//output : 13

//함수 표현식
const add = function(x) {       // 외부 함수
	return function(y) {    // 내부 함수
    	return x + y;
    }
}

• 위와 같이 외부 함수의 리턴 값이 내부함수로 표현되어 있다.
• 외부 함수와 내부 함수는 스코프가 구분되어져 있다.
• 클로저의 핵심은 스코프를 이용하여 변수의 접근을 막는 것이다.
• 3번째의 내용 때문에 변수가 어디서 선언됐는지가 중요하다.
• 스코프의 규칙과 마찬가지로 내부함수에서는 외부함수의 변수에 접근이 가능하다.
• 일반적인 함수는 함수의 실행이 끝나면 함수 안의 변수를 사용할 수 없지만 클로저 같은 경우에는 외부함수의 실행이 끝나도 내부함수가 외부함수의 변수를 저장했다가 사용할 수 있다.
• 스코프의 규칙 때문에 내부에 있는 변수의 캡슐화가 가능하다.
• 재활용 가능한 함수를 이용해 서로 영향을 끼치지 않는 여러 개의 함수를 만드는 모듈화가 가능하다.

2. spread 문법

spread 문법은 배열을 풀어서 값을 나누어 넣어줄때 사용한다.

let spreadEx = [1, 2, 3, 4];

let spread2 = [...spreadEx]; // spreadEx의 주소 값을 복사해오는 얕은 복사가 아니라 값 자체가 복사된 깊은 복사가 됨

// 배열 합치기
let arr1 = [1, 2]
let arr2 = [3, 4]

let arr3 = [...arr1, ...arr2]; // output : [1, 2, 3, 4]

let arr4 = [1, ...arr2, 5];  // output : [1, 3, 4, 5]

 

3. rest 문법

rest 문법은 파라미터를 배열로 받아서 사용할 수 있다. 파라미터가 가변적일 경우 주로 쓰인다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
// output : a one
//          b two
//          manyMoreArgs ["three", "four", "five", "six"] 
//          배열 형태로 출력