[JavaScript] ES6 문법

ES6

ES ( ECMAScript )의 뒤에 있는 숫자는 버전을 의미한다.
ES5는 2009년 출시, ES6은 2015년에 출시되었다.

ECMA Script

Ecma International이 ECMA-262 기술 규격 정의된 표준화된 스크립트 프로그래밍 언어다.

ES6 문법

1. let, const 키워드

ES5까지 변수 선언할 때 var 키워드를 사용했다. 중복 선언이 가능했지만 변수 값이 변경될 수 있다.
ES6 이후로 let과 const 키워드 사용한다.

// var 키워드 사용
var Myname = "민지";
Myname = "민지!"
console.log(Myname); // 민지!

// let 키워드 사용
let Age = "비밀";
Age = "비밀!";
console.log(Age); // 비밀!

// let 키워드 재선언
let Age;
let Age; // 에러

// const 키워드 사용
const Color = "초록색";
Color = "보라색";
console.log(Color); // 에러

let 은 변경 가능하지만 동일한 이름으로 다시 선언 할 수 없다.
const는 값을 변경하면 에러가 생긴다. 에러를 해결하기 위해선 선언과 초기화를 함께 해주면 된다.

2. Template String (템플릿 리터럴)

문자열 연결하기 위해 + 사용하지 않고 `(백틱)과 ${ 변수명 } 표현식 사용한다.
\ (백슬래시)로 이스케이프 하지 않고 줄바꿈 할 수 있다.

// ES5
var age = 24.9;
var color = "Green";
var like = "영상 시청";
var str = "좋아하는 색은 " + color + "\\n 나이는 " + age +"살, "+ 
like +"좋아합니다.";

console.log(str);
// 좋아하는 색은 Green
// 나이는 24.9살, 영상시청 좋아합니다.

// ES6
const age = 24.9;
const color = "Green"
const like = "영상 시청"     
const str = `좋아하는 색 ${color} 
나이는 ${age}살, ${like} 좋아합니다.`;

console.log(str);
// 좋아하는 색은 Green
// 나이는 24.9살, 영상시청 좋아합니다.

3. Arrow Functions (화살표 함수)

function 키워드 대신 화살표( ⇒) 사용해 함수 선언한다.
return 키워드 생략해도 자동 반환한다.

// ES5 함수
function Myname(name){
    return name;
}
console.log(Myname("Minji")); // Minji

// ES6 함수
const Myname = (name) => {
    return `${name}`; // return 생략 가능
}
console.log(Myname("Minji")); // Minji

map, filter 등 내장 함수에서도 사용 가능!

// ES5 함수
var a=[3,4,"ES5"];
var b=a.map(function(e) {
    return e + e;
});
console.log(b); // [ 6, 8, 'ES5ES5' ]

// ES6 함수
const a = [3, 4, "ES6"];
const b = a.map(c => c + c);

console.log(b); // [ 6, 8, 'ES6ES6' ]

4. Classes

객체 생성될 때 호출되는 constructor() 생성자 사용한다.
클래스 선언할때 첫 글자는 무조건 대문자로 지정한다.
⭐ 클래스 - 붕어빵 틀, 인스턴스(객체) - 붕어빵 ⭐

// 클래스 선언
class Score {
    // constructor(생성자)
    constructor(math, english) {
        this.math = math;
        this.english = english;
    }
}

// 점수 선언 
const score = new Score(60, 40);

console.log(score.math); // 60
console.log(score.english); // 40

5. destructing

객체와 배열 값을 쉽게 할당할 수 있고, 코드는 간결해진다.

// Object Destructing (객체 비구조화)

// ES5 
var student = {
    name: "해바라기",
    color: "노란색",
};

var name = student.name;
var color = student.color;
console.log(name, color); // 해바라기 노란색

// ES6
const student={
    name: "해바라기",
    color: "노란색",
};

const {name, color}=student;

console.log(name, color); // 해바라기 노란색

// Array Destructing (배열 비구조화)

// ES5
var arr = ['화', '요', '일'];
var first = arr[0];
var secound = arr[1];
var third= arr[2];
console.log(first, secound, third); // 화 요 일

// ES6
const arr = ['화', '요', '일'];
const [first, secound, third] = arr;
console.log(first, secound, third); // 화 요 일

📚 참고
https://poiemaweb.com/es6-class

Class | PoiemaWeb