February 3, 2023

(코어 자바스크립트) 5. 클로저

🏀 기술책 스터디

23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디<br/> 처음 코어 자바스크립트 서적을 읽자고 제안하면서 시작!<br/> 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다!

책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자!

🏅 코어 자바스크립트 5. 클로저

일시: 2월 3일 20시

클로저

MDN: 함수(inner)와 그 함수가 선언될 당시(outer)의 lexical environment의 상홍관계에 따른 현상
어떤 함수(외부함수) A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는(가비지 콜렝팅되지 않는) 현상

Quiz1) p119. 예제 5-3. 말로 설명해보기

var outer = function () {
	var a = 1;
	var inner = function () {
		return ++a;
	};
	return inner; // 함수 호출이 아닌 함수 자체를 반환
};
var outer2 = outer(); 
// outer함수는 함수가 종료됐음에도 이후에 반환되는 inner로 인해서 outer의 값 중 하나인 a가 계속 참조됨

bind()

call, apply와의 차이

Quiz2) p127. 예제 5-8. 말로 설명해보기

fruits.forEach(function(fruit) {
	var $li = document.createElement('li');
	$li.innerText = fruit;
	$li.addEventListener('click', alertFruit.bind(null, fruit);
	$ul.appendChild($li);
});

// bind의 첫번째 인자는 . 앞의 함수의 this로 전달되고 그 뒤부터 함수의 매개변수로 전달된다.
// 여기서 bind는 this를 지정하는 목적보다는 bind가 this 지정 후 그 뒤 인자로 특정 매개변수를 미리 전달해줄 수 있다는
// 특성을 활용해서 event 객체가 자동으로 전달되는 것을 막는 것이다.

Quiz3) p128. 예제 5-9. 화살표 함수로 변경해보기

var alertFruitBuilder = function (fruit) {
	return function () {
		alert('your choice is ' + fruit);
	};
};

---

const alertFruitBuilder = (fruit) => () => alert('your choice is ' + fruit);

public, private, protected 찾아보기

정보 은닉 = 캡슐화

부분적용함수

어떤 함수의 인자를 한번에 전달하지 않고 나눠서 전달하는 방법

쉬운 예제

function exampleOne() {
	console.log(arguments);
	}

const a = exampleOne.bind(null, 1, 2, 3, 4, 5);

// a를 호출하면 어떤 결과가 나올까요?

Quiz4) p134관련) 위의 쉬운 예제를 화살표함수로 표현해주세요.

const exampleOne = () => {
  console.log(arguments);
  }

const a = exampleOne.bind(null, 1, 2, 3, 4, 5);

// a를 호출하면 어떤 결과가 나올까요?
// 왜 그런 결과가 나올까요?
// 어떻게 알아볼 수 있을까요?

디바운스

짧은 시간 동안 동일한 이벤트가 너무 많이 발생할 경우, 이를 처음 혹은 마지막에 발생한 것에 대해서만 처리하는 방법.
클로저를 활용하여 디바운스를 구현할 수 있다!
가볍게 이해한 것 설명해보기

커링함수

여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출 될 수 있게 체인 형태로 구성한 것

// 일반 함수
const func1 = (a, b, c, d, e) => a + b + c + d + e;

// 커링 함수
const func2 = a => b => c => d => e => a + b + c + d + e;
const sumFourParameter5 = func2(5);
const sumFourParameter8 = func2(8);

// 추후 파라미터 4개만 전달해서 sumFourParameter 함수들을 실행할 수 있다.
// 즉, 지금 아직 파라미터가 4개 전달되어야 함수가 호출 완료되므로, 클로저가 현상이 일어나고 있는 것!

undefined