(Javascript) 자바스크립트 심화 (2) 값으로의 함수

안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘은 자바스크립트 함수가 동작하는 원리를 조금더 심화해서 알아보고자합니다.

자바스크립트에서의 함수는 다른 언어와 조금 다르게 값으로의 성질을 가지고 있습니다.

그렇기 때문에 다양한 형태로 사용이 가능합니다.

함수의 심화학습! 값으로써의 함수 ! 바로 시작하겠습니다.

1.인자로써의 함수(콜백)

함수는 값과 같은 역할을 하기 때문에 다른 함수의 인자로 전달될 수 있습니다.

아래의 예제를 한번 보시겠습니다.

function cal(func, num){
	return func(num)
}

function increase(num){
	return num+1
}

function decrease(num){
	return num-1
}

alert(cal(increase,1));
alert(cal(decrease,1));

함수 cal 은 다른 함수 하나와, 숫자하나를 받아 실행하는 함수입니다.

따라서 cal(increase,1) 은 return increase(1) 을 실행하고 increase 함수로 들어가 1+1 을 실행합니다.

위의 예제의 결과는 아래와 같습니다.

2. 객체의 값으로써의 함수

함수는 마찬가지로 객체에 담겨있는 하나의 메소드가 될 수도 있습니다.

아래의 예제를 보시겠습니다.

function cal(mode){
	var funcs = {
		'plus' : function(left, right){return left + right},
		'minus' : function(left, right){return left - right}
	}

	return funcs[mode];
}

alert(cal('plus')(2,1));
alert(cal('minus')(2,1));

cal 함수는 mode 를 인자로 받아 그 내부에서 funcs 라는 객체를 생성하고 최종적으로는 funcs[mode]를 리턴합니다. 호출되는 객체의 값인 mode 는 'plus' 혹은 'minus' 로써, left 와 right 를 인자로 받아 계산하는 함수입니다. 즉 함수는 객체 내부의 하나의 값으로 들어갈 수 있고, 이렇게 들어간 함수를 메소드라고 부릅니다.

위에서 하나의 alert(cal('plus')(2,1)) 에서 cal('plus') 는 funds['plus'], 즉 funcs라는 객체 내부 값인 'plus' 를 호출하고 그 값은 function이기 때문에 그 뒤에 온 2 와 1을 인자로 받아 function(2,1) 을 실행합니다.

경고창은 3을 출력합니다.

이러한 출력은 함수자체가 리턴될수도 있다는것을 말해주는 좋은 예입니다.

3. 배열 원소로써의 함수

함수는 마찬가지로 값이기 때문에 하나의 배열의 원소로써의 기능도 할 수 있습니다

var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input);

process 라는 배열에서 각 function(input) 이라는 각각의 함수는 하나의 원소이고, 

for 문을 통해서 각 원소를 돌며 각 함수에 접근해 input 인자로 하여 input 을 수정합니다.

오늘은 정말 간단한 예들을 통해 값으로써의 기능을 하는 JS 에서의 함수에 대해 알아보았습니다.

지금은 이런것들이 왜 쓰이는지 아직 어려운것 같습니다... 하지만 이러한 기능들이

자바스크립트에서의 또 다른 특징적인 기능이라고 하니 인내를 가지고 좀만 더 화이팅 해보도록 합시다 :) 

지금까지 영감을 주는 개발자 

방민방민이었습니다.

감사합니다 :)