[JavaScript] 함수선언식 함수표현식 호이스팅

자바스크립트에서 함수를 표현하는 방식 2가지를 알아보겠습니다.

+ 자바스크립트는 다른 언어처럼 void는 없고 return값이 없을 경우에 undefined를 반환합니다.

function a(){

//return값이 없다.

}

console.log(a());

함수 선언식(Function Declarations)

일반적으로 다른 언어에서 함수를 선언하는 것과 비슷한 형식입니다. 함수 선언에서의 특징은 함수 선언부를 다른 코드보다 먼저 읽고 실행합니다. 그래서 함수 선언 전에 호출을해도 정상적으로 동작하게 됩니다. 또한, Parameter 개수와 argument의 개수가 일치하지 않아도 오류가 나지 않습니다. 변수(firstname)은 초기화됐지만, 값이 할당되지 않았기 때문에 undefined라는 값을 가지게되는 것입니다 :)

console.log(Name()); // argument가 없이 함수를 호출했지만 undefined라는 값을 가짐. 또한 선언 전에 호출할 수 있다.

function Name(lastname) {

const firstname= "minsu";

return firstname + " " + lastname;

}

함수 표현식(Function Expressions)

함수는 선언식 말고 자바스크립트의 유연한 특징을 활영해서 선언한 '함수 표현식'이 있습니다.

const name = function(lastname){

const firstname = 'minsu'

return firstname + ' ' + lastname

}

console.log(name('Kim'));

호이스팅(Hoisting)

호이스팅은 자바스크립트 코드를 해석할 때 전역(global)에 선언된 코드를 최상의 위치로 끌어올려서 선언합니다. 즉, 전역으로 선언된 변수나 함수같은 아이들을 수집해서 전역 객체의 속성으로 미리 등록을 시켜줍니다. 그런 이유로 밑에서 선언된 변수를 선언되기 전에 위의 코드에서 사용할 수 있는 것입니다.

※주의, 실제 호이스팅이 물리적으로 코드가 최상단에 끌려올라가는 건 아니고, parser 내부적으로 그렇게 끌어올려서 처리만 하는 것입니다 :)

자바스크립트 엔진은 코드를 두 번 해석합니다. 

첫 번째 해석(컴파일) - Declaration 즉, 모든 변수 선언과 함수 선언같은 선언문을 메모리에 우선적으로 할당합니다. 

두 번째 해석(컴파일) - 위에서 선언된 변수에게 값을 할당합니다. 

const a; // 이렇게 맨 위로 호이스팅!! 실제로 코드가 올라가는 건 아니고 내부적으로 이렇게 수행합니다.

const a = 2; //전역으로 선언된 변수

-> const a; // JS엔진의 첫 번째 컴파일 (전역변수나 전역함수 우선적으로 메모리 할당)

-> a = 2; // JS엔진의 두 번째 컴파일 (값 할당)

arguments

함수의 argument는 arguments라는 객체에서 관리합니다.

함수가 호출되면 그 안에 arguments라는 local 변수가 자동 생성되고, 선언한 parameter보다 많은 argument를 보낼 수 있습니다!

object타입이므로 배열의 메서드는 사용할 수 없습니다(arguments.concat 이렇게 배열메소드 사용불가) 가변인자를 처리하는 함수를 만들때 arguments속성을 유용하게 사용합니다.

function sum(x,y) {

let total=0;

for(let i=0; i<arguments.length; i++){

console.log(arguments);

total+=arguments[i];

}

return total;

}

console.log(sum(1,2)); // 3

console.log(sum(1,2,3)); // 6

참고 : http://insanehong.kr/post/javascript-function/

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다