Javascript #12 - Arrow Function (함수 part.3)

예전에 React.js에 대해서 간단히 훑어본적이 있었는데, 그때 Arrow Function에 대한 개념을 접했던 것 같다, 프로젝트 혹은 현업에서 좋은 코드 중 하나는 물론 시간과 공간을 효율적으로 사용하는 코드이기도 하지만, 가독성이 좋은 것도 크게 한 몫 한다고 생각하기 때문에 별도로 포스팅을 해보았다.

 

★ Arrow Function

기존 함수선언의 번거로움을 해소시켜주는 친구. 예를 들자면

// 기존 함수 선언

const prinHello = function () {
	console.log('Hello World!');
};


// Arrow Function

const printHello = () => console.log('Hello World!');

Arrow Function은 함수가 한 줄 일때는 {}과 return도 생략이 가능하다. (함수가 두 줄 이상일때는 {}, return 써야함)

const sum = (x, y) => x + y;


// 기존 함수선언이었다면?

const sum = function(x, y) {
	return x + y;
}



// 함수가 두 줄 이상일때?

const operatorFunc = (x, y) => {
	// logic...
    return a * b;
}

참고로 Arrow Function은 기본적으로 anonymous Function이다.

 

★ IIFE : Immediately Invoked Function Expression (자주 쓰이진 않음)

함수의 선언과 호출을 동시에!

(function Hello() {
	console.log('Hello World!');
})();

함수 전체를 괄호로 묶고, 다시 함수를 호출하듯이 ();를 사용하면 함수를 선언과 동시에 호출할 수 있다.