Skip to content

자바스크립트 함수

javascript1 min read

함수의 특수한 속성

자바스크립트에서 함수는 객체이다. 다른 객체들과 차이점은 내부 속성인 Call 을 가지고 있다. Call 에는 함수의 실행동작이 정의되어 있다. 코드로 접근할 수는 없다.

함수 오버로딩

자바스크립트는 함수 오버로딩이 없다. 대신 함수의 arguments 를 이용해서 개수를 구하고 이를 사용해 수행할 동작을 결정하면 가능하긴 하다.

1function sayMessage(msg) {
2 if (arguments.length === 0) {
3 msg = 'default message';
4 }
5
6 console.log(msg);
7}
8
9sayMessage();
10sayMessage('Hello');

모든 함수는 항상 값을 반환한다. 아무 것도 return 하지 않으면 undefined 가 반환된다.

1급 함수

자바스크립트 함수는 1급 함수 이다. 자바스크립트에서 함수는 객체이다. 변수, 배열, 객체에 저장될 수 있다. 함수의 매개변수나 반환값으로도 함수가 사용될 수 있으며, 함수가 객체이기 때문에 속성도 가지고 있다. 그래서 자바스크립트는 1급 함수의 조건을 만족시킨다. 또한 return 키워드를 사용하면 언제든지 함수를 취소시킬 수 있다.

함수에 매개변수 전달하기

함수에 매개변수를 전달하지 않아도 에러가 나지 않는다. 전달하지 않은 인수는 undefined가 된다. 추가로 매개변수를 전달해도 에러가 나지 않는다. 정의되지 않은 추가 매개변수는 arguments 객체를 통해 접근할 수 있다.

arguments

함수에 전달된 매개변수를 저장하고 있는 배열 비슷한 객체.

arguments.callee

함수 scope에서 실행중인 함수를 참조하는 self-reference(자기참조) 속성. arguments.callee() 를 이용해서 재기호출을 할 수도 있다.

함수 인스턴스 length, arguments.length

함수 인스턴스에도 length 속성이 있고 arguments 속성에도 length 속성이 있다. 함수 인스턴스의 length 속성은 함수에 정의된 매개변수의 수를 반환하며, arguments의 length는 실제로 전달된 매개변수의 수를 반환한다. 함수 내에서 정의된 매개변수의 수를 알고 싶을 경우, arguments.callee.length 를 사용한다.

1var func = function(arg1, arg2) {
2 console.log('arguments.length = ' + arguments.length);
3 console.log('arguments.callee.length = ' + arguments.callee.length); // 함수 내에서 정의된 매개변수의 수를 알고 싶으면 arguments.callee.length 를 사용한다.
4};
5console.log('function instance length = ' + func.length);
6func('arg1', 'arg2', 'arg3');

함수를 정의하는 3가지 방법

1// 1. 함수 생성자
2var addConstructor = new Function('x', 'y', 'return x + y');
3
4// 2. 함수 선언문
5function addStatement(x, y) {
6 return x + y;
7};
8
9// 3. 함수 표현식
10var addExpression = function(x, y) {
11 return x + y;
12}
13
14console.log(addConstructor(2, 3), addStatement(2, 3), addExpression(2, 3));

함수를 호출하는 4가지 패턴

  1. 함수로서: func();
  2. 메소드로서: obj.func();
  3. 생성자로서: var person = new Person();
  4. apply() 또는 call() 을 사용해서 (apply와 call의 차이는 함수에 매개변수를 전달하는 방식 뿐이다.)
1var obj = {
2 func: function() {
3 console.log(this.name, arguments[0], arguments[1]);
4 }
5};
6
7var person1 = {name: 'john'}
8var person2 = {name: 'marry'}
9obj.func.call(person1, 'male', '17 years'); // obj.func 가 person1 객체의 메소드처럼 동작한다.
10obj.func.apply(person2, ['female', '16 years']); // obj.func 가 person2 객체의 메소드처럼 동작한다.

익명함수

이름이 없는 함수로서, 다른 함수의 매개변수로 전달되는 경우가 많다.

자기호출익명함수

익명함수를 만들자마자 바로 함수를 호출하는 방법 3가지 방법으로 호출할 수 있으며, 개인적으로 첫번째 방법이 가장 이해하기 쉽다고 느껴진다.

1// 첫번째 방법
2(function(msg) {
3 console.log(msg);
4})('hi');
5
6// 두번째 방법
7(function(msg) {
8 console.log(msg);
9}('hi'));
10
11// 세번째 방법
12!function sayHi(msg) {
13 console.log(msg);
14}('hi');

중첩 함수

함수는 무한대로 중첩할 수 있으며, 중첩된 함수에서 this 는 header object (브라우저에서는 window)를 가리킨다.

1// 바깥 함수와 안의 함수를 바로 실행시켰을 때 this는 window를 가리킨다.
2var outerFunc = function () {
3 var innerFunc = function () {
4 console.log(this);
5 }();
6}();

교차함수 (higher-order function)

함수를 인수로 받거나 반환하는 함수

1var foo = function(f) {return f;}
2var bar = foo(function() {console.log('hi');});
3bar();

함수 호이스팅(hoisting)

자바스크립트는 코드를 실행하기전에 함수선언문을 먼저 해석하여 실행 스택 / 컨텍스트에 추가한다. 이것을 밑에 있는 함수선언문을 끌어올린다는 의미에서 hoisting(끌어올리다)이라고 한다. 단, 함수표현식으로 정의된 함수는 hoist 하지 않는다.

1(function() {
2 sayYo(); // sayYo 함수선언보다 먼저 호출되었지만 정상적으로 동작한다.
3 function sayYo() {
4 console.log('Yo');
5 }
6})();
7
8console.log(sum(2, 3));
9function sum(x, y) {return x + y;};

재귀 호출

자기를 스스로 여러번 호출한다.

1var countDownFrom = function countDownFrom(num) {
2 console.log(num);
3 num--;
4 if (num < 1) {
5 return false;
6 }
7 countDownFrom(num);
8};
9countDownFrom(5);
© 2025 by Kyunghwa Yoo.