[JS] JavaScript ES6 특징 정리하기

JavaScript ES6 (2015)

1. let 과 const

• 블록스코프를 가지고 있다 ( 블록 밖에서 변수 접근 불가 - {} ) => 함수 호이스팅 예방
• const는 재할당 불가 / 초기 선언 시 값 있어야 함

2. Template Literals (탬플릿 리터럴)

• 백틱(`)을 사용
• 문자열 안에 변수를 넣을 수 있다

const student = '짱구';
const school = '떡잎초';

  // 기존
  console.log(
    student + '가 다니는 학교는' +  school + '입니다.'
  );

  // ES6
  
  console.log(`${student}가 다니는 학교는 ${school}입니다.`);

3. Shorthand property names

const student = {
    name: '짱구',
    age: '8',
  };
  const name = '짱구';
  const age = '8'
  // 비추천
  const student2 = {
    name: name,
    age: age,
  };
  // key, value	가 같으면 축약
  const student3 = {
    name,
    age,
  };

4. Destructuring assignment (구조분해할당)

 // object
  const student = {
    name: '짱구',
    age : 8,
  };

  // 기존
  {
    const name = student.name;
    const age = student.age;
    console.log(name, age);
  }

  // ES6
  // student에 있는 key, value가 name,age에 각각 맞게 할당
  { 
    const { name, age } = student
    
    // key 바꾸기
    const { name: Name, age: Age } = student;
  }
  
  // array
  const animals = ['개구리', '고슴도치'];

  // 기존
  {
    const aaa = animals[0];
    const bbb = animals[1];

    console.log(aaa)
    console.log(bbb)
  
  }

  // ES6
  {
    const [xxx, vvv] = animals;
    console.log(xxx)
    console.log(vvv)
    
    
  }

5. Spread syntax (스프레드 연산자)

[...array] 배열 복사
[...array1, ...array2] 복사하면서 합치기

• 주소의 참조값만 복사해오기 때문에 원본 / 사본을 복사하면 다른 것에도 영향을 미치는 것 주의해야 함
• 동일한 key를 가지고 있는 object의 경우 가장 마지막에 있는 것이 앞에 것을 덮어 씌우는 것 주의

6. Default parameters (기본매개변수)

function printMessage(message = 'default message') {
      console.log(message); // 'default message'
    }

    printMessage('hello'); // 'hello'
    printMessage(); // 'default message'
  }

• 인자가 전달 될 때는 인자 값을
• 인자가 전달 되지 않을 때는 기존에 설정한 default 값을 출력

7. Ternary Operator (삼항조건연산자)

let isActive = true;
  // 기존
    if (isActive) {
      console.log("hi")  // hi
    } else {
     console.log("bye")
    }
   
  // ES6
  
    console.log(isActive); // true
    
    isActive = false ;
    console.log(isActive ? 'true' : 'false');

8. Arrow Functions (화살표함수)

=> 로 사용할 수 있으며 함수와 달리 this 가 함수 스코프에 바인딩 되지 않고 렉시컬 스코프를 가진다. 즉, 자신을 감싸는 코드와 동일한 this 를 공유한다.

// 기존
const sum1 = function(x, y) {
  return x + y;
}
const sum2 = (x, y) => {
  return x + y;
};
//ES6
const sum3 = (x, y) => x + y;

Promises (프로미스)

비동기 작업이 맞이할 미래의 완료/실패와 결과 값을 나타내는 객체이다.

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

Classes(클래스)

프로토타입 기반의 객체지향 패턴을 쉽게 만든 장치로, 상속과 생성자 및 인스턴스와 정적 메서드 등을 지원한다.

Modules (모듈)

• import 로 모듈 불러오기
• export 로 모듈 내보내기