자바스크립트 ES6 3편

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고

 

1.SPREAD OPERATOR

function addFourAges (a, b, c, d) {
    return a + b + c + d;
}

var sum1 = addFourAges(18, 30, 12, 21);
console.log(sum1);

//ES5
var ages = [18, 30, 12, 21];
var sum2 = addFourAges.apply(null, ages);
console.log(sum2);

//ES6
const sum3 = addFourAges(...ages);
console.log(sum3);
const familySmith = ['John', 'Jane', 'Mark'];
const familyMiller = ['Mary', 'Bob', 'Ann'];
const bigFamily = [...familySmith, 'Lily', ...familyMiller];
console.log(bigFamily);
const h = document.querySelector('h1');
const boxes = document.querySelectorAll('.box');
const all = [h, ...boxes];
Array.from(all).forEach(cur => cur.style.color = 'purple');

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를

 

0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여,

 

0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

 

참고-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문

 

2.REST PARAMETERS

function isFullAge5() {
    //console.log(arguments);
    var argsArr = Array.prototype.slice.call(arguments);
    
    argsArr.forEach(function(cur) {
        console.log((2016 - cur) >= 18);
    })
}

//isFullAge5(1990, 1999, 1965);
//isFullAge5(1990, 1999, 1965, 2016, 1987);

//ES6
function isFullAge6(...years) {
    years.forEach(cur => console.log( (2016 - cur) >= 18));
}
isFullAge6(1990, 1999, 1965, 2016, 1987);

//ES5
function isFullAge5(limit) {
    var argsArr = Array.prototype.slice.call(arguments, 1);
    argsArr.forEach(function(cur) {
        console.log((2016 - cur) >= limit);
    })
}
//isFullAge5(16, 1990, 1999, 1965);
isFullAge5(1990, 1999, 1965, 2016, 1987);

//ES6
function isFullAge6(limit, ...years) {
    years.forEach(cur => console.log( (2016 - cur) >= limit));
}
isFullAge6(16, 1990, 1999, 1965, 2016, 1987);

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를

 

"표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.

 

참고-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest 파라미터

 

3.DEFAULT PARAMETERS

function SmithPerson(firstName, yearOfBirth, lastName, nationality) {
    
    lastName === undefined ? lastName = 'Smith' : lastName = lastName;
    nationality === undefined ? nationality = 'american' : nationality = nationality;
    
    this.firstName = firstName;
    this.lastName = lastName;
    this.yearOfBirth = yearOfBirth;
    this.nationality = nationality;
}

//ES6
function SmithPerson(firstName, yearOfBirth, lastName = 'Smith', nationality = 'american') {
    this.firstName = firstName;
    this.lastName = lastName;
    this.yearOfBirth = yearOfBirth;
    this.nationality = nationality;
}

var john = new SmithPerson('John', 1990);
var emily = new SmithPerson('Emily', 1983, 'Diaz', 'spanish');

ES6에서는 PARAMETER에 DEFAULT값을 지정할 수 있다.

 

4.MAP

const question = new Map();

question.set('question', 'What is the official name of the latest major JavaScript version?');
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES2015');
question.set(4, 'ES7');
question.set('correct', 3);
question.set(true, 'Correct answer :D');
question.set(false, 'Wrong, please try again!');

console.log(question.get('question'));

//console.log(question.size);
if(question.has(4)) {
    //question.delete(4);
    //console.log('Answer 4 is here')
}

//question.clear();
//question.forEach((value, key) => console.log(`This is ${key}, and it's set to ${value}`));

for (let [key, value] of question.entries()) {
    if (typeof(key) === 'number') {
        console.log(`Answer ${key}: ${value}`);
    }
}

const ans = parseInt(prompt('Write the correct answer'));
console.log(question.get(ans === question.get('correct')));

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 

아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다.

 

MAP 인스턴스

Map.prototype.clear()

 

Map 객체의 모든 key/value pair를 제거한다.

 

Map.prototype.delete(key)

 

주어진 키(Key)와 해당되는 값(Value)를 제거하고

 

제거하기 전에 Map.prototype.has(key)가 반환했던 값을 반환한다. 

 

그 후의 Map.prototype.has(key)는 false를 반환한다.

 

Map.prototype.entries()Map

 

객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로

 

가지고 있는 Iterator 객체를 반환한다.

 

Map.prototype.forEach(callbackFn[, thisArg])

 

Map 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다.

 

만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.

 

Map.prototype.get(key)주어진 키(Key)에 해당되는 값(value)을 반환하고,

 

만약 없으면 undefined를 반환한다.

 

Map.prototype.has(key)

 

Map 객체 안에 주어진 key/value pair가 있는지 검사하고

 

Boolean 값을 반환한다.

 

Map.prototype.keys()Map 객체 안의 모든 키(Key)들을 집어넣은

 

순서대로 가지고 있는 Iterator 객체를 반환한다.

Map.prototype.clear()