[Javascript] Arrow Function (ES6 버전)

지난 포스팅에서 Javascript의 ES6버전 이상에서 사용할 수 있는 키워드나 문법들을 알아보았습니다. 여러 가지가 있었지만 자세하게는 본 것이 아니기에 하나씩 다시 포스팅하려 합니다.

 

 

이번 포스팅에서는 Arrow Function에 대해서 알아보도록 하겠습니다.

---

Javascript Arrow Function은 무엇인가

화살표 함수라고 표현하기도 모호하고 프로그래밍의 경우는 원어 그대로 사용하는 것이 더 직관적일 수 있기에 저는 Arrow function이라 사용합니다. Arrow function은 특별한 함수가 아닌 키워드를 의미합니다.

 

기존 함수의 생성은 아래와 같이 만들었습니다.

function myFunc1() {
	console.log('myFunc1');
}

let myFunc2 = function() {
	console.log('myFunc2');
}

일반적인 함수를 만들때 키워드는 function을 사용하며 변수를 만들고 대입할 수도 있습니다.

 

다음은 Arrow function으로 함수를 만드는 방법입니다.

let myFunc1 = () => {
	console.log('myFunc1');
}

Arrow function의 키워드는 => 입니다. 화살표 모양으로 생겼다 하여 붙인 이름 같습니다. 기본적인 형태를 보았으니 사용법을 조금 더 자세하게 알아보겠습니다.

---

Javascript Arrow Function 문법

함수를 만드는 방법은 => 키워드를 이용하는 것입니다. 기본적인 형태는 아래와 같습니다.

let functionName = (arg1, arg2, arg3, ...) => { ... }

• 변수를 선언할때와 같이 이름을 만들어 줍니다.
• arg1, arg2, ... argN은 함수로 받을 argument입니다.
• => 키워드를 사용하고 함수 블록을 만들어 줍니다.

Arrow function은 일반 함수를 만드는 것과 마찬가지로 종류가 여러 가지가 있습니다.

---

Arrow function 사용(1): No argument, sigle line expression

let myFunc = () => console.log('myFunc');

Argument가 없으면 괄호만 사용합니다. 그리고 함수의 블록을 사용해야 하지만 한 줄로 끝나는 함수라면 블록 없이 바로 사용하는 문법을 넣어주셔도 됩니다.

 

Arrow function 사용(2): One argument

let myFunc = arg => console.log(arg);

console.log('koonsland');

Argument가 하나라면 괄호 없이 사용할 수 있습니다. 마찬가지로 함수 블록도 한 줄이라면 사용할 필요 없습니다. 매우 간단한 함수의 형태가 되는것 같네요.

 

Arrow function 사용(3): Multi arguments, multi line expression

let myFunc = (number, name) => {
	console.log(`number: ${number}`);
	console.log(`name: ${name}`);
}

myFunc(1, 'koonsland');

Argument가 여러개일 경우는 괄호를 사용해서 표현합니다. 함수 블록이 여러 줄이라면 이 역시 중괄호를 사용해서 블록을 만들어 줍니다.

 

Arrow function 사용(4): Arguments 키워드

function myFunc() {
	console.log(arguments);
}

myFunc('a', 'b', 'c'); // ['a', 'b', 'c']

일반적인 함수에서는 arguments 키워드를 사용할 수 있습니다. myFunc() 함수은 argument인자를 받지 않는 함수임에도 불구하고 함수를 사용할 때 argument값을 넣어주면 내부에서 argument라는 키워드를 이용해서 값을 가져올 수 있습니다.

 

Arrow function은 사용할 수 없습니다. 다만 인자가 여러개임을 표현해 주는 방법이 있습니다.

let myFunc1 = () => {
	console.log(arguments);
}

myFunc1('a', 'b', 'c'); //arguments is not defined

let myFunc2 = (...arg) => {
	console.log(arg);
}

myFunc2('a', 'b', 'c'); // ['a', 'b', 'c']

---

이번 포스팅에서는 ES6 이상에서 사용할 수 있는 Arrow function에 대해서 알아보았습니다. function 키워드를 사용해도 되고 => 키워드를 사용해서 만들어도 됩니다. 새로운 문법이 등장하면 그 문법이 익히고 사용해보는 것이 중요하다 생각합니다. 도움이 되셨으면 합니다. 이상입니다.