JavaScript의 화살표 함수
JavaScript 화살표 기능
화살표 기능은 ES6 버전의 JavaScript에서 도입된 기능 중 하나입니다. 일반 JavaScript 함수의 단순하고 깨끗하며 컴팩트한 버전을 작성하는 데 도움이 됩니다. 그러나 제한적이며 모든 상황에서 사용할 수는 없습니다.
정규 함수 ES5
function newUser(name) {
return "Hello " + name;
}
화살표 함수 ES6
const newUser = name => "Hello " + name;
화살표 함수 구문
단일 인수 및 표현식의 경우
const functionName = argument => expression;
여러 인수 및 표현식의 경우
const functionName = (arg1, arg2, ...arg3) => {
statement(s);
};
여러 매개변수에는 괄호
()
이 필요하고 여러 줄 문에는 본문 중괄호 {}
및 return
이 필요합니다.예제 1: 인수가 없는 화살표 함수
함수가 인수를 취하지 않으면 빈 괄호
()
을 넣어야 합니다.const newUser = () => console.log("Welcome!");
newUser(); // Welcome!
예제 2: 인수가 하나인 화살표 함수
함수가 하나의 인수만 사용하는 경우 괄호
()
을 생략할 수 있습니다.const newUser = name => console.log("Hello " + name);
newUser("Dev"); // Hello Dev
예 3: 여러 인수가 있는 화살표 함수
함수가 여러 인수를 사용하는 경우 괄호 안에 넣어야 합니다
()
.const newUser = (name, birthday) => console.log("Hello " + name + ". It's your birthday: " + birthday);
newUser("Dev", 1996); // Hello Dev. It's your birthday: 1996
예제 4: 하나의 명령문이 있는 화살표 함수
함수 본문에 명령문이 하나만 있으면 중괄호
{}
및 return
키워드를 생략할 수 있습니다.const newUser = () => console.log("Welcome!");
newUser(); // Welcome!
예제 5: 여러 명령문이 있는 화살표 함수
함수 본문에 여러 문이 있는 경우 중괄호
{}
안에 넣어야 합니다.const newUser = (name) => {
let greeting = "Hello " + name;
console.log(greeting);
}
newUser("Dev"); // Hello Dev
화살표 기능이있는 this
this
키워드 처리는 일반 함수와 비교하여 화살표 함수에서 다릅니다.일반 기능
일반 함수 내에서
this
키워드는 호출되는 함수를 나타냅니다. 따라서 일반 함수의 this
키워드는 함수를 호출하는 개체를 나타냅니다.function User() {
this.name = 'Moz',
this.age = 22,
this.sayAge = function () {
// this is accessible
console.log(this.age); // 22
function innerFunc() {
// this refers to the global object
console.log(this.age); // undefined
console.log(this); // Window {}
}
innerFunc();
}
}
let newUser = new User();
newUser.sayAge();
산출
22
undefined
Window {}
화살표 기능으로
그러나
this
은 화살표 기능과 바인딩되지 않습니다. 따라서 화살표 함수의 경우 this
키워드는 항상 화살표 함수를 정의한 개체를 참조합니다.function User() {
this.name = 'Moz',
this.age = 22,
this.sayAge = function () {
console.log(this.age); // 22
let innerFunc = () => {
console.log(this.age); // 22
console.log(this); // User { name: 'Moz', age: 22, sayAge: [Function] }
}
innerFunc();
}
}
let newUser = new User();
newUser.sayAge();
산출
22
22
User { name: 'Moz', age: 22, sayAge: [Function] }
인수 바인딩
일반 함수에는
arguments
바인딩이 있습니다. 즉, 일반 함수에 인수를 전달할 때 arguments
키워드를 사용하여 액세스할 수 있습니다. 예를 들어,function numbers(){
console.log(arguments)
}
numbers(2, 4, 6); // [Arguments] { '0': 2, '1': 4, '2': 6 }
그러나 화살표 함수에는
arguments
개체가 없습니다. 액세스하려고 하면 오류가 발생합니다. 즉, 화살표 함수에는 arguments
바인딩이 없습니다. 예를 들어,let numbers = () => {
console.log(arguments)
}
numbers(2, 4, 6);
// ReferenceError: Can't find variable: arguments
대부분의 경우 스프레드를 사용하는 것이
arguments
개체를 사용하는 것보다 좋은 대안입니다.let numbers = (...n) => {
console.log(n)
}
numbers(2, 4, 6); // [ 2, 4, 6 ]
화살표 기능으로 피해야 할 사항
1. 화살표 함수를 사용하여 개체 내부에 메서드를 만들면 안 됩니다.
let User = {
name : 'Moz',
age : 22,
sayAge : () => {
// 'this' refers to the global
console.log(this.age);
}
}
User.sayAge(); // undefined
2. 화살표 기능을
constructor
으로 사용할 수 없습니다.let User = () => {};
let newUser = new User(); // TypeError: User is not a constructor
3. 화살표 함수는
new.target
키워드에 액세스할 수 없습니다.4. 일반적으로 범위 설정에 의존하는
call
, apply
및 bind
메서드에는 화살표 함수가 적합하지 않습니다.결론
때로는 일반 함수의 동작이 원하는 것일 수 있습니다. 그렇지 않은 경우 화살표 함수를 사용하세요. 또한 화살표 함수는 ES6에서 도입되었습니다. 일부 브라우저는 화살표 기능 사용을 지원하지 않을 수 있습니다.
읽어 주셔서 감사합니다!
💻 행복한 코딩
모아잠 알리 팔로우
Hi there, I am Moazam Ali, a Frontend Engineer based in Pakistan. Having around 2+ years of experience in frontend development.
Reference
이 문제에 관하여(JavaScript의 화살표 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/moazamdev/arrow-functions-in-javascript-2346텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)