JavaScript에서 =>의 의미

1. JavaScript의 화살표 함수 =>
2. 인수가 없는 화살표 함수
3. 인수가 하나인 화살표 함수
4. 여러 줄 화살표 함수
5. JavaScript에서 화살표 함수 호출 또는 실행
6. 약속 및 콜백과 함께 화살표 기능 사용
7. 화살표 함수의 한계

JavaScript의 함수를 사용하면 특정 작업을 수행하는 코드 블록을 작성할 수 있습니다. JavaScript에서 함수를 작성하는 다양한 방법이 있습니다.

이 기사에서는 JavaScript의 화살표 기능이 무엇인지, 어떻게 작동하는지, 그리고 그 한계는 무엇인지 알아보겠습니다.

JavaScript의 화살표 함수 =>

화살표 기능은 등호 =와 보다 큰 부호 >의 조합입니다. JavaScript의 ES6 버전에서 도입되었습니다.

화살표 함수로 알려진 JavaScript에서 함수를 작성하는 더 짧은 방법입니다. 화살표 함수를 사용하는 이점은 function 표현식보다 구문이 짧다는 것입니다.

화살표 함수는 때때로 익명 함수라고도 합니다. 이는 이러한 함수에 이름이 없기 때문입니다.

아래 코드 스니펫은 일반 함수의 구문과 화살표 함수의 구문을 비교한 것입니다.

코드 스니펫 - 자바스크립트:

// normal fn
function abc() {}

// arrow
() => {}

화살표 함수는 인수를 사용하지 않거나 여러 인수를 사용할 수 있습니다.

인수가 없는 화살표 함수

아래 코드 스니펫은 인수를 받지 않는 화살표 함수를 보여줍니다. 또한 한 줄의 코드만 있는 화살표 함수가 있는 경우 아래와 같이 중괄호 사용을 피할 수 있습니다.

코드 스니펫 - 자바스크립트:

() => console.log('This is a single line arrow fn which takes no arguments')

인수가 하나인 화살표 함수

화살표 함수에 인수를 전달하려면 둥근 괄호 안에 인수를 전달할 수 있습니다. 아래는 인수가 하나인 화살표 함수를 보여줍니다.

코드 스니펫 - 자바스크립트:

(name) => console.log(`Good Morning ${name}`)

여러 줄 화살표 함수

위의 예에서 한 줄의 코드가 있는 화살표 함수를 보았습니다. 그러나 화살표 함수 내에서 여러 줄 코드를 작성하려면 아래와 같이 중괄호를 사용해야 합니다.

코드 스니펫 - 자바스크립트:

() => {
  greetMe();
  loadData();
  console.log('The data is loaded....')
}

JavaScript에서 화살표 함수 호출 또는 실행

화살표 함수에 이름이 없으면 어떻게 호출하거나 실행할 수 있는지 물을 수 있습니다. 답은 간단합니다. 화살표 함수를 변수 안에 저장하고 해당 변수에 이름을 지정할 수 있습니다.

그런 다음 둥근 괄호 ()를 사용하여 아래와 같이 일반 함수를 실행하는 방법과 유사하게 해당 함수를 호출하거나 실행할 수 있습니다. 이것을 표현식으로 화살표 함수라고 합니다.

코드 스니펫 - 자바스크립트:

const abc = () => {
  console.log('hello');
}

화살표 함수 안에 명령문이 하나만 있는 경우 중괄호 {}를 제거하고 화살표 함수를 한 줄에 직접 작성할 수 있습니다. 이것은 코드 가독성을 높이고 코드 줄을 줄입니다.

코드 스니펫 - 자바스크립트:

const abc = () => console.log('hello');

그리고 화살표 함수의 경우 함수 실행 후 무언가를 반환하고 싶다면 return 키워드 대신 ()을 사용할 수도 있습니다. 그러나 일반 함수의 경우 return 키워드를 사용해야 합니다.

코드 스니펫 - 자바스크립트:

(params) => ({key: 'value'})

또한 기억해야 할 한 가지 중요한 점은 정규 함수의 this 키워드는 항상 JavaScript에서 호출되는 함수의 컨텍스트를 참조한다는 것입니다. 그러나 이것은 화살표 기능의 경우가 아닙니다.

화살표 함수의 this 키워드에는 컨텍스트가 없습니다. 함수가 존재하는 범위를 나타냅니다.

약속 및 콜백과 함께 화살표 기능 사용

화살표 함수의 좋은 점은 여러 곳에서(promise와 함께) 다양한 방식으로(콜백으로) 사용할 수 있다는 것입니다.

코드 스니펫 - 자바스크립트:

new Promise(function(resolve, reject) {
  funReturningPromise().then(data => resolve(data)).catch(err => reject(err));
});

여기에서 우리는 약속을 사용하고 있으며 우리가 알고 있듯이 약속은 콜백 메서드를 인수로 사용합니다. 이 콜백은 resolve 및 reject에 대한 두 개의 인수를 사용합니다.

promise 객체를 반환하는 함수가 있다고 가정해 봅시다. 약속은 해결되거나 거부될 수 있습니다.

따라서 약속에 어떤 일이 발생할 수 있는지에 따라 then과 catch의 두 가지 방법을 사용할 수 있습니다. 위의 예와 같이 이러한 메서드에서 화살표 기능을 사용할 수 있습니다.

화살표 함수의 한계

1. 생성자로 사용할 수 없습니다.
2. call, apply 및 bind 메소드에는 적합하지 않습니다.
3. this, 인수 또는 슈퍼에 대한 바인딩이 없으며 메서드로 사용해서는 안 됩니다.
4. new.target 키워드에 대한 액세스 권한이 없습니다.