Written by HyeongJu
on November 23, 2019

자주 사용하는 ES6 문법

변수 선언

var(기존의 변수)

var 변수는 함수 스코프이기 때문에 아래와 같은 코드에서도 참조가 가능하다.
이런 코드는 오히려 보기에 헷갈린다. var는 쓰지 말자.

var var1 = 1;
function varTest(){
  console.log(var1); // 1
    var var2 = 2;
  }
  console.log(var2); // 2
}

const

재선언과 재 할당이 불가능한 변수이다.

const MIN_VALUE = 1;
MIN_VALUE = 10; // Uncaught TypeError: Assignment to constant variable.

let

block scope의 변수이다.

let let1 = 1;
function letTest(){
  console.log(let1); // 1
    let let2 = 2;
  }
  console.log(let2); // Uncaught ReferenceError: let2 is not defined
}

Template Literal

개행을 포함하여 문자열 선언하기

var str1 = 'hello\nworld\nes5';
const str2 = `hello
workd
es6`;

두 개의 출력은 모두 아래와 같다.
이제는 +와 \n를 사용하지 않아도 된다.
코드를 읽기 훨씬 쉬워졌다.

hello
world
es6

문자열에 변수대입, 연산하기

변수를 직접 대입하거나, 간단한 연산도 가능해졌다.

let name = 'HJ.K';
let introduce1 = `저의 이름은 ${name} 입니다.`;
let introduce2 = `저의 이름은 ${name.split('.K')[0]} 입니다.`;
console.log(introduce1);
console.log(introduce2);

출력 결과

"저의 이름은 KHJ 입니다."
"저의 이름은 HJ 입니다."

Spread Operator

새로운 객체 복사

var obj = {
  model: 'macBook-Pro',
  inch: '15 inch'
}
var newObj = {...obj}

Arrow function

간단한 문법으로 사용 가능하다.

// 기존 문법
var sum1 = function(a,b){
	return a+b;
}

// ES6
var sum2 = (a,b) => {return a+b};
var sum3 = (a,b) => a+b; // 괄호와 return도 생략 가능

Enhanced Object Literal

변수 자체로 속성과 값을 대입

let name = 'HJ';
var person = {
  name
}

속성에 함수 정의 할 때 function 예약어 생략

// 기존
const person = {
	talk: function() {
		console.log('hello')
	}
}

// ES6
const person = {
	talk() {
		console.log('hello')
	}
}

JavaScript ES6

Discussion and feedback

← → Top