프로필카테고리질문하기
로그인 계정 만들기

자바스크립트 클로저 설명

04 개월 전

자바스크립트를 처음 배우는 사람에게 클로저(Closure)와 함수 안에서 변수의 범위에 대해 어떻게 설명할 수 있을까요?

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

자바스크립트에서 함수는 밖에 있는 함수의 변수에 접근할 수 있어요.
var a = 100; function myFunction(x) { console.log(a + b + x); } var b = 20; myFunction(4); /* 결과: 124 */

이게 클로저(closure)에요. 범위 밖의 변수에 접근하는 것이 클로저를 만들어요.

클로저는 글로 이해하는 것 보다 코드로 이해하는게 쉬워요. 조금 더 많은 코드를 볼까요?

var a = 100; function myFunction(x) { console.log(a + (++b) + x); /* b가 1씩 증가해요 */ } var b = 20; myFunction(4); /* 결과: 125 */ myFunction(4); /* 결과: 126 */ myFunction(4); /* 결과: 127 */

이제 객체를 리턴하는 함수를 만들어볼거에요.

function makeFridge() { var foods = ['pizza', 'cake', 'cereal']; return { open: function() { return foods.shift(); } } } var fridge = makeFridge(); console.log(fridge.open()); /* 결과: pizza */ console.log(fridge.open()); /* 결과: cake */ console.log(fridge.open()); /* 결과: cereal */

이제 마지막으로 함수를 리턴하는 함수에요.

function myFunction(x) { return function(y) { return x + ', ' + y; } } var greet = myFunction('Hello'); console.log(greet('Potato')); /* 결과: Hello, Potato */ console.log(greet('Marshmallow')); /* 결과: Hello, Marshmallow */
의견 추가
의견 (0)
더 많은 의견 보기