ES6에 대해

ES6란

ECMAScript 6

ES6의 새로운 기능

• const and let
• Arrow functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수)
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread poerator(나머지 매개 변수 및 확산 연산자)
• Classes(클래스)

---

ES6 문법

const and let

• const
  • 변수 선언을위한 ES6의 새로운 키워드
  • var보다 강력하다.
  • 사용되면 변수를 다시 할당할 수 없다.
  • 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수이다.
  • 선택자를 대상으로 하는데 매우 유용하다.
  • var가 호이스팅이기 때문이다.
  • 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋다.

// ES5
var MyBtn = document.getElementById('mybtn');
 
// ES6
const MyBtn = document.getElementById('mybtn');
 
// const는 변경되지 않으며 재할당할 수 없다.
// 새로운 값을 제공하려고 하면 오류를 반환

• let
  • 새로운 값을 가질 수도 있다.
  • 재할당할 수도 있다.
  • 변경 가능한 변수가 생성
  • let은 const와 동일하게 모두 블럭 범위이다.
  • 변수는 범위 내에서만 사용 가능하다.

let name = '철수';
 
name = '영희';
 
console.log(name);
// 출력 => 영희

 

실행 시킨 결과

---

Arrow functions

화살표 함수이다.

• ES5

// ES5
function myFunc(name) {
  return '안녕' + name;
}
 
console.log(myFunc('영희'));
// 출력 => 안녕 영희

ES5 실행 결과

• ES6

// ES6
const myFunc = (name) => {
  return `안녕 ${name}`;
}
 
console.log(myFunc('영희')); // 출력 => 안녕 영희
 
// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 된다.
const myFunc = (name) => `안녕 ${name}`;
 
console.log(myFunc('영희'));

 

ES6 실행 결과

• 화살표 함수를 map과 filter, reduce 등 내장 함수와 함께 사용 가능
  • map = 배열안의 원소들을 변환할 때, 원소들을 이용해 새로운 배열을 만들어 리턴한다.
  • filter = 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.
  • reduce = 배열이 주어졌을 때 배열안에 있는 모든 값들을 사용하여 연산할 때 사용한다.
• ES5

// ES5
const myArrary = ['진수', '영철', '영희', 5];
 
let arr1 = myArrary.map(function(item) {
  return item;
});
 
console.log(arr1); // 출력 => (4) ['진수', '영철', '영희', 5]

 

ES5 실행 결과

• ES6

// ES6
let arr2 = myArrary.map((item) =>  item);
 
console.log(arr2); // 출력 => (4) ['진수', '영철', '영희', 5]

 

ES6 실행 결과

---

Template Literals

템플릿 리터럴
백틱을 사용한다.(``)

• ES5

// ES5
function myFunc1(name, age) {
  return '안녕' + name + '너의 나이는' + age + '살 이다.';
}
 
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희 너의 나이는 22살 이다.

 

ES5 실행 결과

• ES6

// ES6
const myFunc2 = (name, age) => {
  return `안녕 ${name}, 너의 나이는 ${age}살 이다.`;
}
 
console.log(myFunc2('철수', 23));
// 출력 => 안녕 철수, 너의 나이는 23살 이다.

 

ES6 실행 결과

---

Default parameters

기본 매개 변수

• 매개 변수를 쓰지 않은 경우
  • 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류를 반환되지 않는다.
  • 누락된 매개 변수를 사용하여 함수를 실행할 때 기본 매개 변수 t값을 사용하고 오류를 반환하지 않는다.
• ES5

const myFunc1 = (name, age) => {
  return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
}
 
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 undefined살 이니?

 

ES5 실행 결과

• ES6

// 기본 매개 변수 사용한 예시
// 정의되지 않은 매개 변수가 반환되지 않고
// 매개 변수 할당을 잊어버렸을 때 해당 값이 사용된다.
const myFunc2 = (name, age = 22) => {
  return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
}
 
console.log(myFunc2('철수'));
// 출력 => 안녕 철수 너의 나이는 22살 이니?

 

ES6 실행 결과

---

Array and object destructing

배열 및 객체 비구조화
배열 또는 개체의 값을 새 변수에 더 쉽게 할당할 수 있다.

• ES5

// ES5 문법
const contacts = {
  famillyName: '이',
  name: '영희',
  age: '22'
}
 
let famillyName = contacts.famillyName;
let name = contacts.name;
let age = contacts.age;
 
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22
 
// 각 변수에 각 값을 할당해야한다.

 

ES5 실행 결과

• ES6

// ES6 문법
const contacts2 = {
  famillyName: '김',
  name: '철수',
  age: '5'
}
 
let {famillyName, name, age} = contacts2;
 
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 김
// 철수
// 5
 
// 객체의 속성을 얻기 위해 값을 중괄호 안에 넣는다.

 

ES6 실행 결과

※ 참고: 속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환된다.

• 예시

const contacts2 = {
  famillyName: '김',
  name: '철수',
  age: '5'
}
 
let {famillyName, username, age} = contacts2;
 
console.log(famillyName);
console.log(username);
console.log(age);
// 출력
// 김
// undefined
// 5

 

undefined 예시

• 변수의 이름을 바꾸려면 콜론(:)을 대신 사용할 수 있다.

const contacts2 = {
  famillyName: '김',
  name: '철수',
  age: '5'
}
 
let {famillyName, name: ontherName, age} = contacts2;
 
console.log(ontherName);
// 출력 => 영희

 

콜론 사용 예시

• 배열의 경우 객체와 동일한 구문을 사용한다.
• 중괄호를 대괄호로 바꿔주면 된다.

// ES6 문법 배열
const arr = ['광희', '지수', '영철', 20];
 
let [value1, value2, value3] = arr;
 
console.log(value1);
console.log(value2);
console.log(value3);
// 출력
// 광희
// 지수
// 영철

 

배열 예시

---

Import and export

가져오기 및 내보내기

• 내보내기

// ES6
// 내보내기
 
export default function detail(name, age) {
  return `안녕 ${name}, 너의 나이는 ${age}살 이다.`;
}

 

• 가져오기

// ES6
// 가져오기
 
import detail from "./detailComponent.js";
 
console.log(detail('영희', 23));
// 출력 => 안녕 영희, 너의 나이는 23살 이다.

 

가져와서 실행한 결과

• 둘 이상의 모듈을 가져오는 경우, 중괄호를 사용한다.

// 둘 이상의 모듈을 가져오는 경우
import {detail, userProfile, getPosts} from "./detailComponent.js";
 
console.log(detail('영희', 23));
console.log(userProfile);
console.log(getPosts);

 

---

Promises

프라미스
비동기 코드를 쓰는 방법이다.

// ES6
// API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 댸 사용가능
 
const myPromise = () => {
  return new Promise((resolve, reject) => {
    resolve('안녕하세요 Promise가 성공적으로 실행했습니다.');
  });
};
 
console.log(myPromise());
// Promise { '안녕하세요 Promise가 성공적으로 실행했습니다.' }

 

promise 코드 실행 결과

※ fetch 함수는 Promise 자체를 반환한다.

// fetch 함수
const url = 'https://jsonplaceholder.typicode.com/posts';
const getData = (url) => {
  return fetch(url);
};
 
getData(url).then(data => data.json()).then(result => console.log(result));
// 데이터 배열이 반환된다.

 

데이터 배열 반환

---

Rest parametr and Spread operator

나머지 매개 변수 및 확산 연산자

• Rest parameter
  • 배열의 인수를 가져오고 새 배열을 반환하는데 사용한다.
  • ... = rest

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
 
// 비구조화를 이용한 값을 얻기
const [val1, val2, val3, ...rest] = arr;
 
const Func = (restOfArr) => {
  return restOfArr.filter((item) => {return item}).join(" ");
};
 
console.log(Func(rest)); // 안녕 지수 어떻게 지내니?

 

코드 실행 결과

• Spread operator
  • Rest parameter와 구문이 동일하다.
  • Spread operator은 인수뿐만 아니라 배열 자체를 가진다.
  • for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있다.

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
 
const Func = (...anArray) => {
  return anArray;
};
 
console.log(Func(arr));
// 출력 => [ [ '영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?' ] ]

 

코드 실행 결과

---

Classes

객체 지향 프로그래밍(OOP)의 핵심이다.
코드를 더욱 안전하게 캡슐화할 수 있다.
class를 사용하면 코드 구조가 좋아지고 방향을 유지

• 기본 문법

// 기본문법
 
class myClass {
  constructor() {}
}

 

• 예시(new)

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
 
const user = new myClass('영희', 22);
 
console.log(user.name); // 영희
console.log(user.age); // 22

 

코드 실행 결과

• 예시(extends)

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다.`);
  }
}
 
// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
  userName() {
    console.log(this.name);
  }
}
 
const profile = new UserProfile('영희', 23);
 
profile.sayHello(); // 안녕 영희 너의 나이는 23살이다.
profile.userName(); // 영희

 

코드 실행 결과