[ES6] 기본 문법 (3)
2020. 12. 23. 21:37ㆍLanguage/ES6
1. Arrow Function
Arrow Function은 '=>' 화살표를 사용하는 축약형 함수이다. 사용되는 곳은 다음과 같다.
- 표현식의 결과값을 반환하는 표현식 본문 (1)
- 상태 블록 본문 (2)
(1)
let arr = [ 1, 2, 3, 4, 5 ];
let twice = arr.map(function(val){ // Arrow Function 사용 전
return val*2;
});
console.log(twice);
----------------------
[ 2, 4, 6, 8, 10 ]
----------------------
let arr = [ 1, 2, 3, 4, 5 ];
let twice = arr.map(v=>v*2); // Arrow Function 사용 후
console.log(twice);
----------------------
[ 2, 4, 6, 8, 10 ]
----------------------
※ 여기서 사용하는 map은 for문과 같은 반복문으로 자바스크립트에서 지원하는 배열 객체 내장 함수이다. 이 map 메서드의 파라미터로 들어가는 것은 함수이고, 이에 대한 결과는 새로운 배열이 되어 출력이된다.
(2)
let arr = [ 1, 2, 3, 4, 5 ];
let twice = arr.map(v=>{
if(v%2 == 0) {
console.log('even number');
} else {
console.log('odd number');
}
});
----------------------
odd number
even number
odd number
even number
odd number
----------------------
let arr = [ 10, 20, 30, 40, 50 ];
let twice = arr.map((v, i)=>{
console.log(`i: ${i}, v: ${v}`);
});
----------------------
i: 0, v: 10
i: 1, v: 20
i: 2, v: 30
i: 3, v: 40
i: 4, v: 50
----------------------
2. Class
1) 기본 사용법
Class는 Java와 거의 동일하다고 생각하면 된다.
class Person {
constructor(region_, gender_) {
this.region = this.region_;
this.gender = this.gender_;
}
greetings(val = 'hello') {
console.log(val);
}
}
let korean = new Person('Korea', 'male');
korean.gender = 'female';
console.log(korean);
korean.greetings();
----------------------
Person { region: 'Korea', gender: 'female' }
hello
----------------------
2) 상속
class Person {
constructor(region_, gender_) {
this.region = this.region_;
this.gender = this.gender_;
}
greetings(val = 'hello') {
console.log(val);
}
}
class American extends Person {
constructor(region_, gender_, language_) {
super(region_, gender_); // 부모 클래스의 규칙을 따른다.
this.language = language_;
}
greetings(val = 'world') { // 오버라이드
console.log(val);
}
}
let american = new American('USA', 'female', 'Eng');
console.log(american);
american.greetings();
----------------------
American { region: 'USA', gender: 'female', language: 'Eng' }
world
----------------------
728x90
'Language > ES6' 카테고리의 다른 글
[ES6] 기본 문법 (2) (0) | 2020.12.23 |
---|---|
[ES6] 기본 문법 (1) (0) | 2020.12.23 |