ES6 이후 JavaScript에서 함수를 생성하기 위한 새로운 구문이 등장했습니다.
화살표 함수라는 구문이며 이를 사용하여 함수를 만들 수 있습니다.
기존 JavaScript에서 함수를 만드는 방법
// 1. 함수 선언문
function 함수1() {
// 코드~
}
// 2. 함수 표현식
let 함수2 = function () {
// 코드~
};
화살표 함수 구문을 사용하여 함수를 만드는 방법
let 함수3 = () => {
// 코드~
};function =>이라는 긴 키워드 대신 화살표가 있는 함수를 만드는 구문입니다.
예전에도 함수를 만드는 방법이 있었는데 왜 화살표 함수라는 구문을 사용할까요?
화살표 기능을 사용하는 이유
1. 함수의 원래 I/O 기능을 매우 직관적으로 표현합니다.
프로그래밍할 때 함수 구문을 사용하는 이유는 무엇입니까?
1. 여러 기능을 수행하는 코드를 한 단어로 묶고 싶을 때 사용 (나중에 묶었을 때 재사용이 용이함)
2. 입/출력 함수 생성 시 사용
그리고 화살표 함수를 사용하면 함수 자체가 입출력 기능매우 직관적으로 표현합니다.
함수는 수학 용어입니다. 원래 함수는 숫자를 삽입하고 다른 것을 출력하는 블랙 박스처럼 동작합니다.
위의 그림과 같이 입력이 들어오면 출력이 되는 박스가 함수입니다.
그렇다면 프로그래밍에서 함수를 어떻게 생성합니까?
function add(x){
return x + 2
}
add(2);이 구문을 만들고 사용합니다.
함수의 괄호 안에 입력 역할 매개변수(매개변수)
기능 내에서 돌려 주다출력 역할을 하는 키워드입니다.
이제 add(2); 이 사용법으로 4는 그대로 유지됩니다.
괄호 안에 무언가를 넣으면 return을 사용하여 무언가를 뱉어냅니다.
함수의 I/O 함수입니다.
따라서 화살표 기능을 이용하면 입/출력 기능을 매우 직관적으로 표현할 수 있습니다.
let 두배만들기 = (x) => { return x * 2 }
console.log(두배만들기(4)); // 8
console.log(두배만들기(8)); // 16
기존의 기능과 직접 비교하여 입/출력 기능이 표현하는 것을 보다 직관적으로 비교해 보세요. 물론 화살표 기능이 될 것입니다.
이것이 화살표 함수를 사용하는 첫 번째 이유입니다.
2. 매개변수에서 괄호 생략 가능
let 두배만들기 = x => { return x * 2 }
console.log( 두배만들기(4) );
console.log( 두배만들기(8) );
3. return 뒤에 중괄호가 있으면 return 중괄호를 생략할 수 있습니다.
let 두배만들기 = x => x * 2 ;
console.log( 두배만들기(4) );
console.log( 두배만들기(8) );생략, x는 함수로 어떻게 변합니까? 입출력 기능이것은 더 직관적입니다.
4. 코드 한 줄, 중괄호도 생략 가능
return 문이 없더라도 코드가 한 줄이면 중괄호를 생략할 수 있습니다.
(1, 2, 3, 4).forEach(a => console.log(a));
5. 화살표 기능을 사용할 때 내부 this 값을 사용하듯이 외부 this 값을 사용합니다.
2023/03/27 – (Frontend/JavaScript) – JavaScript this (2) 이 게시물 참조
함수를 어디에 쓰느냐에 따라 이 값의 내부 값이 달라진다고 합니다.
그러나 화살표 함수는 어디에 사용해도 내부 값이 바뀌지 않습니다.
이 외부의 값을 내부에 있는 그대로 사용하는 함수가 화살표 함수입니다.
이것이 화살표 기능을 사용하는 다섯 번째 이점이자 가장 큰 이유입니다.
화살표 함수 내에서 이것의 예 1
(1)
document.getElementById('버튼').addEventListener('click', function (e) {
console.log(this); // <button id="버튼">버튼</button>
});
(2)
document.getElementById('버튼').addEventListener('click', (e) => {
console.log(this); // window
});(1) (2) 코드를 비교해보면 function 키워드와 => 키워드의 차이점은 딱 하나입니다.
화살표 기능이 있는 내부 this 값은 외부 this 값을 그대로 사용하므로 창이 표시되는 것을 볼 수 있습니다.
화살표 함수 내 예제 2
(1)
let obj1 = {
함수: function () {
console.log(this); // {함수: f}
},
};
obj1.함수();
(2)
let obj2 = {
함수: () => {
console.log(this); // window
},
};
obj2.함수();(1) (2) 코드를 비교해보면 function 키워드와 => 키워드의 차이점은 딱 하나입니다.
obj1의 메서드에서 this는 obj1을 가리킵니다.
obj2의 메소드에서 this는 this outside의 값을 내부에 있는 그대로 사용하기 때문에 창이 뜨는 것을 볼 수 있습니다. (이 obj2 외부는 창입니다.)
정리하다
– 화살표 함수 사용 시 외부 값을 내부적으로 그대로 사용합니다.
함수를 만날 때마다 값이 변경됩니다.
– function 키워드를 사용하는 함수와 화살표 함수는 완전히 동일하지 않습니다.
– 화살표 함수는 함수의 입/출력 기능을 직관적으로 표현합니다.