Javascript의 함수를 짧게 표현하는 화살표 함수(Array Function)

화살표 함수

자바스크립트에서 함수를 선언하는 방법인 함수 선언문, 익명 함수 이 두개의 방법 외에도 함수를 표현할 수 있는 방법이 있다. 그것이 바로 화살표 함수이다.

화살표 함수는 함수 선언문, 익명 함수와는 다르게 function구문을 사용하지 않고 화살표를 사용하기 때문에 코드의 길이가 줄어든다는 장점은 있으나, 눈에 익숙하지 않다면 가독성이 조금 떨어진다.

화살표 함수 사용법

자바스크립트에서 화살표 함수 선언법은 아래와 같다.

화살표 함수

let noPara = () => expression // 매개변수가 필요없을 시

let onePara = Parameter => expression // 매개변수가 하나일 시

let multiPara = (Parameter1, Parameter2) => expression // 매개변수가 여러개일 시

 

 

= 는과 > 오른쪽 홀꺽쇠가 합쳐져서 만들어진 화살표 =>를 기준으로 왼쪽은 매개변수를 넣고, 오른쪽은 식을 넣으면 된다. 그리고 자바스크립트가 실행되서 함수가 호출될 때 인자 값이 식을 통해 바로 반환되게 된다.

매개변수가 필요없는 함수이면 ( ) 괄호를 생략할 수 없이 반드시 사용해야 한다.

매개변수가 하나일 시 ( ) 괄호를 생략할 수 있다.

매개변수가 여러개일 시 매개변수를 ( ) 괄호로 감싸야 한다.

화살표 함수 예제

let sum = (a, b) => a + b;

/* 화살표 함수를 사용하지 않고 익명 함수를 사용했을 경우

let sum = function(a, b){
	return a + b;
};

*/

console.log(sum(10, 20)); // 30

 

 

만약 화살표 함수에서 식을 여러개를 넣아야 한다면 식에 { } 중괄호 를 사용하고 반환값이 있는 경우 return 반환문 을 사용해야 한다.

식이 여러개인 화살표 함수 (두개의 인자값 사이의 숫자들을 배열로 반환)

let betweenArr = (a, b) => {

	let result = [];
    
	for(i = a; i <= b; i++){
		result.push(i);
	}
    
	return result;
};

console.log(betweenArr(10,20)); // [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]