ES6_2강

  문법(2)

1. 화살표 함수(=>)

함수 표현식을 화살표 함수로 표현할 수 있다. 함수를 간결하게 작성할 수 있는 방식으로, 가독성 및 유지 봇성을 높이는 방식이다.

 

변수 = (매개변수) => { ... };	const func = (p) => { ... };
매개변수가 하나일 경우 괄호를 생략	const func = p => { ... };
매개변수가 없거나 둘 이상일 경우 괄호 필수	const func = () => { ... };   const func = (a, b) => { ,,, };
정의부에 return [값 || 식] 뿐인 함수는 return과 {, }를 생략	const func = function(p) {        return p + 1;   };   const func = p => {p + 1};   const func = p => p + 1;
return에 객체를 보내는 경우 ',' 필수	const func = () => ({       a: 1,       b: 2   });
this를 통한 동적 바인딩 불가 화살표 함수 내부의 this는 window를 나타냄	$("#id").click(function() {       $(this).text("off");   });   위의 경우는 화살표 함수를 사용할 수 없음

 

ex)

const add4 = function (a, b) {
    return a + b;
}

const add4_1 = (a, b) => {
    return a + b;
}

const add4_2 = (a, b) => a + b;

const nowdate1 = function () {
    let d = new Date();
    return d;
}

const nowdate2 = function () {
    return new Date();
}

const nowdate3 = () => new Date();

const objReturn = function (x) {
    objx = {
        xfact: x,
        yfact: 10
    };
    return objx;
}

const objReturn2 = x => ({ xfact: x, yfact: 10 });

 

2. Array Helper

배열과 관련된 작업을 보다 깔끔하게 처리할 수 있도록 지원하는 것들로, 화살표 함수와 함께 사용한다.

 

forEach	배열의 처음 요소부터 순서대로 사용하도록 지원   array.forEach(function(value, index, arr) { ... })   arr : 원본 배열(변경할 필요가 있을 경우 사용)
map	배열 내의 모든 요소 각각에 대하여 연산을 수행하고 그 결과로 새로운 배열을 생성(원본 배열 유지)   array.map(function(value, index, arr) { ... })
filter	주어진 함수의 조건식이 true인 요소를 모아 새 배열로 생성   array.filter(function(value, index, arr) { ... })
find	주어진 판별 함수를 만족하는 첫 번째 요소값을 반환, 없을 경우 undefined를 반환   array.find(function(value) { ... })
every	배열 안의 모든 요소가 주어진 판별 함수를 통화하는지 테스트   boolean 값을 반환
some	배열 안의 한 요소라도 주어진 판별 함수를 통과하는지 테스트   boolean 값을 반환
reduce	배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하여 하나의 결과를 생성   리듀서(reducer) 함수란? 현재 상태와 액션 객체를 파라미터로 받아 새로운 상태를 반환하는 함수   array.reduce(function(acc, v, i, a { ... }, 초기값)   => acc(accumulator, 누산기) : 함수에서 실행할 리듀서의 값을 제공   =>  초기값 : 리듀스 초기값(없으면 배열의 첫 번째 요소를 사용

 

ex)

const numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// numArr.forEach(function (v, i, a) {
//     a.shift(); // 처음 위치의 요소를 출력하고 제거
//     console.log(a);
// });

numArr.forEach((v, i, a) => {
    a.shift();
    console.log(a);
});

// map
const mapArr = [1, 4, 6, 9, 16];
// const mapArr1 = mapArr.map(function (x) {
//     x = x * 2;
//     return x;
// });

const mapArr1 = mapArr.map((x) => {
    x = x * 2;
    return x;
});
console.log(mapArr1); // [2, 8, 12, 18, 32]
console.log(mapArr); // [1, 4, 6, 9, 16]

// filter
const numArr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// const highArr = numArr2.filter(function (v) {
//     return v > 5;
// });

const highArr = numArr2.filter( v => v > 5 );
// const lowArr = numArr2.filter(function (v) {
//     return v <= 5;
// });

const lowArr = numArr2.filter( v => v <= 5 );

console.log(highArr); // [6, 7, 8, 9, 10]
console.log(lowArr); // [1, 2, 3, 4, 5]

// find & findIndex
const fValue = numArr2.find( v => v > 5);
const fIndex = numArr2.findIndex(v => v > 5);
console.log(fValue); // 6
console.log(fIndex); // 5

// every
const e1 = numArr2.every(v => v > 0);
const e2 = numArr2.every(v => v >= 5);
console.log(e1); // true
console.log(e2); // false

// some
const e3 = numArr2.some(v => v < 0);
const e4 = numArr2.some(v => v >= 10);
console.log(e3); // false
console.log(e4); // true

// reduce
let iv = 100;
const sum = numArr2.reduce((acc, v) => acc + v, iv);
console.log(sum); // 155