[TIL]ES6에 추가된 문법

XCC629·2022년 6월 16일

TIL

frontend

목록 보기

9/16

저와 같은 경우에는 ES6+가 익숙하고, 바벨을 사용하기 때문에 전 버전은 어떠했는지와 전 버전에 비해 어떤 것들이 추가되었는지를 잘 알지 못했습니다. 추가된 문법 중 자주 쓰이는 것들을 정리해보았습니다.

let, const
템플릿 리터럴
화살표 함수
구조분해할당
promise
class
Spread, Rest
Default parameter
객체리터럴

🏆

📎 let, const 키워드

ES5의 var의 단점을 보완하여 le,const 키워드가 생겼습니다.. var는 거의 쓰지 않는데, 그 이유는 전에 했던 포스트를 참고해주세요.

자바스크립트 기초 4. var, let, const

📎 템플릿 리터럴

중간에 변수를 넣을 수있습니다.
이스케이프 시퀀스(Escape Sequence) 없이 공백을 쉽게 표시할 수 있습니다.

//기본적인 사용
const string = `이건 문자열입니다.`;

//변수 넣기
const age =  10;
const myAge  = `저는 ${age}살 입니다.`;

//공백표현
const longString = `와아아~~

와와~~~~`

📎 화살표 함수

기존의 function보다 간편하게 쓸 수 있습니다!

const arrowFunc = (a, b) => {
	return a + b
}

//단순 return일 경우에는 {}를 생략할 수 있습니다.
const arrowFunc2 =  (a, b) => a + b

//콜백으로 쓸때 편합니다.
arr.map((el) => el * 2)

화살표 함수로 할 수 없는 것
this, prototype, arguments 정보를 생성하지 못합니다.

this

자신이 호출되면서 생성된 실행 콘텍스트에서 thisBinding 정보를 생성하지 않습니다.
= 호출이 되더라도 '누가' 호출했는지에 대한 정보를 생성하지 않습니다. 즉, 스코프 상의 this를 참조합니다. this가 위치한 스코프에서 this가 무엇인지 찾고, 해당 스코프에 this가 없다면 스코프 체인을 타고 올라가며 가장 가까운 this를 참조하게 됩니다.
const obj = {
  fn1: function() { console.log(this); },
  fn2: () => { console.log(this); },
}
obj.fn1(); // {fn1: ƒ, fn2: ƒ}
obj.fn2(); // this === Window

prototype

없습니다! new로 출해도 인스턴스 객체 만들어지지 않습니다.

arguments

생성하지 않습니다!

// 자바스크립트에서는 파라미터를 작성하지 않더라도 함수 선언시 arguments 객체가 생성되기 때문에 전달인자를 받을 수 있다.
const fn = function() {
  console.log(arguments);
}
const arrowFn = () => {
  console.log(arguments);
}
// ...(rest parameter)는 뒤에오는 데이터를 배열로 인식하기 때문에
// args는 이미 array이다. 
const arrowFn2 = (...args) => {
  console.log(args);
}
fn("a","b","c"); // arguemnts {0:"a", 1:"b", 2:"c"}
arrowFn("a","b","c"); // ReferenceError: argument is not defined
arrowFn2("a","b","c"); // arg ["a","b","c"]

📎 구조 분해 할당

const obj =  {
	name: 'xcc629',
    job: 'frontend Developer'
    }
    
const {name, job} = obj
console.log(name) //  'xcc692'

📎 Promise

비동기 처리 때의 콜백 지옥을 벗어나기 위해서 도입된 방법입니다.

var promise = new Promise(function(resolve, reject) {
});

더 자세한 내용은 아래를 참고하세요.
Promise

📎 class

프로토타입 기반 객체 지향패턴을 더 쉽게 사용할 수 있는 대체제입니다.

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

📎 spread operator

const arr = [1,2,3,4,5]

const new_arr = [...arr] // [1, 2, 3, 4, 5]

📎 rest

function f(x, ...y) {
  // y is an Array ["hello", true]
  return x * y.length;
}
f(3, "hello", true) // 6

React에서 props 전달할 때 많이 사용했다. 명시할 필요없는 props를 바로 전달해줄 수 있어서 편했다.


function Component({id, title, ...rest}){

return(
	<Wrapper {...rest}>
    	<id> {id} </id>
    	<title> {title} <title/>
    </Wrapper>
)

}

📎 Default Parameter

파라미터의 초기값을 넣어주는 방법이 매우 간편해졌다.


function func(a, b=100){
	return a + b 
}

console.log(func(100)) // 200

📎 Module

모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다.

type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다.

모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.
출처: [JavaScript] ES6 문법

<script type="module" src="lib.mjs"></script>

📎 객체리터럴

var obj = {
	sayHello: function(){
    	console.log('HEllO!')
    }

}

메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.

const myFn = function() {
  console.log('myFn');
};
const text = 'TEXT';


const obj = {
  sayHello() {
    console.log('HELLO!~');
  },
  myFn,
  [text + 1]: '하나몬'
};
obj.sayHello(); // 출력값: 'HELLO!~'
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 하나몬