함수 정의
- 함수 선언문
- 함수 표현식
- Function 생성자 함수
함수 선언문
function example(param){
return param;
}이는 자바스크립트 엔진에 의해 다음과 같이 해석된다.
// 함수 표현식이기도 하다.
var example = function (param){
return param;
} 함수 표현식
var example = function(param){
return param;
}Function 생성자 함수
Function 생성자 함수를 이용해 함수를 생성할 수 있다.
함수 선언식, 함수 표현식은 Function 생성자 함수로 함수를 생성하는 것을 단순화 시킨 축약형이다.
var example = new Function('param','return param');그러나 Function 생성자 함수로 생성하는 일반적으로 사용하지 않는다.
함수 호이스팅
var variable = example(1); // 1
function example(param){
return param;
}함수 선언문의 경우, 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능하다. 이를 함수 호이스팅이라 한다.
자바스크립트는 ES6의 let,const를 포함하여 모든 선언(var,let,const,function,function*,class)를 호이스팅한다.
호이스팅은 해당 Scope의 선두로 옮겨진 것 처럼 동작하는 특성을 가진다. 즉, 선언되기 전에 참조가 가능하다는 말이다.
3가지 함수 정의 방법은 동작방식에 약간의 차이가 있다.
함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(Value Object)에 저장한다. 즉, 함수 선언,초기화,할당이 한번에 이루어진다. 그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다.
var variable = example(1); // TypeError
var example = function (param){
return param;
}함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생하기 때문에 TypeError가 발생한다.
변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다. 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어진다.
함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되므로 이 두가지를 구분하는 것은 중요하다.
매개변수
매개변수 vs 인수
var foo = function (p1, p2) { // 인자,매개변수(parameter)
console.log(p1, p2);
};
foo(1); // 1 undefined 인수(argument)Call by Value
function foo(primitive) {
primitive += 1;
return primitive;
}
var x = 0;
console.log(foo(x)); // 1
console.log(x); // 0원시타입이 인수가 함수의 매개변수로 전달되어 함수 내에서 값을 변경해도 원래의 인수 즉, x 값은 변경이 되지 않는다.
Call by Reference
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'Kim';
obj.gender = 'female';
}
var num = 100;
var obj = {
name: 'Lee',
gender: 'male'
};
console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}
changeVal(num, obj);
console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}함수 호출 시 참조 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수에 저장되어 함수로 전달되는 방식이다. 이때 함수 내에서 매개변수의 참조값이 이용하여 객체의 값을 변경했을 때 전달되어진 참조형의 인수값도 같이 변경된다.
..... 추후 추가
참고 및 출처 : https://poiemaweb.com/js-function
