ES6+

💡 ES란 ECMAScript의 약자이며 자바스크립트의 표준, 스펙을 나타내는 용어이다.

ES6부터 추가된 기능

1. Variavle(let, const)
2. Arrow Function(화살표 함수)
3. Template Literals
4. Shorthand property names(프로퍼티 속성 이름 생략)
5. Destructuring Assignment(배열 및 객체 비구조화)
6. Rest destructuring
7. Default Parameters (기본 매개 변수)
8. Optional Chaining (?. 문법)
9. Array function (배열 추가 기능)

1. Variavle

let, const 차이로 적어놓은 블로그 글이 있다.

2. Arrow Function

화살표 함수 선언식은 JavaScript 개발자의 편의를 위해 개발 되었다. 기존 function 표현 방식 보다 간결하게 함수를 표현할 수 있다. 자신의 this, arguments, super를 바인딩하지 않는다.

let foo =()=>{
    console.log("hello")
}

let zoo =()=>Date.now()

let koo = (a,b) =>{
    let result = a*b
    return result
}

let koo = (a,b) =>a*b

기존 함수보다 간략해진 것을 볼 수 있다. retrun을 없애면 더 간략하게 쓸 수 있다.

📌 단, return을 없애려면 {} 와 같이 생략해야 한다.

하지만 화살표 함수를 쓰면 안되는 경우도 있다.

1. object안에 함수 정의 시

const person = {
    points: 23,
    score: function(){
       this.points++; // 여기에선 화살표함수 쓰면 point가 증가 안함
    }
}

2. 프로토타입 함수

class Car {
    constructor(make, color) {
       this.make = make;
       this.color = color;
    }
}
let hyundai = new Car("gildong","white")
Car.prototype.summary = function () {
    console.log( `This car is a ${this.make} in the colour ${this.colour}`)
} // 여기서 화살표함수를 쓰면 안된다  hyundai.summary()​

3. this
   자바스크립트에서 모든 일반함수는 실행 될 때마다 함수 내부에 this라는 객체가 추가된다. 이때 this는 이 함수를 부른 객체이다. 또, 화살표 함수는 일반함ㅅ구를 대체할 수 없다. 편하긴 하지만 기존 문법을 100% 대체할 수는 없다.

let age = 20
var obj = {
 age:12,
 foo: function () {
   console.log(this.age)
  },
};
obj.foo()

3. Template Literals (템플릿 리터럴)

템플릿 리터럴은 ES6부터 새로 도입된 문자열 표기법으로, 문자열 생성시 따옴표 대신 백틱(`)을 사용한다. 따옴표와 달리 백틱안에서는 줄바꿈이 반영된다. 또한, 문자열 사이에 변수나 연산을 넣을 때는 "${}" 사이에 표현식을 삽입한다.

var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

4. Shorthand property names(프로퍼티 속성 이름 생략)

object를 선언할 때 속성 이름과 변수 이름이 동일할 때 생략을 할 수 있다.

• 기존 ES5

const name = 'red';
const age = 18;

const obj = {
   name : name,
   age : age
};

• ES6

const name = 'red';
const age = 18;

const obj = { name, age };
const obj2 = { name, age, hobby : '빨강' };

속성 이름과 변수 이름이 같을 때 생략할 수 있어 코드가 보다 간결해졌다.

5. Destructuring Assignment (배열 및 객체 비구조화)

배열과 객체 같은 데이터를 꺼내서 사용할 때 편리하게 사용할 수 있다.

• 기존 ES5

const obj = {
   name : name,
   age : age
};

let name = obj.name;
let age = obj.age;

• ES6

const obj = {
   name : name,
   age : age
};

let {name, age} = obj;

ES6에서 객체의 속성을 얻기 위해 중괄호 안에 넣어주면 각 변수에 값을 알아서 할당해준다. 이때 변수명과 key는 동일해야 한다.

배열도 동일하다 {}대신 []으로 묶어서 쓰면된다.

const arr = ['apple', 'carrots', 'ggingggang', 'durian'];

let [ value1, value2, value3 ] = arr;

6. Rest destructuring

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들을 한데 모아서 저장하고 싶을 때가 있다. 이럴 때는 점 세개(...)를 붙인 매개변수 하나를 추가하면 나머지 요소를 가져올 수 있다.

let person = {
    name:"gildong",
    age:17,
    cute:true
}
let {name, ...rest} = person
console.log(rest) // {age:17, cute:true}

let array = [1,2,3]
let [a,...rest] = array console.log(rest)//[2,3]

7. Default Parameters (기본 매개 변수)

함수를 실행에 필요한 파라미터를 넘겨서 실행하는 경우가 있다. 하지만 파라미터를 넘기는 과정 중 undefiend로 인식하게 되면 오류가 생기면서 코드를 계속해서 실행할 수 없게 된다. 넘겨지는 파라미터가 undefiend로 인식되지 않게 하는 방법이다.

• ES5

const fn1 = (name, age) => {
	return `hi, my name is ${name}. my age is ${age}`;
};

console.log(fn1('carrots')); // hi, my name is carrots. my age is undefined

• ES6

const fn1 = (name, age = 20) => {
	return `hi, my name is ${name}. my age is ${age}`;
};

console.log(fn1('carrots')); // hi, my name is carrots. my age is 20

파라미터를 정상적으로 설정되지 않은 경우 기본 값을 설정하는 개념인 것이다.

8. Optional Chaining (?. 문법)

객체가 특정 속성이 없을 때 에러를 발생했다. 그럴 때 hasOwnProperty 기능을 사용하여 속성이 있는지 체크하고 다음동작으로 넘어가게 했어야 했다.

하지만 이젠 ES6부터는 ?를 써서 쉽게 오류를 체크할 수 있게 되었다.

• ES5

const obj = { a : 1, b : 2 };
console.log(obj.c.innerC); //Uncaught TypeError: Cannot read properties of undefined (reading 'innerC')

if (obj.hasOwnProperty('c')) { // c 속성이 있는지 체크
    if (obj.c.hasOwnProperty('innerC')) { // innerC가 있는지 체크
        console.log(obj.c.innerC); // 출력;;
    }
}

• ES6

const obj = { a : 1, b : 2 };
console.log(obj?.c?.innerC); //undefined

9. Array function (배열 추가 기능)

기존 ES5 코드보다 훨씬 간결해졌다.

배열로 이루어 지는 작업이 많아지다 보니 ES6이후 배열에 대한 내부 기능이 많이 추가됐다.

• map : 배열을 전개하여 작업 후 새로운 배열로 할당

const array = ['apple', 'carrots', 'ggingggang', 'durian'];
const mapResult = array.map((item) => item.length);
console.log(mapResult); // [5, 7, 10, 6]

• filter : 조건에 맞는 요소를 찾아 새로운 배열로 할당

const array = [1, 5, 10, 13, 30, 42];
const filterResult = array.filter((item) => (item % 5 === 0));
console.log(filterResult); // [5, 10, 30]

• reduce : 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 결과값을 반환

const array = [1, 5, 10, 13, 30, 42];
const reduceResult = array.reduce((pre, val) => pre + val); 

console.log(reduceResult); // 101

• find/findIndex : 조건에 맞는 데이터/데이터 index 찾기

const array = [1,2,3,4,5,5,5];
const findResult = array.find(item => item === 5);
const findResult2 = array.find(item => item === 7);
const findIndexResult = array.findIndex(item => item === 5);
const findIndexResult2 = array.findIndex(item => item === 7);

// find : 조건에 맞는 데이터 반환
// 조건에 맞는 요소가 있는 경우 : 첫번째 요소만 return 
// 조건에 맞는 요소가 없는 경우 : undefined return
console.log(findResult); // 5
console.log(findResult2); // undefined

// findIndex : 조건에 맞는 데이터 index를 반환
// 조건에 맞는 요소가 있는 경우 : 첫번째 요소의 index return 
// 조건에 맞는 요소가 없는 경우 : -1 return
console.log(findIndexResult); // 4
console.log(findIndexResult2); // -1

• some/every : 조건에 맞는 데이터 여부에 따라 true/false 반환

const array = [1,2,3,4,5,5,5];
const someResult = array.some(item => item > 3);
const everyResult = array.every(item => item > 1);

// some : 조건이 맞는 요소가 하나라도 있으면 true, 없으면 false를 반환
console.log(someResult); // true

// every : 배열의 모든 요소가 조건에 맞으면 true, 아니면 false를 반환
console.log(everyResult); // false

• flat : 중첩 배열 차원 정리 / 빈공간 삭제

const array = [1, [2, 3], [4, 5]];
const array2 = ['carrots', 'apple', , , , , , , , 'durian'];

array.flat(1); // 중첩 배열 차원을 맞춰줌
console.log(array); // [1,2,3,4,5]

array2.flat(); // 빈 값 데이터를 정리해준다.
console.log(array2); // ['carrots', 'apple', 'durian'];

참조 : https://velog.io/@carrotsman91/ES6-%EB%AC%B8%EB%B2%95