ES6의 특징

Junyoung Song·2022년 3월 15일
0

JS

목록 보기
4/13

ES6이 왜 중요한가?
ES6에서는 새롭개 지원하는 기능들이 많이 추가가 되었기에 중요합니다.

  1. const 와 let 의 추가
    constlet 은 ES6에서 추가된 변수 선언 키워드입니다. constletvar 보다 더욱더 엄격한 변수 선언을 가능하게 해줍니다.
    const의 경우 중복 선언이 불가능하고, 한번 선언이 될경우 변경이 불가능 합니다.
    let의 경우 중복 선언이 불가능하지만, 선언된 값의 재할당이 가능합니다.
    기존의 var는 글로벌 스코프였지만 let 과 const는 둘다 blocked-scope이고 선언된 블록 ({}) 스코프 안에서만 유효합니다.

  2. 화살표 함수 (Arrow function) 와 템플릿 리터럴
    화살표 함수와 템플릿 리터럴의 경우 당신의 코드의 가독성을 더욱더 높여줍니다. 또한 화살표 함수의 경우 map, filter, reduce와 같은 내장 함수들과도 같이 사용이 가능하도록 해줍니다.
    기존의 함수

function myFunc(name) {
	return "Hello" + name;
    }
    
console.log(myFunc('said'));
// ouput
// Hello said

화살표 함수

const myFunc = name => {
	return "Hi ${name}`;
}
console.log(myFunc('said'))// output Hi said
  1. 기본 매개 변수 (Default Parameters)
    기본 매개변수를 설정한다면 만약 우리가 함수에 값을 지정해주는것을 잊은 경우에도 우리가 미리 지정했던 값을 전달해 주기 때문에 에러가 나지 않도록 해줍니다. 그렇기 때문에 혹시나 값을 입력받지 못하거나 제대로 입력하지 않아 발생하는 에러의 경우를 미리 신경쓸 수 있습니다.

  2. 비구조화 할당 (Destructuring Assignment)
    ES5 시절에는 각각의 변수에 각각의 값을 선언 해주어야 했습니다. ES6에서는 값을 중괄호 {} 안에 넣기만 하면 객체의 값을 받아올 수 있습니다.

  3. 모듈 (Modules)
    import 와 export를 JS 에서 쓴다면 독립적이고, 재활용이 가능한 부분을 만들 수 있도록 해줍니다.
    export는 모듈을 다른 곳에서도 쓸 수 있도록 해줍니다.
    import는 다른 모듈을 자신이 있는 곳에서 쓸 수 있도록 해줍니다.

  4. Promises
    Promises는 동시에 발생하지 않는 코드를 작성하는 방법입니다. Promises는 API로 부터 데이터를 가져오거나, 작동하는데 시간이 걸리는 함수가 있을때 사용 할 수 있습니다. Promises는 이러한 문제를 해결하는데 큰 도움을 줍니다.

const myPromise= () => {
    return new Promise((resolve, reject) => {
        resolve('Hi the Promise execute successfully')
    })
}
console.log(myPromise())
// Promise {<fulfilled>: 'Hi the Promise execute successfully'}

만약 우리가 데이터를 받아 온 뒤에 함수가 작동하도록 하고 싶다면, Promise를 사용합니다.
Promise는 두가지의 인자를 입력받습니다. resolvereject를 오류를 다루기위해 사용합니다.

  1. 클라스 (Classes)
    클라스는 객체 지향 프로그래밍의 핵심입니다. 클라스는 당신의 코드를 더욱더 안전하고 함축적으로 만들어 줍니다. 클라스를 생성하기 위해서는 class 키워드를 사용해서 생성할 수 있습니다.
class myClass{
	constructor(name, age){
    	this.name = name;
        this.age = age;
    }
}

const user =new myClass('Said', 22);
console.log(user.name) // Said
console.log(user.age) // 22

클래스를 생성한뒤, new 키워드를 통해 클래스의 항목에 접근이 가능합니다.

0개의 댓글