JavaScript _개념정리/ ECMAScript 6_ES6 문법정리

ECMAScript 6

---

ECMAScript는 ECMA 인터네셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다.

 

ES6의 규격 발행은 2015년이며 계속해서 버전이 업이 되면서 사용자 편의에 맞게 기능들이 개선되고 있습니다. ES6이 들어서면서 Promise, 블록 단위 스코프, 애로 평션, 모듈화 지원, 템플릿, 리터럴, 클래스 등이 추가 및 개선 되었습니다.

 

그래서 이번 블로깅은 자주 사용하는 기능들에 대해 정리해보겠습니다! 

 

 

let / const

→ let 과 const는 변수를 선언하는 새로운 키워드 입니다. 옛날에는 var를 사용했는데 최근에는 var보다 const나 let을 많이 씁니다. var를 잘 안쓰는 이유는 let과 const와 다르게 var는 스코프 내부와 외부 함수까지 침범해서 나중에 어떤 작업을 할 때 오류가 생길수 있기 떄문입니다. let과 const는 블록 레벨 스코프를 지원하고 있어 블록 문 만큼 스코프 범위를 가집니다.  추가적으로 const는 한번 선언과 할당이 이뤄지면 재 선언과 재할당이 불가능 합니다.

 

// var  
var testVar = 7;
 
if (true) {
  var testVar = 5;
}
console.log(testVar); // 5
 
// let 
let testLet = 3;
 
if(true) {
    let testLet = 7;
}
console.log(testLet);  // 3
 
// const
const testConst = '컨스트'
testConst = '불변'     //  Uncaught TypeError: Assignment to constant variable. 

 

Template literals

→ Template liiterals는 문자열 안에 데이터를 넣을 수 있게 합니다. 소위 ` (빽틱) 을 사용해서 문자열을 편하게 구성할 수 있습니다.

 

let num1 = 8;
let num2 = 13;
let absNum = Math.abs(num1-num2);
 
let answer = `${num1}과 ${num2}의 절대값은 ${absNum}입니다` 
 
// `으로 감싸고 변수를 지정하고 싶으면 ${변수} 식으로 사용합니다.

answer // "8과 13의 절대값은 5입니다"

 

Shothand

→ 저장한 데이터의 변수 값이 객체의 key와 value 같다면 이를 축약해서 사용할수 있습니다.

 

const name = "joyCoding";
 
const user = {
  name, // name:name 축약                              
  age: 20,
};
 
user.name  // 'joyCoding'

 

Class

→ 객체 지향 방식에서 Class가 등장함에 따라 쉽게 프로그래밍이 가능해졌고 직관적이고 리엑트에서 많이 다루는 문법입니다. 

 

class User {
 constructor(first, last){
  this.firstName = first
  this.lastName = last
  }
getFullname() {
 return `${this.firstName} ${this.lastName}`
  }
}
 
const fullname = new User('joy','coding')
 
console.log(fullname) // User {firstName: "joy", lastName: "coding"}

Arrows Function

→ 기존의 함수를 =>의 형태로 축약시키는 방법이며 무조건 함수 선언식으로 사용해야 됩니다.

 

// es5
function Fn() {...}
const Fn = function() {...}
 
// es6
const Fn = (arg) => {...}
 
// 인자가 하나일 경우 괄호를 생략할 수 있습니다.
const Fn = arg => {...}
 
// 화살표 함수의 유일한 문장이 'return'일때 'return'과 중괄호를 생략할 수 있습니다.
const Fn = arg => console.log(arg)
 
// destructuring 매개변수를 이용하여 아래와 같은 방법도 응용 가능합니다.
const Fn = ({length}) => length
console.log(Fn('12345')) // 5

Destructuring

→ 배열이나 객체의 속성을 해체하고 그 값을 개별 변수에 담을수 있는 표현식입니다. 구조 분해 할당이라고도 불립니다.

 

// 선언과 동시에 할당할수 있습니다.
let [a, b] = ['joy', 2, 3];
console.log(a); // 'joy'
console.log(b); // 2
 
// 공백을 넣어 반환 값을 무시할 수 있습니다.
// spread를 이용해 나머지를 한번에 가져올 수 있습니다.
let [a, , b, ...arg] = [1, 2, 'joycoding', 4, 5];
console.log(a); // 1
console.log(b); // 'joycoding'
console.log(arg); // [4,5]
 
// 객체에서도 사용 가능합니다.
let { a, b } = { a: 10, b: 20 };
console.log(a); // 10
console.log(b); // 20
 
// 선언 후 분해 할당
let a, b;
[a, b] = [5, 3];
console.log(a); // 5
console.log(b); // 3
 
// default, 기본값 분해한 값이 undefined라면 기본값을 대신 사용합니다.
let a, b;
[a = 10, b = 20] = ['hello'];
console.log(a); // 'hello'
console.log(b); // 20
 
// 두 변수의 값을 교환할 수 있습니다.
let a = 5;
let b = ((7)[(a, b)] = [b, a]);
console.log(a); // 7
console.log(b); // 5

 

Rest

→ Rest파라미터는 인자로 넘어온 여러개의 인자들을 하나의 배열로 만들어 줍니다

 

//rest는 ... 이것만 기억합시다!
 
const joyBox = (...rest) => {
  return rest;
};
 
joyBox(1, 'joycoding', [3,4], {id:3421}, 5); // [1, "joycoding", Array(2), {…}, 5]
 

Spread

→ 반복 가능한 배열, 객체, 문자열을 개별 요소로 분리 시킬 수 있습니다.

 

// 배열을 결합할 수 있습니다.
const num = [1, 2, 3, 4, 5];
const combine = ["joy", "coding", ...num];
console.log(b); // ['joy','coding',1,2,3,4,5]
 
// 배열을 복사할 수 있지만 주소가 전혀 다른 참조값입니다.
const joy = [1, 2, 3];
const coding = [...joy];  // [1,2,3]
console.log(joy === coding); // false
 
// 문자열에도 spread 문법이 적용됩니다.
const str = "joycoding";
console.log([...str]); // ['j','o','y','c','o','d','i','n','g']
 
// 객체에서도 spread 문법이 적용됩니다.
const obj = { a: 5, b: 10 };
const obj2 = { ...obj, c: 7 };
console.log(obj2); // {a: 5, b: 10, c: 7}
 
// 만약 객체에 같은 key가 있다면 spread문법이 적용된 객체를 기준으로 해당 key는 바뀝니다.
const obj = { a: 'hello', b: 20 };
const obj2 = { ...obj, a: 30 };
console.log(obj2); // {a: 30, b: 20}

참고자료

https://github.com/lukehoban/es6features

lukehoban/es6features

 

번역본

https://jsdev.kr/t/es6/2944

ES6 문법 정리