728x90 전체 글139 자바스크립트 클로저 클로저 function outerFunc() { var x = 10; var innerFunc = function() { console.log(x); } return innerFunc; } var inner = outerFunc(); inner(); // 10 outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 변수 객체는 여전히 남아있고, innerFunc의 스코프 체인으로 참조되고 있다. 이것이 자바스크립트에서 구현한 클로저라는 개념이다. 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 클로저라고 한다. function outerFunc(arg1, arg2) { var local = 8; function innerFunc(innerArg) { console.log((arg + .. 2022. 7. 19. 자바스크립트 스코프 체인 스코프 체인 자바스크립트 코드를 이해하려면 스코프 체인의 이해는 필수적이다. 이를 알아야, 변수에 대한 인식 메커니즘을 알 수 있고, 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 자바스크립트에서는 함수 내의 {,} 블록은, 이를테면 for() {}, if {}와 같은 구문은 유효 범위가 없다. 오직 함수만이 유효 범위의 한 단위가 된다. 이 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데, 이를 스코프 체인이라고 한다. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); // 1 console.log(var2); // 2 위의 예제 코드는 함수.. 2022. 7. 19. 자바스크립트 실행 컨텍스트 실행 컨텍스트 개념 실행 가능한 자바스크립트 코드 블록이 실행되는 환경 console.log('This is global context'); function ExContext1() { console.log('This is ExContext1'); }; function ExContext2() { ExContext1(); console.log('This is ExContext2'); }; ExContext2(); /* This is global context This is ExContext1 This is ExContext2 */ 전역 실행 컨텍스트가 가장 먼저 실행되고, 이 과정에서 새로운 함수 호출이 발생하면 새로운 컨텍스트가 만들어지고 실행되며, 종료되면 반환된다. 이와 같은 과정이 반복된 후, 전역 .. 2022. 7. 19. 자바스크립트 프로토타입 체이닝 자바스크립트 프로토타입 체이닝 자바스크립트에서는 클래스 개념이 없다. 대신에 객체 리터럴이나 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 '프로토타입' 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로포타입 링크(implicit prototype link)라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다. 여기서 주의할 점은 함수 객체의 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 하는 것.. 2022. 7. 18. 자바스크립트 함수 호출과 this arguments 객체 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라고 에러가 발생하지 않는다. function func(arg1, arg2) { console.log(arg1, arg2); } func(); // undefined undefined func(1); // 1 undefined func(1, 2); // 1, 2 func(1, 2, 3); // 1 2 정의된 함수의 인자보다 적게 함수를 호출했을 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. 반대로 정의된 인자 개수보다 많게 함수를 호출했을 경우 초과된 인수는 무시된다. 자바스크립트의 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르.. 2022. 7. 17. 자바스크립트 함수의 다양한 형태 콜백 함수 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. 대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다. 웹 페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 웹 페이지가 로딩될 때 경고창에 메시지가 뜨게 되는 코드 즉시 실행 함수 함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수(immediate functions)라고 한다. 함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다.. 2022. 7. 15. 이전 1 2 3 4 5 6 7 ··· 24 다음 728x90
