인사이드 자바스크립트 (1)

Bee·2022년 2월 15일
0

자바스크립트

목록 보기
2/4

자바스크립트에서의 함수 생성 방법은 3가지가 있다.

1. 함수 선언문 (function statement)
2. 함수 표현식 (function expression)
3. Function() 생성자 함수

// 1. 함수 리터럴
function add(x,y){
return x+y;
}

함수명은 선택 사항이며, 함수명이 없는 함수를 익명함수라고 한다.

// 2. 함수 선언문 방식으로 함수 생성
function add(x,y){
return x+y;
}
console.log(add(3,4)); 
  • 함수 리터럴 형태와 같으나, 함수 선언문 방식으로 정의된 함수는 반드시 함수명이 정의 되어 있어야한다.

  • C/C++ 의 함수 정의 방식과 비슷하지만, function이란 키워드를 명시적으로 사용하며, 리턴값과 매개변수로 넘기는 변수 타입을 기술하지 않는 점에서 차이점을 가지고 있다.

// 3. 함수 표현식 방식으로 함수 생성
var add = function (x,y){
return x+y;
}
var plus = add;

console.log(add(3,4));
console.log(plus(5,6));
  • 함수 리터럴로 하나의 함수를 만들고 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 한다.
  • 함수의 이름이 없는 형태의 표현식을 익명 함수 표현식, 함수의 이름이 포함된 함수 표현식을 기명 함수 표현식이라고 한다.
// 함수 표현식 방식으로 구현한 팩토리얼 함수 
var factorialVar = function factorial(n){
if(n <= 1){
		return 1;
	}
	return n   * factorial(n-1);
};

console.log(factorivalVar(3)); // 출력값 6
console.log(factorial(3)); // 출력값 uncaught ReferenceError ..
  • 함수 표현식에서는 함수 이름이 선택 사항이지만, 함수 이름을 이용하면 함수 코드 내부에서 함수 이름으로 함수의 재귀적인 호출이 가능하다.
 
// 4. Function() 생성자 함수를 이용한 add() 함수 생성
var add = new Function('x','y','return x+y');
console.log(add(3,4));
  • 자바스크립트의 함수도 Function()이라는 기본 내장 생성자 함수로 부터 생성된 객체라고 볼 수 있다. 함수 선언문이나, 함수 표현식방식도 함수 리터럴 방식을 사용하지만, Function() 생성자 함수로 생성된다고 볼 수 있다.

  • 하지만 일반적으로 Function() 생성자 함수를 사용한 함수 생성 방법은 자주 사용되지 않는다.

함수 호이스팅

함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음 부터 시작한다.
그래서 함수 표현식 사용을 권장한다.

함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(Instantiation)초기화(Initilalization)의 작업이 분리 되기 때문이다.

profile
web front developer

0개의 댓글

관련 채용 정보