자바스크립트 함수/호이스팅

함수의 선언

 

• 함수는 여러개의 인자를 받아서, 그 결과를 출력한다
• 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.
• 만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 된다.
• 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다.

function printName(firstname) {
    var myname = "DUCK";
    return myname + " " +  firstname;
}

• 만약 이 함수의 인자 firstname에 아무 값도 안주면 무슨 일이 일어날까?
• undefined가 출력된다. 선언은 되어있지만 할당이 되어있지 않기 때문이다~

console.log(printName()); //undefined

• 아래같이 인자값에 2개를 넣어주면 앞에 "lee" 부분만 firstname의 값으로 들어간다

console.log(printName("lee", "park")); // lee

함수표현식 / 호이스팅

• 변수값에 함수를 담아둔 것이라 생각 하셈
• 함수는 아래 printName과 같이 표현할 수도 있다.
• 이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.
• 아래 코드를 실행하면 (TypeError: printName is not a function) 오류가 발생함 왜그럴까? 생각 ㄱㄱㄱ

function test() { 
    console.log(printName()); 
    var printName = function() { //함수 표현식!
        return 'anonymouse';
    }
}
test();

//TypeError: printName is not a function

아래 예제 코드들을 통해 조금 더 살펴보자!

이 코드는 잘 작동한다!

function printName2(fisrtname){
    
    var inner = function(){
        return "inner value";
    }
    var result = inner();
    console.log("name is " + result);
}
printName2();

 

하지만 아래코드는 위에 코드의 순서를 조금 바꿔서 만들었는데 오류가 난다 왜그럴까?

function printName3(fisrtname){
    
    var result = inner();
    console.log("name is" + result);

    var inner = function(){
        return "inner value";
    }
}
printName3();

그리고 또 아래 코드는 위의 코드의 var inner를 함수 선언문으로 바꿨는데 오류가 안난다! 

function printName4(fisrtname){
    
    var result = inner();
    console.log("name is " + result);

    function inner(){
        return "inner value";
    }
}
printName4();

 

위의 세가지 예시 코드들 처럼 함수의 순서 또는 함수 표현식을 선언문으로 바꿨는데 어떤 함수는 오류가 발생하고 어떤 함수는 오류가 발생하지 않는다..;

왜그럴까? 어차피 코드를 한줄씩 읽고 실행하는게 아닌가..?

 

호이스팅(hoisting) 때문이다!

 

즉 printName4()는 아래 코드랑 똑같다고 보면 된다!.

function printName5(fisrtname){
    
    function inner(){
        return "inner value";
    }
    var result = inner();
    console.log("name is " + result);
}

정리)

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.

호이스팅의 대상은 var 변수선언과 함수선언문에서만 호이스팅이 일어난다.

var 변수, 함수의 "선언"만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다!

 

앞선 함수 test()에서, printName이 "printName이 is not defined" 이라고 오류가 나오지 않고, function이 아니라고 나온 이유는

• printName이 실행되는 순간 'undefined'으로 지정됐기 때문이다.
• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언한다.
• 함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 한다.
• (실제로 코드가 끌어올려지는 건 아니며<이 과정이 눈에 보이는 게 아니다>, 자바스크립트 파서 내부적으로 그렇게 끌어올려서 처리하는 것이다)

arguments 객체

 

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성된다.

arguments의 타입은 객체 입니다.(console.log( typeof arguments) 로 확인해보세요!)

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있다.

 

arguments는 배열타입은 아니다. 따라서 배열의 메서드를 사용할 수가 없다.

 

function a() {

    console.log(arguments); //[Arguments] { '0': 1, '1': 2, '2': 'duck' } 출력
    for(var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);// 차례로 1, 2, duck이 출력
    }
    console.log('my name is', arguments[2]); // my name is duck 출력
}
a(1,2,"duck");   

 

arrow function

 function getname(name){
     return "LEE" + name;
 }

위 함수는 아래 코드와 같다!

 var getName = (name)=>"LEE"+name;
 console.log(getName("duck")); // 매개변수는 이렇게 넣으면 됨!