JavaScript 화살표 함수:단계별 가이드

자바스크립트 화살표 함수는 함수를 선언하는 방법입니다. 화살표 함수는 JavaScript 함수를 보다 효율적으로 작성하고 보다 간결한 구문을 사용하는 데 사용할 수 있습니다. 화살표 함수 구문은 단일 표현식에 대한 암시적 반환을 지원합니다.

함수는 특정 작업을 수행하거나 값을 반환하는 코드 블록입니다. 함수는 프로그래머가 여러 번 재사용할 수 있는 코드를 만드는 데 사용됩니다. 이렇게 하면 프로그램의 줄 수를 줄여 더 효율적으로 만들 수 있습니다.

전통적으로 JavaScript는 function을 사용하여 함수를 선언하는 한 가지 방법을 제공했습니다. 예어. 그러나 ES6부터 JavaScript는 arrow functions을 지원합니다. 함수를 보다 효율적으로 정의하는 데 사용할 수 있습니다.

이 가이드에서는 JavaScript의 기본 기능을 살펴보고 JavaScript 화살표 기능을 사용하는 방법에 대해 설명합니다. 또한 화살표 기능을 사용할 수 있는 위치에 대해 논의하고 화살표 기능을 실제로 사용할 수 있는 방법을 설명하는 몇 가지 예를 살펴보겠습니다.

자바스크립트 함수 리프레셔

JavaScript에서 함수를 선언하는 데 사용되는 가장 일반적인 방법은 일반 function을 사용하는 것입니다. 예어. function 키워드를 사용하면 코더가 코드 전체에서 참조할 수 있는 함수를 선언할 수 있습니다.

JavaScript 함수의 구문은 다음과 같습니다.

function nameOfTheFunction() {
   // Code
  }

우리의 기능은 많은 부분을 포함합니다. 먼저 function를 사용합니다. 함수를 선언할 것임을 프로그램에 알리는 키워드입니다. 그런 다음 위의 예에서 nameOfTheFunction 인 함수의 이름을 지정합니다. . 함수 이름은 변수와 동일한 규칙을 사용하므로 카멜 케이스로 작성된다는 점에 유의하는 것이 중요합니다.

그런 다음 우리 함수 뒤에는 매개변수를 구문 분석하는 데 선택적으로 사용할 수 있는 일련의 대괄호가 옵니다. 그런 다음 코드는 중괄호 세트({} ).

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

JavaScript에서 함수가 작동하는 방식을 설명하기 위해 예제를 사용하겠습니다. 다음 코드는 wakeUpRoutine이라는 함수를 생성합니다. 콘솔에 아침 메시지를 출력합니다:

function wakeUpRoutine() {
   console.log("Good morning! Today is a great day.");
  }

지금 당장은 프로그램을 실행해도 아무 일도 일어나지 않습니다. 이것은 우리의 함수가 선언되었지만 아직 함수를 호출하지 않았기 때문입니다. 함수를 실행하려면 함수 이름을 작성하여 호출할 수 있습니다.

wakeUpRoutine();

우리 프로그램은 다음을 반환합니다:

Good morning! Today is a great day.

프로그램 전체에서 원하는 만큼 함수를 실행하려는 위치에서 호출하여 함수를 사용할 수 있습니다.

JavaScript 함수는 매개변수도 사용할 수 있습니다. 매개변수는 함수에 전달되고 함수 내에서 지역 변수로 작동하는 입력입니다. 모닝콜에 우리의 이름이 포함되기를 원한다고 가정해 봅시다. 다음 코드를 사용하여 깨우기 메시지에 이름을 포함할 수 있습니다.

function wakeUpRoutine(name) {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

코드에서 name을 정의하지 않았습니다. 매개변수. 함수를 호출할 때 값을 할당하기 때문입니다. 우리 이름이 Peter라고 가정해 봅시다. . 우리의 이름과 함께 메시지를 표시하려면 다음 코드를 사용합니다.

wakeUpRoutine("Peter");

우리 프로그램은 다음을 반환합니다:

Good morning, Peter! Today is a great day.

name 값 매개변수는 wakeUpRoutine 함수로 전달되며 이 경우 Peter입니다. . 그런 다음 name을 사용합니다. 우리 프로그램이 지정한 이름을 참조하기 위해 우리 함수의 변수.

자바스크립트 화살표 기능

자바스크립트 화살표 함수(fat arrow라고도 함) 기능은 ES6에 도입된 가장 인기 있는 기능 중 하나입니다. 이러한 함수 표현식은 함수를 보다 효율적으로 작성하고 보다 간결한 구문을 사용하는 데 사용할 수 있습니다.

JavaScript 화살표 함수의 구문은 다음과 같습니다.

functionName = (parameters) => {
   // Code
  }

깨우기 루틴 예제를 사용하여 JavaScript 화살표가 어떻게 작동하는지 설명하겠습니다. 위의 코드에서는 "function" 키워드를 사용해야 했습니다." 그러나 화살표 기능에서는 =>를 사용합니다. 대신 구문. 다음은 화살표 함수로 작성된 깨우기 루틴 함수의 예입니다.

wakeUpRoutine = (name) => {
   console.log(`Good morning, ${name}! Today is a great day.`);
  }

함수를 호출하기 위해 기존 함수와 동일한 구문을 사용합니다.

wakeUpRoutine("Sophia")

우리의 함수는 다음을 반환합니다:

Good morning, Sophia! Today is a great day.

화살표 함수의 구조는 기존 함수의 구조와 매우 유사합니다. 유일한 차이점은 function을 사용하지 않는다는 것입니다. 화살표 함수에서 키워드를 사용하고 대신 =>를 사용합니다. 화살.

또한 return을 사용할 필요가 없었습니다. 화살표 함수에 키워드를 추가하여 코드를 더욱 간결하게 만듭니다.

암시적 반환

화살표 함수는 함수 본문이 단일 표현식인 경우 특히 유용합니다. 함수 본문이 단일 표현식인 경우 중괄호를 제거하고 암시적 반환을 만들어 함수를 단순화할 수 있습니다. 이것은 함수에 사용된 줄 수가 함수 정의 방식에 영향을 미치지 않는 기존의 함수와 다릅니다.

다음은 단선 화살표 함수의 예입니다.

const multiplyNumbers = (a, b) => a * b;
multiplyNumbers(2, 2);

코드 반환:4 . 보시다시피 화살표 함수는 두 숫자를 곱했습니다.

암시적 반환 구문은 일반적으로 위에서 했던 것처럼 값을 반환하는 경우에 사용됩니다. 그러나 구문을 사용하여 값을 반환하지 않는 코드를 실행할 수도 있습니다. 따라서 암시적 구문을 사용하여 깨우기 루틴 기능을 다시 만들고 싶다면 다음 코드를 사용할 수 있습니다.

const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`);
wakeUpRoutine("Ava");

코드는 다음을 반환합니다.

Good morning, Ava! Today is a great day.

괄호 제거

JavaScript 화살표 함수는 매개변수가 없거나 둘 이상인 경우 매개변수 주위에 괄호만 필요합니다. 따라서 화살표 함수에 매개변수가 하나만 있는 경우 다음과 같이 괄호를 제거할 수 있습니다.

wakeUpRoutine = name => {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

보시다시피 name 매개변수는 더 이상 괄호로 묶이지 않습니다.

Map, Filter, Reduce가 있는 화살표 함수

화살표 함수를 사용하면 한 줄로 배열을 변환할 수 있으므로 화살표 함수는 일반적으로 map, filter 및 reduce JavaScript 배열 메서드와 함께 사용됩니다.

학생 등급의 배열이 있다고 가정해 보겠습니다. 1을(를) 추가하고 싶습니다. 최근 시험에 오류가 있어 학생들이 특정 질문에 답할 수 없었고 아무도 30 만점을 받을 수 없었기 때문입니다. . 다음은 테스트 점수를 수정하는 데 사용할 수 있는 화살표 함수의 예입니다.

const grades = [25, 26, 22, 28];
const fixStudentGrades = grades.map( score => score + 1 );
console.log(fixStudentGrades);

코드 반환:

[26, 27, 23, 29]

보시다시피 코드에 1이(가) 추가되었습니다. grades의 각 등급에 배열.

결론

화살표 함수는 보다 효율적이고 간결한 코드를 작성하는 데 사용할 수 있는 ES6 JavaScript에 도입된 기능입니다. 화살표 기능을 사용하면 =>를 사용할 수 있습니다. function 대신 화살표 특정 상황에서 한 줄 함수 작성을 용이하게 합니다.

이 자습서에서는 JavaScript에서 함수가 작동하는 방식에 대한 기본 사항을 탐색한 다음 화살표 함수를 작성하는 방법에 대해 논의했습니다. 또한 암시적 반환, 괄호 제거 및 map과 함께 화살표 함수 사용도 살펴보았습니다. , filter , 및 reduce 기능.

이제 전문가처럼 화살표 함수를 작성하는 데 필요한 지식을 갖추었습니다!