[ES6] Arrow Function 과 Default Value

Arrow Functions

arrow function 은 기존 자바스크립트에서 함수의 모습을 개선한 것 입니다.

사용 방법을 살펴보도록 합시다.

우선 arrow 는 => 을 의미합니다. 기존의 function 이라는 키워드를 없애고 이를 arrow 로 대체한 것이죠.

우선 arrow function 을 사용하지 않은 기존의 예시부터 살펴보겠습니다.

const nameList = ["minsung", "sungbin"]

const nameLength = nameList.map(function(name){
    return name.length;
})

console.log(nameLength); // [7,7]

 

이를 arrow function으로 개선하면 다음과 같습니다.

const nameLength = nameList.map(name => {
    return name.length;
})

이 때 argument 값이 두 개가 필요하다면 괄호를 통해 묶어줍니다.

 

또한 return 을 생략하여 더 간결하게 사용할 수 있습니다.

이를 implicit return 이라고 합니다.

const nameLength = nameList.map(name => name.length);

 

위의 경우,name.length 라는 단일 값을 반환하지만 object 를 반환해야하는 경우에는 어떻게 해야할까요?

이 경우에도 return 을 생략하여 간단히 쓸 수 있습니다. 다만 object 를 {} 로 묶어줘야 합니다.

const nameList = ["minsung", "sungbin"]

const nameLength = nameList.map((name,index) => ({
    nameLength:name.length,
    index
}));

console.log(nameLength);
// [ { nameLength: 7, index: 0 }, { nameLength: 7, index: 1 } ]

 

 

Arrow Function 을 사용하지 않아야 하는 경우

arrow function 이 모든 순간에 만능인 것은 아닙니다.

this 키워드를 사용해야하는 경우에는 이 방법이 문제를 야기할 수 있습니다.

 

예시를 통해 살펴보겠습니다.

단순한 button을 하나 만들고

 <button>Click Me</button>

 

이에 대해 click 이벤트를 추가해주었습니다.

button 에 이벤트를 추가하게 되면 해당 함수 안에서 this 는 바로 그 이벤트가 걸린 객체, button 이 됩니다.

const button = document.querySelector("button");

button.addEventListener("click",function(){
    console.log(this);
})

// <button>Click Me</button>

 

만일 이 때 arrow function 을 사용하게 되면 더 이상 this 는 button 이 아니게 됩니다. 대신 window 객체가 됩니다.

const button = document.querySelector("button");

button.addEventListener("click",() => {
    console.log(this);
})

// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

 

Array Operation

이번에는 자주 사용되는 함수들에 대해서 알아보도록 하겠습니다.

find

Array.prototype.find 는 제공되는 조건을 만족하는 첫번째 값을 반환합니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const foundName = nameList.find(item => item.includes("_lee"));

console.log(foundName); // sungbin_lee

 

filter

Array.prototype.filter 는 제공되는 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const filterName = nameList.filter(item => item.includes("_lee"));

console.log(filterName); // [ 'sungbin_lee', 'sungjun_lee' ]

 

ForEach

Array.prototype.forEach() 는 주어진 함수를 배열의 각 요소에 실행합니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const forEachOnlyName = nameList.forEach(item => {
    console.log(item.split("_")[0]);
});

/*
minsung
sungbin
junseok
sungjun
*/

 

map을 사용하면 더 간단히 사용할 수 있습니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const mapOnlyName = nameList.map(item => item.split("_")[0]);

console.log(mapOnlyName);

// [ 'minsung', 'sungbin', 'junseok', 'sungjun' ]

 

Default Value

ES6 function 에서 한 가지 더 추가된 점은 default value입니다.

이는 arrow function 과 기존의 함수에서 둘 다 적용되는 문법입니다.

 

간단히 자기소개 하는 예시를 만들어보았습니다.

function intro(name){
    return "My name is " + name;
}

console.log(intro("minsung"));
// My name is minsung

 

만약 여기서 사용자가 매개변수를 입력하지 않는다면 별로 좋지 않은 결과가 출력 됩니다.

console.log(intro());
// My name is undefined

 

이를 해결하기 위해서는 별도로 지정을 해줘야 합니다.

function intro(name){
    return "My name is " + (name || "anonymous");
}

console.log(intro());
// My name is anonymous

 

이를 위해 parameter 에 default value 를 지정하면 더 가독성 좋게 편하게 위 기능을 수행할 수 있습니다.

function intro(name="anonymous"){
    return "My name is " + name;
}

console.log(intro());
// My name is anonymous

 

물론 arrow function 을 사용하면 더 간단하게 쓸 수 있습니다.

const intro = (name="anonymous") => "My name is " + name;

console.log(intro());
// My name is anonymous