ES6란?

ES6(ECMAScript 2015)는 JavaScript 언어의 표준 스펙인 ECMAScript의 여섯번째 버전이다. ES6에서는 기존 JavaScript에 많은 기능들이 추가 되었다. 새롭게 추가된 주요 기능과 간단한 예문을 작성해보겠다.

1. let, const

‘let’과 ‘const’ 키워드는 ES6에서 추가된 변수 선언 키워드이다. 기존의 ‘var’는 함수레벨 스코프를 가지는 반면 , ‘let’과 ‘const’는 블록 레벨 스코프를 가진다. 또한 const는 한번 할당된 값을 변경할 수 없다.

let a = 'Hello';
a = 'Hi'; //가능

const b = 'Hello'
b = 'Hi' //불가능 

2. Arrow Function (화살표 함수)

화살표 함수는 기존의 함수 선언 방식보다 간결한 문법으로 함수를 선언할 수 있게 해준다. 또한 this 바인딩의 방식이 기존함수와 다르다.

let sum =  function(a){
        return a+a
    } //기존방식

const add = a => a+a ; //화살표

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

템플릿 리터럴은 문자열을 간편하게 다룰 수 있도록 도와주는 문법이다. ‘${}’ 구분을 이용하여 문자열 안에 변수를 삽입할 수 있다.

const name = 'YuJeong';
    const age = 29 
    console.log(`Hello, ${name} , 나이는 ${age}`);

4. 구조 분해할당

구조 분해 할당은 배열이나 객체의 요소를 간편하게 추출할 수 있게 해주는 문법이다. 객체에서의 구조분해할당은 많이 쓰인다.

const person = {
        name:"yujeong",
        age : 29
    }

    const { name, age  } = person;

    console.log(name) 
    console.log(age)

//만약 구조분해할당을 이용하지 않으면 다음과 같이 대입해야한다.
const name = person.name
const age = person,age

ES6(ECMAScript 2015)는 JavaScript 언어의 표준 스펙인 ECMAScript의 여섯번째 버전이다. ES6에서는 기존 JavaScript에 많은 기능들이 추가 되었다. 새롭게 추가된 주요 기능과 간단한 예문을 작성해보겠다.

5. Promise

Promise는 JavaScript에서 비동기 처리를 위한 객체이다.

const myPromise = new Promise( (resolve, reject) => { //콜백함수
  // 구현..
  // resolve(값) or reject(값)
})

6. Modules

import, export 라는 새로운 문법을 도입하여 모듈을 사용할 수 있게 되었다.

import Es6 from "./Es6"

import React from "react"

const Es6 = () => {
  const person = {
    name: "yujeong",
    age: 29,
  }

  const { name, age } = person

  console.log(name)
  console.log(age)

  //만약 구조분해할당을 이용하지 않으면 다음과 같이 대입해야한다.
  //const name = person.name
  //const age = person,age

  return <div></div>
}

export default Es6

7. Spread

// Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Rest
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

8. Default Parameters

… 기호를 사용하여 배열이나 객체의 요소를 확장하거나, 함수의 파라미터를 더 유연하게 사용할 수 있다.

"use client"

import React, { useEffect } from "react"

const Params = () => {
  const greet = (name: string = "Lee") => {
    return `hello, ${name}`
  }

  useEffect(() => {
    console.log(greet())
    console.log(greet("Yu"))
  }, [])

  return <div></div>
}

export default Params