JavaScript의 ES6 화살표 기능

이 게시물에서는 ES6 화살표 함수와 기본 매개변수 사용에 대해 다룰 것입니다. 하단에 이 게시물의 무료 동영상 링크가 있습니다.

함수 표현식

함수 표현식은 함수가 변수 내에 저장되는 경우를 설명합니다. 함수에 이름이 있는 명명된 함수 식을 선언할 수 있지만 일반적으로 함수 식에는 이름이 없으므로 이를 익명 함수라고 합니다. 익명 함수는 함수를 다른 함수의 인수로 전달하려는 경우에만 특히 유용합니다. 이것이 가능한 이유는 JavaScript에서 함수가 객체이기 때문입니다. 함수 표현식을 호출하거나 호출할 때 함수 이름이 아닌 변수 이름을 사용합니다. 함수 표현식을 사용할 때 JavaScript 인터프리터는 함수가 초기화되는 줄에 도달할 때까지 함수에 대해 아무 작업도 수행하지 않습니다. 몇 가지 함수 표현식의 예를 살펴보겠습니다.

const myFavouriteGame = function(game) {
  return `My favourite game is: ${game}.`
};
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

위의 예는 익명 함수로 초기화되는 myFavouriteGame이라는 변수를 선언합니다. 이 함수는 매개변수 game을 사용합니다. 함수 본문 내에서 템플릿 리터럴을 사용하여 game 값이 있는 문자열이 반환됩니다.

화살표 함수

Es6는 키워드 function을 생략할 수 있음을 의미하는 화살표 함수 구문을 도입했습니다. 아래는 위 예제의 반복이지만 이번에는 화살표 기능을 사용합니다.

const myFavouriteGame = (game) => {
  return `My favourite game is: ${game}.`
};
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

한 줄 화살표 기능

함수에서 값을 반환하기만 하면 되는 경우 이를 더 단순화하고 중괄호와 키워드 return을 생략하여 한 줄만 사용할 수 있습니다. 아래는 위와 같은 예제이지만 이번에는 한 줄 화살표 기능을 사용합니다.

const myFavouriteGame = (game) => `My favourite game is: ${game}.`;
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

화살표 함수 매개변수

게임 매개 변수의 함수에 대한 인수로 문자열 Monopoly를 전달하고 있습니다. 화살표 함수를 사용하면 하나의 매개변수만 사용하는 경우 함수를 더 단순화할 수 있습니다. 이 경우 아래 예와 같이 매개변수 주변의 괄호를 생략할 수 있습니다. 그러나 이것은 하나의 매개변수만 사용되는 경우에만 가능합니다. 둘 이상의 매개변수를 사용하는 경우 괄호를 사용해야 합니다.

const myFavouriteGame = game => `My favourite game is: ${game}.`;
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

기본 매개변수

ES6에는 기본 매개변수도 도입되었습니다. 이를 통해 함수가 호출될 때 인수가 제공되지 않고 정의되지 않은 경우 매개 변수를 사용할 때 기본값을 설정할 수 있습니다. 아래의 첫 번째 예는 기본 매개변수를 사용하지 않고 반환 값으로 정의되지 않은 경우 어떤 일이 발생하는지 보여줍니다.

const myFavouriteGame = game => `My favourite game is: ${game}.`;
myFavouriteGame();
//Returns ---> 'My favourite game is: undefined.'

다음으로 동일한 예를 살펴보지만 이번에는 함수에서 기본 매개변수를 설정합니다. 이렇게 하려면 괄호를 사용해야 합니다. 이렇게 하지 않으면 구문 오류가 발생합니다.

const myFavouriteGame = (game = "Monopoly") => `My favourite game is: ${game}.`;
myFavouriteGame();
//Returns ---> 'My favourite game is: Monopoly.'

마지막으로 동일한 예제를 살펴보지만 이번에는 함수가 호출될 때 인수를 전달합니다.

const myFavouriteGame = (game = "Monopoly") => `My favourite game is: ${game}.`;
myFavouriteGame("Chess");
//Returns --> 'My favourite game is: Chess.'

나머지 매개변수

임의 개수의 인수를 사용하는 함수를 만들고 싶다면 나머지 매개변수를 사용할 수 있습니다. 나머지는 세 개의 점(…)으로 구성됩니다. 함수에 전달된 인수는 배열 내부에 저장되며 이 배열은 함수 본문 내에서 액세스할 수 있습니다.

const myFavouriteGames = (...games) => `We have ${games.length} games`;
myFavouriteGames("Monopoly", "Chess");
//Returns ---> 'We have 2 games'

위의 예는 이전 예를 수정하고 나머지 매개변수와 게임이라는 배열을 사용합니다. 함수를 호출할 때 Monopoly와 Chess라는 두 개의 인수를 전달합니다. 함수 내에서 게임 배열의 길이를 반환하도록 문자열을 변경했습니다. 두 개의 인수를 전달할 때 반환된 문자열은 두 개의 게임이 있음을 나타냅니다.

이 기사를 즐겼기를 바랍니다. 여기에 기사 비디오가 있습니다.

.

댓글, 질문 또는 피드백을 자유롭게 게시하고 더 많은 콘텐츠를 보려면 저를 팔로우하세요!