Javscript - 자바스크립트함수 [선언방식, hoisting, 반환값,arguments]

Javscript:

자바스크립트의 선언방식, hoisting, 반환값,arguments

부스트코스 강의를 참고하여, 정리한 글입니다.

| 시작하기에 앞서,

자바스크립트를 잘 이해하고 있다는것과 함수를 잘이해하고있다는것은 거의 같다고 한다. 따라서 이러한 자바스크립트 함수의 필수개념인 선언방식, hoisting, 반환값, arguments들에 대해서 알아보자.

| 함수의 선언

아래와 같은 방식을 함수선언문이라고 부른다.

// 함수의 호출.
function printName(firstname) {
    var myname = "seungkyu";
    return myname + " " +  firstname;
}

| 함수표현식

아래와 같은 방식은 함수 표현식인데, 함수선언문과 달리 호출순서에 따라 정상적으로 함수가 실행되지 않을때가 있다. 함수 선언문을 더 자주 사용하지만 어떤 코딩컨벤션에선 함수표현식을 권장하기도 한다고 한다. 어찌됐든 한가지 방식만 정해서 사용하는게 좋다고 한다.

function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}
​
test();
//TypeError: printName is not a function

| 호이스팅

• 앞선 예제에서, printName이 not a function이라는 오류가 났던 이유는 printName이 실행되는 순간 undefined로 지정됐기 때문이다. 
• 자바스크립트 함수는 실행되기 전, 함수안에 필요한 변수들을 모두 끌어올려 선언하는데, 이를 호이스팅 이라고한다.(자바스크립트 parser에서 내부적으로 실행된다고 한다.)

참고하면 좋은 부분 발췌 [ 출처: http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/]

변수 호이스팅(Variable Hoisting)

모든 변수선언은 호이스트 됩니다. 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미합니다. 즉, 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경됩니다.

변수의 선언이 초기화나 할당시에 발생하는것이 아니라, 최상위로 호이스트 된다는 것을 명심해야 합니다. 다음 코드를 주목하십시오.

1 2 3 4 5 6 7 8 9

function showName() { console.log("First Name : " + name); var name = "Ford"; console.log("Last Name : " + name); } showName(); // First Name : undefined // Last Name : Ford // First Name이 undefined인 이유는 지역변수 name이 호이스트 되었기 때문입니다.

이 코드는 자바스크립트 엔진에 의해 다음과 같이 해석됩니다.

1 2 3 4 5 6

function showName() { var name; // name 변수는 호이스트 되었습니다. 할당은 이후에 발생하기 때문에, 이 시점에 name의 값은 undefined 입니다. console.log("First name : " + name); // First Name : undefined name = "Ford"; // name에 값이 할당 되었습니다. console.log("Last Name : " + name); // Last Name : Ford }

호이스트 되었을때, 함수 선언은 변수선언을 덮어 씁니다.

참고하면 좋은 부분 2  [출처: http://itstory.tk/entry/4-함수와-프로토타입-체이닝-1?category=969082 [덕's IT Story] ]

함수의 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성과 초기화의 작업이 분리돼서 진행되기 때문이다. 

 

자바스크립트 Guru로 알려진 더글라스 크락포드는 함수 생성에 있어서 그의 저서 더글라스 크락포드의 자바스크립트 핵심가이드 에서 함수 호이스팅은 코드의 구조를 엉성하게 만들 수도 있다고 지적하며, 함수 표현식만을 사용할 것을 권하고 있다.

| 반환값과 undefined

자바스크립트 함수는 반드시 return 값이 존재하고, 없을 때는 기본 반환값인 undefined가 반환된다고 한다. 추가적으로 자바스크트에서는 void 타입이 없다고 한다.

| arguments 객체

• 함수가 실행되면 arguments라는 특별한 지역변수가 자동으로 생성된다고 한다. 
• 또한 arguments의 타입은 객체이고, 자바스크립트 함수는 선언한 parameter보다 더 많은 인자를 보낼 수 도 있다.
• arguments는 배열타입이 아니라 배열메서드를 사용할수가 없다.
• 자바스크립트의 가변인자를 받아서 처리하는 함수를 만들때 arguments 속성을 유용하게 사용할 수 있다.

function a() {
 console.log(arguments);
}
a(1,2,3);

| 마치며

자바스크립트에서 함수에 대한 이해는 필수인데, 이와 관련한 호이스팅이나, 반환값에 대한 정보나, arguments등등 핵심적인 개념에 대해서 다시 한번 환기해보게 되는 계기가 되었다. 현재 사내에서, 자바스크립트로 웹,서버 모두 개발하고 있고, 자바스크립트를 오래도록 쓸것이기 때문에 앞으로 더욱더 심화하여 학습해봐야 할 부분에는 틀림없다.