Javascript 기본기 정리하고 넘어가기 - 4

July 28th 2018

Javascript 기본기 정리하고 넘어가기 - 4

6. Function

'Function도 객체이다'는 무슨뜻일까요? Javascript를 배우기 시작한지 얼마 되지는 않았지만, 저는 이 말을 많이 들었습니다. 하지만, Object에 property를 부여하듯, 실제로 function에도 property를 부여하고 그 값을 다시 불러올 수 있는지 몰랐습니다. function은 다른 object와 동일한 기능을 가지고 있습니다.

var fun = function() {};

fun['x'] = 9;
fun[0] = 'cat';
fun[1] = 'dog';

console.log(fun['x']); // ==> 9
console.log(fun[0]); // ==> 'cat'
console.log(fun[1]); // ==> 'dog'

function에 for 구문을 사용할 수 있다는 것도 알았습니다.

for (var k in fun) {
  console.log(k); // => '0', '1', 'x'
}

하지만, 위와 같이 사용하려면 굳이 function을 사용할 필요가 없을 것 같습니다. function의 특징으로는 무엇이 있을까요? 저는 function을 magic box라고 생각합니다. 그리고 그 박스 안의 내용을 언제든지 반복해서 사용할 수 있습니다.

function이라는 박스 안의 내용을 원할때 사용하기 위해서는 function이 담긴 변수 옆에 ()를 붙임으로써, function을 실행할 수 있습니다.

var fun = function() {
  console.log('Function is working!');
};

fun(); // ==> 'Function is working!'

function 키워드 바로 옆의 ()는 function을 정의하는데 사용되는 한 부분이고, fun 옆의 ()는 위에 정의된 function을 실행(invoke or run)하는데 사용합니다.

Function expression vs statement 일반적 expression과 마찬가지로 function expression도 어떠한 결과값을 도출합니다. function 내부에 코드가 명시되어 있어서 반환값이 있다고 착각할 수 있는데, 아래와 같이 expression은 return value가 꼭 있어야 합니다.

var fun1 = function() {
  console.log(2);
};

var fun2 = function() {
  return 2;
};

fun1(); // ==> undefined
fun2(); // ==> 2

Anonumous function function을 변수에 담아 위의 예와 같이 꺼내 쓸 수 있지만, 꼭 변수에 담지 않고서도 정의하자마자 function을 정의 후 ( )를 추가해 바로 실행할 수도 있습니다. 이 경우 res와 anony라는 변수에 2가 담기게 되고, 기존의 함수는 return 값을 반환했기 때문에 폐기가 됩니다.

var fun2 = function() {
  return 2;
};

var res = fun2();
var anony = (function() {
  return 2;
})();

이러한 방식은 일반적으로 사용하지는 않지만, 이후의 좀 더 깊은 개념인 scope 및 closure와 관련이 있습니다.

Handmade with .