기본 콘텐츠로 건너뛰기

라벨이 클로저인 게시물 표시

자바스크립트 함수, 선언부터 클로저와 this까지 한 번에 이해하기

자바스크립트 함수, 선언부터 클로저와 this까지 한 번에 이해하기 빠른 답 자바스크립트에서 함수는 값처럼 다룰 수 있는 일급 객체라서 전달, 반환, 저장이 모두 가능합니다. 함수 선언식과 함수 표현식은 호이스팅 방식이 다르므로 호출 가능 시점이 달라집니다. 클로저는 함수가 자신이 만들어질 때의 스코프를 기억하는 동작이며, 상태 캡슐화의 핵심 도구입니다. 화살표 함수는 문법만 짧은 것이 아니라 this와 arguments를 자체적으로 만들지 않는다는 점이 중요합니다. 목차 한눈에 비교 실행 환경을 먼저 맞추기 함수는 값이면서 호출 가능한 객체다 선언식, 표현식, 화살표 함수의 차이 호이스팅과 TDZ를 오류 이름으로 읽기 클로저는 값을 복사하지 않고 환경을 붙잡는다 this와 arguments는 호출 방식과 선언 방식이 가른다 출력으로 읽는 디버깅 포인트 실무에서 어떤 형태를 고를까 한눈에 비교 Point 1 함수 선언식: 평가 단계에서 함수 객체까지 준비되므로 선언 전 호출이 가능하다. Point 2 함수 표현식: 변수 바인딩과 함수 값 할당이 분리된다. const 는 TDZ 때문에 ReferenceError , var 는 undefined 상태라 TypeError 가 난다. Point 3 화살표 함수: 함수 값이긴 하지만 자체 this , arguments , prototype 이 없고 생성자로 쓸 수 없다. Point 4 클로저: 외부 값을 “복사”해 두는 게 아니라, 선언 시점의 스코프 체인에 계속 연결된다. Point 5 undefined , ReferenceError , TypeError 는 모두 다른 신호다. 값이 없는지, 접근이 금지됐는지, 타입이 맞지 않는지 구분해서 읽어야 한다. 함수를 이해할 때는 문법 이름보다 먼저 네 가지를 보면 된다. 값처럼 전달되는가, 언제 호출 가능한가, 어떤 스코프를 기억하는가, this 를 스스로 가지는가. 이 기준이 잡히면 선언식, 표현식, 클로저, 화살표 함수가 따로 놀지 않는다. 실행 환경...

클로저

 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.  클로저를 어휘적 환경이 무엇인지 알아야 하는데 무엇인가? 1.  어휘적 범위 지정(Lexical scoping) function foo() { var test = 'test' function bar() { console.log(test) } bar() } foo()  예상 하였겠지만, 'test'라는 문자열이 출력이 된다. 위의 예시는  어휘적 범위 지정(lexical scoping)의 한 예이다.   중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다는 것을 알 수있다. 2. 클로저 function foo () { var test = 'test' function bar () { console . log (test) } return bar } var fooOfBar = foo () fooOfBar ()  위의 코드는 어떠한가?  이것또한 예상 한것처럼 "test"문자열을 출력을 한다. 자 그렇다는 말 뜻은 foo함수가 실행 되는 동안 생성된 " test "문자열을 넣은 test변수가 foo 함수가 실행 된 이후에도 존재 한다라는 것이 된다.   자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 3. 간단한 활용 법 function makeAdder (x) { return function (y) { return x + y } } var add5 = makeAdder ( 5 ) var add10 = makeAdder ( 10 ) console . log ( add5 ( 5 )) console . log ( add5 ( 10 )) console . log ( add10 ( 20 ))  클로저의 특성을 이용하여 위처럼 특정값에 항상 5를 더하는 함수를 만들거나 10...