[Js] ES6 문법

in Development on Javascript
[Js] ES6 문법

ES6란?

ES6는 ECMAScript6를 의미하는데 ECMAScript는 Ecma라는 기관이 만든 script언어이며 ECMA-262 표준을 따르고 있다. 즉, ECMAScript란 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름을 의미한다.

ES6는 다음와 같은 기능들이 있다.

  • const / let
  • 화살표 함수
  • 비구조화 할당
  • for…of 문
  • Spread Operator
  • 템플릿 문자열
  • 객체 리터럴
  • 프로미스
  • 클래스
  • Default Parameter(기본 매개 변수)

ES6 문법

const / let

  • const

    • 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수
    • 상수로 사용
    • Js에서 HTML요소를 선택하려면 var대신 const사용이 적합

  • let

    • 새로운 값을 받을 수도 있고 재할당 할 수도 있다.

var을 쓰지 않고 const / let으로 사용하는 이유는 var의 hoisting현상을 피하기 위함 hoisting에 대한 내용은 추후 포스트를 올릴 예정이다.

화살표 함수

  • function 키워드 없이 함수 생성 가능
  • 가독성 및 유지보수성 증가
  • 함수 본문안에 return만 존재할 경우, return과 {}을 생략하여 식의 계산 값을 자동으로 반환
const myFunc = (name) => {
  return `My name is ${name}`;
}
console.log(myFunc('Kim')); // My name is Kim

// 'return'키워드 생략 가능
const myFunc = (name) => `My name is ${name}`;
console.log(myFunc('Lee')) // My name is Kim

비구조화 할당

  • 개별 값을 변수에 새로 할당
  • 객체와 배열로부터 속성을 쉽게 꺼낼 수 있는 문법
  • 객체의 속성을 얻기 위해 값을 중괄호 안에 넣어 더 간결하게 정의 가능
  • 속성과 동일하지 않은 변수를 할당할 경우 undefined 반환
  • 변수의 이름을 바꾸려면 콜론(:)을 사용
const Employee = {
  familyName: "홍",
  name: "길동",
  age: 20,
};

const arr = ['재석', '종국', '광수', 30];

let { company, name, age } = Employee;

// name속성을 otherName으로 변수이름 변경
let { name: otherName } = Employee

let [ val1, val2 , val3 ] = arr;

console.log(company); // 홍
console.log(name); // 길동
console.log(age); // 20

console.log(otherName); // 길동

console.log(val1); // 재석
console.log(val2); // 종국
console.log(val3); // 광수

for…of 문

const iterable = [1, 2, 3, 4, 5];

for (const val of iterable) {
  console.log(val); // 1, 2, 3, 4, 5
}

Spread Operator

  • 특정 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용
const obj = {
  a: 10,
  b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }

const arr = [1, 2, 3];
const newArr = [ ...arr ];
console.log(newArr); // [1, 2, 3]

const addedArr = [ ...arr, 4, 5];
console.log(addedArr); // [1, 2, 3, 4, 5]

템플릿 문자열

  • 문자열내 변수를 사용하기 위해 백틱(`)을 사용
  • ${변수명}
const myFunc = (name, age) => {
  return `이름: ${name}, 나이: ${age}`
}

console.log(myFunc('홍길동', 20)); // 이름: 홍길동, 나이: 20

객체 리터럴

  • 전보다 훨씬 간결해진 코드로 객체 선언 가능
  • 함수명이 겹치는 경우 한 번만 사용
const myName = function () {
  console.log('홍길동');
};

const text = 'hello';

const obj = {
  insideFunc() {
    console.log('객체 안에 함수 선언');
  };
  myName,
  [text + 1] : 'Min's'
}

obj.insideFunc(); // 객체 안에 함수 선언
obj.myName(); // 홍길동
console.log(obj.hello1); // Min's

프로미스

  • 비동기 코드를 쓰는 방법
  • API에서 데이터를 가져오는데 시간이 걸리는 함수에 주로 사용
  • Promise에 대한 이해참고

클래스

  • 객체 지향 프로그래밍(OOP)의 핵심
  • 클래스 기반의 객체 지향 프로그래밍 할 수 있게 도입
// 클래스 생성
class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new myClass('길동', 20);

console.log(user.name); // 길동
console.log(user.age); // 20

Default Parameter(기본 매개 변수)

  • 매개변수 초기화 필요시 내부 작업 필요했으나 ES6에서는 필요 없어짐
  • 기본 매개변수를 사용하여 정의되지 않은 매개변수 사용
const myFunc = (name, age = 20) {
  return `name: ${name}, age: {$age}`;
}

console.log(myFunc('길동')) // name: 길동, age: 20

const myFunc2 = (a = 1, b = 2) => a + b;
console.log(myFunc2()); // 3

Reference

https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
https://share-factory.tistory.com/19
https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/
https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

© 2024. All right reserved Min