[ES6] 기본 문법 (3)

2020. 12. 23. 21:37Language/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