Posts JavaScript - 자바스크립트의 다양한 함수 생성법과 즉시 실행 함수
Post
Cancel

JavaScript - 자바스크립트의 다양한 함수 생성법과 즉시 실행 함수


JavaScript - 자바스크립트의 다양한 함수 생성법


🚀 자바스크립트의 함수 생성법

이전 포스팅에서 객체 리터럴 이라는 표기 방법에 대해 말씀드린 적이 있습니다.

이전 포스팅 : https://chanhuiseok.github.io/posts/js-1/

객체를 생성할 때, 중괄호 ({ })를 사용하여 만들면 그것을 객체 리터럴을 이용해 객체를 생성하였다고 말합니다. 함수는 기본적으로 함수 리터럴을 통해 만들 수 있습니다.

익숙하게 c나 java에서도 함수를 중괄호({ })로 만들듯이, 자바스크립트도 동일합니다.

이러한 함수 생성 방법을 함수 리터럴 이라고 이름붙일 뿐입니다.

1
2
3
function func(x, y, z){
    return x * y * z;
}
  • 함수 리터럴 방식으로 생성할 때, function 키워드를 붙이고 함수명과 매개변수값을 작성합니다.
  • 자바스크립트는 함수명이 없어도 괜찮은데, 이를 익명 함수 라고 부릅니다. 단 함수 선언문 방식에서는 함수명이 반드시 존재해야 합니다. 이는 아래에서 살펴보겠습니다.
  • 함수 몸체 부분을 중괄호 ({ })로 감쌉니다.

👍 함수 선언문

1
2
3
4
5
6
7
var bar = 0;

function func(x){
    return x;
}

func(bar);

위의 func 함수가 함수 선언문 방식으로 선언된 함수입니다. 보통 익숙한 모습의 함수 선언법입니다. function 키워드와 함수명을 같이 포함하여 선언하였습니다. 함수 선언문 방식에서는 함수명을 반드시 적어야 합니다.


👍 함수 표현식

1
2
3
4
var mulFunc = function(x, y){
    return x * y;
}
console.log(mulFunc(1, 2));

이전 포스팅에서 중점적으로 언급했던 것은, 함수는 일급 객체라는 점이었습니다. 그래서 함수는 변수나 배열, 객체 프로퍼티 등에 대입할 수 있는 하나의 값 으로 생각할 수 있습니다.

그러므로 함수를 어떠한 변수에 대입하는 것도 가능합니다. 그리고 위처럼 함수 리터럴로 익명 함수를 생성한 것을 특정 변수에 저장하는 형태함수 표현식 이라고 합니다.

위에서 함수 변수는 mulFunc가 되며, 함수 표현식으로 생성한 함수는 함수 변수를 통해 호출하게 됩니다.


👍 Function() 생성자로 생성하기

1
2
var squareFunc = new Function('x', return 'x * x');
console.log(squareFunc(2)); // 4

자바스크립트의 함수는 객체입니다. 그리고 객체의 Object, 배열의 Array 등과 같이 기본 생성자 함수 Function()가 존재합니다. 이를 통해 위처럼 함수를 만들 수도 있습니다. 매개변수 값들과 맨 마지막 인자에는 함수 body 부분을 작성해 줍니다. 그러나 이 방식은 많이 사용하지는 않습니다.


👍 즉시 실행 함수

함수의 기본 생성법에 분류되는 것은 아니지만 추가로 한 가지 살펴볼 만한 작성법이 있습니다.

아래 코드와 같은 형식을 사용하면 즉시 실행 함수라고 부르고, 함수가 정의되자마자 바로 실행되는 특성을 가집니다.

이는 자바스크립트에서 변수 이름 중복으로 인한 문제 등을 해결할 때 많이 사용하는 패턴입니다. 또한 최초 한 번만 실행되므로 초기화 코드 작성에도 용이합니다.

이에 대해서는 함수 호이스팅이나 스코프 등을 공부하신 뒤에 그 용도가 더 와닿을 수도 있습니다. 즉시 실행 함수에 대한 자세한 부분은 추후의 다른 포스팅에서 다루도록 하겠습니다.

1
2
3
4
(function (x){
	console.log(2 * x);
})(3)
// 6

( .. )() 에서 .. 부분에 함수를 작성하고, 두번째 () 안에는 매개변수에 들어갈 인자를 넣습니다. 작성하는 함수는 익명 함수여도 되고, 함수 이름이 있어도 상관 없습니다.


JavaScript - 자바스크립트의 함수는 일급객체이다

JavaScript - 자바스크립트 프로토타입(prototype)