함수, 스코프

keis·2019년 12월 6일

JavaScript

목록 보기
8/8

렉시컬 바인딩

function f1(){
    var a= 10;
    f2();
}
function f2(){
    return console.log("호출 실행");
}
f1();
//실행결과
/*
호출실행
*/
function f1(){
    var a= 10;
    f2();
}
function f2(){
    return a;
}
f1();
//실행결과
/*
Uncaught Reference Error
: a is not defined
*/

렉시컬 특성이란 함수 실행 시 유효범위를 함수 실행 환경이 아닌 함수 정의 환경으로 참조하는 특성입니다.
위의 1.코드를 봤을 때 함수 f1에서 함수 f2를 호출하면 실행이 됩니다.
함수 f1,f2 모두 전역에서 생성된 함수여서 서로를 참조할 수 있죠.
하지만 2.코드처럼 함수 f1안에서 함수 f2를 호출했다고 해서 f2가 f1안에 들어온 것처럼 f1의 내부 변수 a를 참조할 수 없습니다.
렉시컬 특성으로 인해서 함수 f2가 실행될 때가 아닌 정의 될 때의 환경을 보기 때문에 참조하는 a라는 변수를 찾을 수 없습니다.
그래서 실행결과는 위와 같이 나옵니다.

다이나믹 바인딩

실행 시간 중에 일어나거나 프로그램 실행 과저에서 변경되는 바인딩
실행 파일을 만들 때는 바인딩이 되지 않고, 보류 상태로 두었다가 프로그램이 실행될 때 바인딩 되도록 할 수가 있습니다.
이렇게, 실행 파일을 만들 때는 호출될 함수로 점프할 번지를 결정하지 않고 빈칸으로 두었다가 프로그램을 실행할 때, 점프할 번지를 즉석에서 결정하여 함수를 실행하도록 하는 것

함수 클로저

클로저란?
클로저는 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 일컫습니다.
스코프 체인(scope chain)으로 표현되기도 합니다. 클로저는 세가지 스코프 체인을 가집니다.

  1. 클로저 자신에 대한 접근 (자신의 블럭내에 정의 된 변수)
  2. 외부 함수의 변수에 대한 접근
  3. 전역 변수에 대한 접근

내부 함수는 외부 함수의 변수뿐만 아니라 파라미터에도 접근할 수 있습니다.
단, 내부 함수는 외부 함수의 arguments 객체를 호출할 수는 없습니다.
(하지만, 외부 함수의 파라미터는 직접 호출할 수 있습니다.)

function showName(firstName, lastName) {
    var nameIntro = "Your name is ";
    // 이 내부 함수는 외부함수의 변수뿐만 아니라 파라미터 까지 사용할 수 있습니다.
    function makeFullName() {
        return nameIntro + firstName + " " + lastName;
    }
    return makeFullName();
}
showName("Michael", "Jackson"); // Your name is Michael Jackson

호이스팅

Hoisting이라는 단어를 직역하면 끌어올리기, 들어 올려 나르기라는 뜻입니다.
JavaScript에서 호이스팅도 비슷한 의미를 갖고 있습니다.
간단하게 말해서 JavaScript에서의 호이스팅의 의미는 변수 선언문을 끌어올린다는 뜻으로 이해하면 됩니다.

function hoistingExam(){
    console.log("value="+value);
    var value =10;
    console.log("value="+value);
}
hoistingExam();
//실행결과
/*
value= undefined
value= 10
*/
function hoistingExam(){
    var value;
    console.log("value="+value);
    value =10;
    console.log("value="+value);
}
hoistingExam();
//실행결과
/*
value= undefined
value= 10
*/
  1. 코드를 보시게 되면 함수 hoistingExam안에서 변수 value의 호출이 두 번 일어납니다.

한 번은 변수 선언문 전에 또 한 번은 변수 선언 후에 호출이 되는데, 다른 프로그래밍 언어의 경우에는 선언문 전에 호출됐을 때 에러가 납니다.
하지만 JavaScript의 경우 호이스팅이 됨으로써 2. 코드와 같은 구동이 이루어집니다.
즉, 변수 선언문이 유효범위 안의 제일 상단부로 끌어올려 지게 되고, 선언문이 있던 자리에서 초기화가 이루어지는 결과를 갖는 것입니다.
그 실행결과 첫 번째 호출에서는 초기화가 되지 않은 undefined가, 두 번째 호출에서는 초기화된 값이 나옵니다.

0개의 댓글