화살표 기능 - 언제 및 언제 사용하지 않습니까?

안녕하세요.👋🏻,
본문에서 화살표 함수를 언제 사용하지 말아야 하는지 알아보자.
본문은 처음으로 https://the-nerdy-dev.com/에 발표되었다.
웹 사이트를 방문하여 웹 개발에 관한 흥미로운 기사 및 자습서를 확인하십시오.

화살표 기능
ES6에서 새로운 표준이 언어를 맞춤형으로 만들었기 때문에 자바스크립트는 크게 발전했다.차세대 자바스크립트 기능을 도입함으로써 우리의 개발 체험을 크게 개선시켰다.ES6의 특징 중 하나는 화살표 함수입니다.
이 글을 쓰는 목적은 독자로 하여금 그/그녀가 화살표 함수를 사용하지 말고 전통적인 함수 문법이나 함수 표현식 문법을 사용해야 한다는 것을 깨닫게 하는 것이다.화살표 함수를 사용할 때, 우리도 코드의 가독성에 영향을 줄 수 있기 때문에 조심해야 한다.

화살표 기능은 언제 사용합니까?
화살표 함수를 왜 사용하는 것이 장점인지 설명할 수 있는 확실한 이유가 있다.

보호 작용역:arrow 함수는 그들이 정의한 상하문을 기억하고 이 상하문을 준수한다.
따라서 우리가 일반적인 리셋 함수를 도입하여 두 개의 화살표 함수와 혼합하더라도 범위가 혼란스러울 수 있다.

컴팩트형: 읽기와 쓰기가 쉽다.단지 뚱뚱한 화살일 뿐, 그것들도 익명일 수 있다.

코드의 명확성: 코드의 모든 함수가 화살표 함수일 때 우리는 일반 함수에 의존하여 범위를 정의한다.따라서 개발자로서 우리는 항상 다음 더 높은 함수 문장을 찾아서this 키워드를 찾을 수 있다.

화살표 기능을 사용하지 않는 경우는 언제입니까?

1. 대상에 방법을 정의한다
JavaScript에서는 객체의 등록 정보에 설정된 함수를 사용하는 방법을 알고 있습니다.따라서 이 방법을 호출할 때this 키워드는 이 방법이 속한 대상을 가리킨다.
지금 여기서 대상 문자를 토론합시다.대상 텍스트에 방법을 정의하고 싶다고 가정하십시오.우선, 대상 텍스트에서arrow 함수를 방법으로 정의하려고 시도할 수 있습니다.그러나 대상 텍스트에 화살표 함수를 사용하지 말아야 하는 이유를 예를 들어 이해하자.

const user = { 
  stocks : [
     {
      stock : 'Amazon', 
      price_in_dollars : 937,
      units_bought: 5
   },
   {
      stock : 'Tesla', 
      price_in_dollars : 652,
      units_bought: 3
   }, 
   {
      stock : 'Meta Platforms', 
      price_in_dollars : 465,
      units_bought: 2
   }
],
get_total_invested : () => { 
        console.log(this === window);
        return this.stocks.reduce((acc, stock) => acc + stock.price_in_dollars * stock.units_bought, 0);
  }
};

console.log(this === window);
const invested_amount = user.get_total_invested(); 
console.log(invested_amount); 

우리는 user.get_total_invested 방법이 하나의arrow 함수에서 정의된 것을 볼 수 있다.그러나 위의 코드를 시도하면 user.get_total_invested 호출은 TypeError 정의되지 않은 것으로 해석되기 때문에 this.stocks 하나를 던집니다.

현재 주의해야 할 것은 get_total_invested 대상에서 user 방법을 호출할 때 위아래 문장이 window 대상일 때 우리는 this 키워드와 window 방법 중의 get_total_invested 대상을 비교하여 쉽게 검증할 수 있다. 이 방법에서 보듯이 this 키워드는 window 대상을 가리킨다.그래서 본질적으로this.stocks는 window.stocks로 해석되었고 이것은 최종적으로 우리에게 undefined를 주었다. 왜냐하면 우리는 stocks 대상에 아무런 window 속성이 없기 때문이다.
이 문제를 해결하기 위해서 우리는 함수 표현식 문법이나 그 방법이 정의한 줄임말로 간단하게 전환할 수 있다.이 예에서, 호출점 this 키워드는 호출점의 원점 왼쪽의 내용을 가리킨다.다음은 위에서 수정한 코드입니다.

const user = { 
  stocks : [
     {
      stock : 'Amazon', 
      price_in_dollars : 937,
      units_bought: 5
   },
   {
      stock : 'Tesla', 
      price_in_dollars : 652,
      units_bought: 3
   }, 
   {
      stock : 'Meta Platforms', 
      price_in_dollars : 465,
      units_bought: 2
   }
],
get_total_invested(){ 
        console.log(this === user);
        return this.stocks.reduce((acc, stock) => acc + stock.price_in_dollars * stock.units_bought, 0);
  }
};

const invested_amount = user.get_total_invested(); 
console.log(invested_amount);

위 코드에서 get_total_invested는 user 대상을 호출하는 방법이다.일반 함수 문법에 대해 점 왼쪽의 user 대상은 this 최종 해석 대상이기 때문에 위의 코드는 정상적으로 작동할 수 있다.다음은 위 코드의 출력입니다.

출력에서 키워드가 this 대상을 가리키는 것을 쉽게 해독할 수 있기 때문에 user true로 되돌아옵니다.
이제 앞을 보고 대상의 원형으로 화살표 함수를 실현합시다

function User(name, age, profession) { 
  this.name = name; 
  this.age = age; 
  this.profession = profession;
}
User.prototype.sayHello = () => { 
  console.log(this === window);
  return `Hello ${this.name}`; 
}
const user = new User('Alex',24,'Developer');
console.log(user.sayHello());

지금은 위에서 논의한 바와 같이 같은 일도 적용된다.위 코드에서 우리는 화살표 함수 문법으로 this === user 키워드 지향sayHello 방법을 정의하지 말고 함수 표현식 문법으로 이 문제를 해결해야 한다.수정된 코드는 다음과 같습니다.

function User(name, age, profession) { 
  this.name = name; 
  this.age = age; 
  this.profession = profession;
}
User.prototype.sayHello = function(){ 
  console.log(this === window);
  return `Hello ${this.name}`; 
}
const user = new User('Alex',24,'Developer');
console.log(user.sayHello());

이 간단한 변화를 통해 this 정규 함수는 방법window으로 호출할 때 상하문을 sayHello 대상으로 변경한다.

2. 화살표 함수는 구조 함수로 사용할 수 없습니다
구조 함수의 경우 일반 함수를 사용하십시오. 그렇지 않으면 JavaScript에서 화살표 함수user로 사용되는 경우 오류가 발생합니다.이는 JavaScript가 오버헤드를 통해 이를 은밀하게 차단한다는 의미입니다.
좀 더 자세히 살펴보고 다음 사항에 대해 자세히 살펴보겠습니다.
간단하게 말하면 대상(또는'구조 함수')은 user.sayHello() 키워드에 의존하여 수정된다.constructor 키워드는 항상 전역 대상, 즉 this 대상을 인용한다.
만약 우리가 이런 물건이 있다면:

const User = (name, age, profession) => { 
    this.name = name; 
    this.age = age;
    this.profession = profession; 
}
const user = new User("Alex", 21, "developer"); 

실행 this, 그중 window 은 화살표 함수이고 자바스크립트는 구조 함수로 사용할 수 없는 new User("Alex", 21, "developer") 를 던졌다.
하지만 만약 당신이 이렇게 한다면:

const User = function(name, age, profession) {
   this.name = name;
   this.age = age;
   this.profession = profession; 
}
const user = new User('Alex',21,'developer');
console.log(user.name); 

현재 User 키워드는 엔진 뚜껑 아래에서 마력을 발휘하여 TypeError 중의 User 키워드를 처음에는 빈 대상을 먼저 인용하고 이전처럼 전체 대상을 인용하지 않게 한다.이어 새 속성new,this과User는 name 키워드가 가리키는 빈 대상에서 만들어지며, 그 값은 각각 age,gender와this,Alex이다.마지막으로 21 키워드가 가리키는 대상을 되돌려줍니다.
현재 주의해야 할 것은 화살표 함수가 그것들의 developer 대상을 수정할 수 없다는 것이다.그것들의 this 대상은 항상 정적으로 그것들을 만드는 범위의 대상이다.이것은 정적 어법 범위라고 불린다.이것이 바로 우리가 화살표 함수를 사용하여 this, this 또는 bind 등의 조작을 수행할 수 없는 이유이다.간단하게 말하자면, 그것들의 apply 는 그것들을 만드는 call 범위의 값에 잠겨 있다.

3. 화살표 함수를 콜백 함수로
클라이언트 JavaScript에서 알 수 있듯이 DOM 요소에 이벤트 탐지기를 첨부하는 것은 매우 일반적인 작업입니다.이벤트는 this를 목표 요소로 하는 처리 프로그램 함수를 터치합니다.
예를 들어 다음과 같은 코드가 있다고 가정해 봅시다.

const button = document.querySelector('button');
button.addEventListener('click',() => { 
 console.log(this === window); 
 this.innerHTML = 'Changed';
});

방금 토론한 바와 같이 this of는 전역 상하문에 정의된 화살표 함수 중의 this 대상을 가리킨다.따라서 클릭 이벤트가 발생할 때마다 브라우저는 this를 상하문으로 처리 프로그램 함수를 실행하려고 시도하지만 화살표 함수는 미리 정의된 상하문에 귀속됩니다.
상기 코드 중window과 button는 같고 후자는 아무런 작용도 하지 않는다.
이 문제를 해결하기 위해서 우리는 함수 표현식 문법을 사용해야 한다. 이것은 우리가 목표 요소에 따라 변경할 수 있도록 허용한다. this.innerHTML

const button = document.querySelector('button');
button.addEventListener('click', function() { 
 console.log(this === button); 
 this.innerHTML = 'Changed';
});

위 코드에 대해 window.innerHTML 키워드는 this를 가리킵니다.따라서 버튼 텍스트가 올바르게 수정되고 UI에 동일한 내용이 반영됩니다.
이것이 바로 본문의 주제다.읽어주셔서 감사합니다.
만약 당신이 나의 글을 좋아한다면 트위터에서 나를 주목하고 더 많은 재미있는 내용을 이해할 수 있다.

⚡트위터:
만약 네가 이 문장을 좋아한다면, 좋은 인상을 남기는 것을 잊지 마라.당신의 친구와 동료와 나눌 수도 있습니다.

PS - 인터넷 개발을 배우고 싶다면 유튜브 채널에서 무료 수업을 기획했습니다. 다음 글을 보십시오.

(2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

The Nerdy Dev ・ Apr 28 '21 ・ 2 min read

#html #css #node #javascript

어떻게 반응하는지 배웠으면 좋겠어요.전체 항목이 있는 경우 다음을 확인합니다.

Learn React with one BIG Project [NOTES included] - Demo and Video Link

The Nerdy Dev ・ Jun 10 '21 ・ 1 min read

#100daysofcode #javascript #react #webdev