Home-theater-designers
JavaScript ES6은 웹 개발 세계에 흥미로운 변화를 가져왔습니다. JavaScript 언어에 대한 새로운 추가는 새로운 가능성을 가져왔습니다.
가장 인기 있는 변경 사항 중 하나는 JavaScript에 화살표 기능을 추가한 것입니다. 화살표 함수는 JavaScript 함수 표현식을 작성하는 새로운 방법으로, 앱에서 함수를 생성하는 두 가지 다른 방법을 제공합니다.
기존 JavaScript 함수의 전문가라면 화살표 함수를 조정하는 데 약간의 시간이 걸립니다. 이것이 무엇인지, 어떻게 작동하며, 어떤 이점이 있는지 살펴보겠습니다.
JavaScript 화살표 기능이란 무엇입니까?
화살표 함수는 이전에 사용되었던 함수 표현식을 작성하는 새로운 방법입니다. JavaScript ES6 릴리스에 포함 . 몇 가지 규칙이 약간 다르지만 사용하고 있는 JavaScript 함수 표현식과 비슷합니다.
화살표 함수는 항상 익명 함수이며 다른 규칙이 있습니다.
this, 기존 함수보다 구문이 더 간단합니다.
내 폰이 왜 이렇게 뜨거워
다음 함수는 새 화살표 토큰을 사용합니다.
=>Python으로 작업한 적이 있다면 이 함수는 다음과 매우 유사합니다. 파이썬 람다 표현식 .
이러한 함수의 구문은 일반 함수보다 약간 더 깔끔합니다. 기억해야 할 몇 가지 새로운 규칙이 있습니다.
- function 키워드가 제거되었습니다.
- 반환 키워드는 선택 사항입니다.
- 중괄호는 선택 사항입니다.
약간의 변경 사항이 있으므로 함수 표현식의 기본 비교부터 시작하겠습니다.
화살표 함수를 사용하는 방법
화살표 기능은 사용하기 쉽습니다. 화살표 함수를 기존 함수 표현식과 나란히 비교하면 화살표 함수를 더 쉽게 이해할 수 있습니다.
다음은 두 개의 숫자를 더하는 함수 표현식입니다. 먼저 전통적인 기능 방법을 사용합니다.
let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3두 개의 인수를 취하고 합계를 반환하는 매우 간단한 함수입니다.
다음은 화살표 함수로 변경된 표현식입니다.
let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3함수 구문은 화살표 함수를 사용하는 것과 상당히 다릅니다. function 키워드가 제거되었습니다. 화살표 토큰을 사용하면 JavaScript가 함수를 작성하고 있음을 알 수 있습니다.
중괄호와 return 키워드는 여전히 존재합니다. 화살표 기능에서는 선택 사항입니다. 다음은 동일한 기능의 더 간단한 예입니다.
let addnum = (num1,num2) => num1 + num2;이제 return 키워드와 중괄호가 사라졌습니다. 남은 것은 원래 함수의 거의 절반에 달하는 매우 깨끗한 한 줄 함수입니다. 훨씬 적은 양의 코드로 동일한 결과를 얻을 수 있습니다.
화살표 기능에 더 많은 것이 있습니다. 그들이 무엇을 할 수 있는지 더 잘 이해할 수 있도록 더 깊이 들어가 보겠습니다.
화살표 기능 특징
화살표 기능에는 다양한 용도와 기능이 포함되어 있습니다.
내 컴퓨터가 시작될 때 왜 그렇게 느린가요?
일반 함수
화살표 함수는 하나 이상의 인수를 사용할 수 있습니다. 두 개 이상의 인수를 사용하는 경우 괄호로 묶어야 합니다. 인수가 하나만 있는 경우 괄호를 사용할 필요가 없습니다.
let square = x => x * x
square(2);
>>4화살표 함수는 인수 없이 사용할 수 있습니다. 함수에서 인수를 사용하지 않는 경우 빈 괄호를 사용해야 합니다.
let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!이와 같은 간단한 함수는 훨씬 적은 코드를 사용합니다. 콤플렉스가 얼마나 쉬운지 상상해보십시오. JavaScript 슬라이드쇼와 같은 프로젝트 함수를 작성하는 더 간단한 방법이 있을 때 가 됩니다.
이것을 사용하여
의 개념
thisJavaScript를 사용할 때 가장 까다로운 부분인 경향이 있습니다. 화살표 함수는
this사용하기 더 쉽습니다.
화살표 기능을 사용할 때
this둘러싸는 함수에 의해 정의됩니다. 이것은 중첩된 함수를 생성하고 필요할 때 발생하는 문제를 생성할 수 있습니다.
this주요 기능에 적용하려면
다음은 일반 함수와 함께 사용해야 하는 해결 방법을 보여주는 인기 있는 예입니다.
function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}값 할당
this주 함수 내부에서 함수를 호출할 때 변수를 읽을 수 있습니다. 이것은 지저분합니다. 여기 화살표 기능을 사용하여 이 작업을 수행하는 더 좋은 방법이 있습니다.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}함수에는 훌륭하지만 개체 내부에 메서드를 만드는 데 사용해서는 안 됩니다. 화살표 함수는 올바른 범위를 사용하지 않습니다.
this.
다음은 화살표 함수를 사용하여 내부에 메서드를 생성하는 간단한 객체입니다. 방법은 토핑 호출 시 1씩 변경됩니다. 대신 전혀 작동하지 않습니다.
보조 하드 드라이브를 설치하는 방법
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings
배열 작업
화살표 함수를 사용하면 배열 메서드로 작업하는 데 사용되는 코드를 단순화할 수 있습니다. 배열 및 배열 메소드는 JavaScript의 매우 중요한 부분입니다. 그래서 당신은 그들을 많이 사용할 것입니다.
다음과 같은 유용한 방법이 있습니다. 지도 배열의 모든 요소에 대해 함수를 실행하고 새 배열을 반환하는 메서드입니다.
let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]이것은 배열의 모든 값에 1을 더하는 매우 간단한 함수입니다. 화살표 함수를 사용하면 더 적은 코드로 동일한 함수를 작성할 수 있습니다.
let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]이제 읽기가 훨씬 쉬워졌습니다.
객체 리터럴 생성
화살표 함수는 JavaScript에서 객체 리터럴을 만드는 데 사용할 수 있습니다. 일반 함수로 만들 수 있지만 조금 더 깁니다.
let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};더 적은 코드를 사용하여 화살표 기능으로 동일한 객체를 만들 수 있습니다. 화살표 표기법을 사용하면 함수 본문을 괄호로 묶어야 합니다. 다음은 화살표 기능이 있는 향상된 구문입니다.
let createArrowObject = (first,last) => ({first:first, last:last});JavaScript 화살표 함수 및 그 이상
이제 JavaScript 화살표 함수가 개발자로서의 삶을 더 쉽게 만드는 몇 가지 다른 방법을 알게 되었습니다. 구문을 단축하고 다음을 사용하여 더 많은 제어를 제공합니다.
this, 객체를 더 쉽게 만들고 배열 메서드로 작업하는 새로운 방법을 제공합니다.
JavaScript ES6에서 화살표 기능의 도입은 다른 많은 기능과 함께 웹 개발에서 JavaScript가 얼마나 중요한지를 보여줍니다. 그래도 할 수 있는 일이 훨씬 더 많습니다.
JavaScript에 대해 더 알고 싶으십니까? 이러한 JavaScript 프레임워크를 배우십시오. 게다가 우리의 자바스크립트 치트 시트 에 대한 가치 있는 정보와 학습을 제공합니다. 자바스크립트가 작동하는 방식 당신을 더 나은 개발자로 만들 수 있습니다.
공유하다 공유하다 트위터 이메일 6가지 대안: 최고의 무료 또는 저렴한 오디오북 앱오디오북 비용을 지불하고 싶지 않다면 무료로 합법적으로 들을 수 있는 몇 가지 훌륭한 앱이 있습니다.
다음 읽기 관련 항목- 프로그램 작성
- 자바스크립트
Anthony Grant는 프로그래밍 및 소프트웨어 분야의 프리랜서 작가입니다. 그는 프로그래밍, Excel, 소프트웨어 및 기술을 다루는 컴퓨터 공학 전공자입니다.
앤서니 그랜트가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.