IM 1W _ Arrow Function & "this" keyword & arguments
20965 단어 ES6thisarrow functionES6
GOAL
- 화살표 함수(Arrow Function)
- this
- 구조분해할당
- arguments 프로퍼티
Linting의 의미와 필요성
eslint 사용법
1. Arrow Function
- 메소드 함수가 아닌 곳에 적합하며, 생성자로서 사용 불가
- this, arguments 사용 불가
1. 비교예제
1) const func1 = function() { const num = 10; };
const func1 = () => { const num = 10; }; // function 키워드 생략
or const func1 = () => const num = 10; // 본문이 하나의 실행무일 경우, 중괄호 생략하고 한 줄에 표기 가능, 이 경우, 해당 실행문의 결과가 "함수의 반환값"으로 지정
2) const func2 = function(num) { for(let i = 0; i < 10; i++) { num++; } return num; };
const func2 = num => { for(let i = 0; i < 10; i++) { num++; } return num; }; // 매개변수가 하나일 경우, 소괄호 생략
3) const func3 = function (num) { return `입력된 숫자는 ${num}입니다.`; };
const func3 = num => `입력된 숫자는 ${num}입니다.`; // 중괄호, return 생략
2. 매개변수 지정 방법
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
3. 함수 몸체 지정 방법
- 파라미터가 단 한개면, 소괄호 생략 가능
- return 생략시에는 중괄호를 사용하지 않음
x => { return x * x } // single line block
x => x * x // 바디가 한줄이면 중괄호 생략, 암묵적으로 return 됨 / 위 표현과 동일하다.
() => { // multi line block.
const x = 10;
return x * x;
};
4. 함수 호출
- 화살표 함수는 반드시 함수 표현식(Function Expression)으로 생성 & 호출 (익명함수로만 사용할 수 있음)
// ES5 //
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100
// ES6 //
var pow = x => x * x;
console.log(pow(10)); // 100
5. 클로저 표현
- 화살표 함수는 클로저를 표현할 때 매우 효과적
// 함수 표현식 예
let adder = function(x) {
console.log(`x:${x}`) // x:5
return function(y) {
console.log(`y:${y}`) // y:7
return x + y
}
}
adder(5)(7) // 12
// 화살표 함수 예
let adder = (x) => {
return (y) => {
return x + y
}
}
------------------------------------------
let adder = x => {
return y => x + y
}
------------------------------------------
let adder = x => y => x + y
------------------------------------------
=> 다음과 같이 표현할 수 있다!
2. this
3. 구조분해할당
4. arguments 프로퍼티
- 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회가능한(iterable) 유사 배열 객체(array-like object) | 함수 내부에서 지역변수처럼 사용됨. 즉, 함수 외부에서는 사용 불가
- 매개변수(parameter)는 인수(argument)로 초기화됨
- 매개변수의 갯수보다 인수를 적게 전달했을 때, 인수가 전달되지 않은 매개변수는 undefined로 초기화
- 매개변수의 갯수보다 인수를 더 많이 전달한 경우, 초과된 인수는 무시됨
- JS는 함수를 호출할 때 인수들과 함께 암묵적으로 arguments객체가 함수 내부로 전달됨
- 그러나, arguments객체는 "유사배열객체"
- 유사배열객체
- length프로퍼티를 가진 객체를 뜻함 |
- 배열 메소드를 사용하면 에러
- 유사배열객체
// ex.
function sum() {
if (!arguments.length) return 0;
var array = Array.prototype.slice.call(arguments); // arguments 객체를 배열로 변환
return array.reduce(function (pre, cur) {
return pre + cur;
});
}
----------------------------------------------------
// ES6
function sum(...args) {
if (!args.length) return 0;
return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
Author And Source
이 문제에 관하여(IM 1W _ Arrow Function & "this" keyword & arguments), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@delilah/IM-1W-Arrow-Function-this-keyword저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)