함수 선언문을 통해 선언한 함수는 호이스팅되며, 함수가 해석되는 시점에 메모리에 할당되어 실행된다.
function funcName(params) { result = params * 2 return result; }; let value = funcName(3); console.log('Hello ' + value);
- 함수 표현식 (함수 리터럴)을 사용한 함수는 호이스팅되지 않는다.
- 변수만 선언된 상태로, 함수는 실행되는 시점에 변수에 할당된다.
let funcName = function (params) { console.log('Hello ' + params); }; funcName("Han");
자바스크립트에는 익명함수를 정의한 후 바로 실행하는 즉시 실행 함수 (Immediately Invoked Function Expression, IIFE) 를 정의할 수 있다.
즉시 실행 함수는 아래와 같이 표현한다.
(function() { console.log("IIFE"); })();
함수 정의 구문을 괄호() 로 감싼 후 함수를 호출하고 있다.
즉, 함수 선언문을 그룹연산자로 묶으면 함수가 평가되어 괄호 내부는 함수 객체의 참조값으로 바뀌며, 이를 즉시 실행하는 형태이다.이러한 즉시 실행 함수를 사용하면 함수를 정의하는 동시에 실행할 수 있게 된다.
만약 즉시 실행 함수 전체를 변수에 할당하면 변수에는 함수의 결과값이 저장된다.
또한, 즉시 실행 함수에 인수값을 넘기고자 한다면 아래와 같이 한다.
(function(name) { console.log("Hello " + name); })("yohan");
// → Hello yohan
즉시 실행 함수 내부에 변수를 선언하면 이 변수는 함수 내부에서만 사용 가능한 지역변수가 된다.
따라서 즉시 실행 함수를 이용하면 전역 공간을 오염시키지 않고 코드를 작성할 수 있다.
특별히 이름 영역을 선언할 방법이 없는 자바스크립트에서는 즉시 실행 함수 기법을 통해 유효범위를 사용할 수 있다.특히 여러 라이브러리를 사용하여 개발을 진행할 경우 라이브러리 내부의 전역변수와 충돌을 방지하기 위해서 많이 사용되며, 라이브러리 자체도 즉시 실행 함수로 감싸져있는 경우가 많다.
(function() { // 코드 })();
function outer() { let a = 1; function inner() { let b = 2; console.log("inner function: ", a); } console.log("outer function: ", b); inner(); } outer(); //-> outer function: 1 //-> inner function: 2
중첩함수 : 함수 안의 함수
자바스크립트에서 함수를 호출할 때 정의된 파라미터의 수보다 적은 수의 인수를 전달하게 되면 해당 파라미터는 함수 내부에서 undefined 가 된다.
function hello(name, age) {
console.log(name + ', ' + age);
}
hello("Alice"); //-> Alice, undefined
위 함수에서 함수의 두번째 parameter인 age의 값은 함수 호출 시 값을 지정해 주지 않아 undefined 가 된 것을 확인할 수 있다.
함수 내부에서 Arguments 객체를 이용하면 전달된 파라미터의 수와 상관없이 함수를 호출할 때 전달된 모든 데이터를 꺼내 올 수 있다.
즉, 함수 호출 시 넘긴 인수는 차례대로 arguments 유사 배열에 저장되며, 배열과 유사하게 사용할 수 있다.
function hello() {
console.log(arguments[0] + ', ' + arguments[1]);
}
hello("yohan", 11); //-> yohan, 11
Arguments 객체는 length 프로퍼티를 가지고 있으므로, 이를 이용해 함수 호출 시 넘어온 인수의 개수를 알 수 있습니다.
만약 인수의 갯수가 일정하지 않은 함수를 사용할 경우 이를 이용할 수 있습니다.
function sumAll() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(sumAll(1, 2, 3, 4, 5)); //-> 15
위 함수는 인수로 전달받은 모든 숫자의 합을 구해 그 결과를 반환하는 함수이다.
이렇게 인수의 개수가 일정하지 않을 때 Arguments 객체의 length 프로퍼티를 이용해 각각의 인수 값을 순회해 계산 결과를 구할 수 있다.
자바스크립트에서 함수는 일급 객체이다. 자바스크립트의 함수가 일급 객체로써 가지는 특성은 여러가지가 있다.
1) 함수는 변수에 대입할 수 있고, 배열의 요소에 대입할 수 도 있다.
2) 함수는 다른 함수의 인수로 사용할 수 있고, 함수의 반환값으로 사용할 수 도 있다.
3) 함수는 객체의 생성자로 사용할 수 있다. 클래스 구문이 없는 자바스크립트에서는 객체를 생성할 때 함수를 사용하게 된다.
4) 함수는 객체의 메서드로 사용된다. 함수를 객체 프로퍼티에 등록함으로써 객체의 메서드와 같이 사용할 수 있다.