자바스크립트 ES6 2편

1.ARROW FUNCTION

const years = [1990, 1965, 1982, 1937];
// ES5
var ages5 = years.map(function(el) {
    return 2016 - el;
});
console.log(ages5);

// ES6
let ages6 = years.map(el => 2016 - el);
console.log(ages6);
ages6 = years.map((el, index) => `Age element ${index + 1}: ${2016 - el}.`);
console.log(ages6);
ages6 = years.map((el, index) => {
    const now = new Date().getFullYear();
    const age = now - el;
    return `Age element ${index + 1}: ${age}.`
});
console.log(ages6);

1. 화살표 함수는 익명 함수로만 사용할 수 있다.

 

따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

 

2. 콜백 함수로 사용할 수 있다. 이 경우 일반적인 함수 표현식보다 표현이 간결하다.

 

3. function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

 

3-1) 일반 함수의 this

 

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.

 

다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 

 

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

(REGULAR FUNCTION CALL, METHOD CALL)

 

콜백 함수 내부의 this가 메소드를 호출한 객체(생성자 함수의 인스턴스)를 가리키게 하려면 아래의 3가지 방법이 있다.

 

1.that = this

 

2.map(func, this)

 

3.bind(this)

 

3-2) 화살표 함수의 this

 

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 

 

동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 

 

이를 Lexical this라 한다. 

 

화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

3-3) 화살표 함수를 사용해서는 안되는 경우

 

1.메써드

 

메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고

 

상위 컨택스트인 전역 객체 window를 가리킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.

 

2.prototype

 

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 동일한 문제가 발생한다. 

 

prototype에 메소드를 할당하는 경우, 일반 함수를 할당한다.

 

3. 생성자 함수

 

화살표 함수는 생성자 함수로 사용할 수 없다.

 

생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는

 

프로토타입 객체의 constructor를 사용한다.

 

하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

 

4.addEventListener 함수의 콜백 함수

 

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면

 

this가 상위 컨택스트인 전역 객체 window를 가리킨다.

 

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우,

 

function 키워드로 정의한 일반 함수를 사용하여야 한다. 

 

 

참고-https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

2.DESTRUCTURING

var john = ['John', 26];
//var name = john[0];
//var age = john[1];
// ES6
const [name, age] = ['John', 26];
console.log(name);
console.log(age);
const obj = {
    firstName: 'John',
    lastName: 'Smith'
};
const {firstName, lastName} = obj;
console.log(firstName);
console.log(lastName);
const {firstName: a, lastName: b} = obj;
console.log(a);
console.log(b);
function calcAgeRetirement(year) {
    const age = new Date().getFullYear() - year;
    return [age, 65 - age];
}
const [age2, retirement] = calcAgeRetirement(1990);
console.log(age2);
console.log(retirement);

 

DESTRUCTURING 구문은 배열이나 객체의 속성을 해체하여

 

그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

3.ARRAY

const boxes = document.querySelectorAll('.box');

//ES5
var boxesArr5 = Array.prototype.slice.call(boxes);
boxesArr5.forEach(function(cur) {
    cur.style.backgroundColor = 'dodgerblue';
});

//ES6
const boxesArr6 = Array.from(boxes);
Array.from(boxes).forEach(cur => cur.style.backgroundColor = 'dodgerblue');

//ES5
for(var i = 0; i < boxesArr5.length; i++) {
    
    if(boxesArr5[i].className === 'box blue') {
        continue;
    }
    
    boxesArr5[i].textContent = 'I changed to blue!';
    
}

//ES6
for (const cur of boxesArr6) {
    if (cur.className.includes('blue')) {
        continue;
    }
    cur.textContent = 'I changed to blue!';
}

//ES5
var ages = [12, 17, 8, 21, 14, 11];
var full = ages.map(function(cur) {
    return cur >= 18;
});
console.log(full);
console.log(full.indexOf(true));
console.log(ages[full.indexOf(true)]);

//ES6
console.log(ages.findIndex(cur => cur >= 18));
console.log(ages.find(cur => cur >= 18));

 

1.Array.proto.slice

 

arr.slice([begin[, end]])

 

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한

 

얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

 

참고-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

 

2.forEach

 

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

 

참고-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach()

 

3.Array.from

 

Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한

 

객체(iterable object)를 얕게 복사해새로운Array 객체를 만듭니다.

 

참고-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from()

4.for of

 

const array = ['가','나','다','라'];
console.log("size : "+array.length);
const size = array.length;
//객체의 반복 in, 배열 of
console.log("basic");
for(let i=0; i<size; i++){
  console.log(array[i]);
}
 
console.log('forEach');
array.forEach(function(j){
  console.log(array[j]);
});
 
console.log('for of');
for (let k of array){
  console.log(array[k]);
}
 
console.log('for in');
for (let z in array){
  console.log(array[z]);
}


출처: https://aljjabaegi.tistory.com/354 [알짜배기 프로그래머]

 

forEach와 for of 는 배열의 반복에 사용된다.

 

하지만 forEach는 위와같이 callback 함수가 필요하다.

 

굳이 이걸 쓸 필요 없이 같은 기능을 하기 위해나온것이 for of다.

 

 

for (variable of iterable) { statement }

 

variable

 

각 반복에 서로 다른 속성값이 variable에 할당됩니다.

 

iterable

 

반복되는 열거가능(enumerable)한 속성이 있는 객체.

 

*for of와 for in의 차이점

 

basic for문과 for in은 반복변수에 index를 리턴하지만

 

forEach 와 for of 는 해당 값을 리턴하기 때문이다.

 

for in은 object 에서도 사용이 가능하다.

출처- https://aljjabaegi.tistory.com/354 [알짜배기 프로그래머]

 

 

예제