큰일일수록 작게 시작하자

ES6 문법, VUE-CLI 3버전 사용법

25 Jul 2019 | javascript vue-cli es6

ES6 문법

대표적인 4가지 문법입니다

  • 화살표 함수
  • 템플릿 리터럴
  • 모듈
  • 구조 분해와 확장문법

화살표 함수 ( Arrow Functions )

평소에도 가장 많이 사용하는 문법중 하나


// 기존문법 es5
function 함수명(){
    로직
}
// es6 문법
(매개변수값) => {
    실행로직
}
// 매개변수가 하나일 경우, 괄호생략가능
x => { 구현 }

// 매개변수가 여러개인 경우 소괄호 생략불가
(x,y) => { 구현 }

// 함수의 구현내용이 한줄의 return만 있을 경우는 return 과 소괄호 모두 생략가능
x => { return x * x }
x => x * x;

// 객체를 반환하는 경우는 소괄호를 사용한다
() => { return { a:1 }; }
() => ({ a:1 })

// 함수구현 내용이 여러줄일 경우는 생략불가 ^^
() => {           
  const x = 10;
  return x * x;
};

화살표 함수의 호출

  • 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다

//es5 
var pow = function(x){ return x*x };
console.log(pow(10)); // result : 100

//es6, 엄청난 생략이 가능하다
const pow = x => x * x;
console.log(pow(10));

var arr = [1,2,3];
var pow = arr.map(function(x)){
    return x * x;
};

const arr = [1,2,3];
const pow = arr.map(x => x * x);

console.log(pow);

템플릿 리터럴 문법

ES6에서 템플릿 리터럴이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱문자 `를 사용한다


const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

console.log(template);

const template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

// + 연산자 없이 간단하게 사용가능

const first = 'Ung-mo';
const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Ung-mo Lee."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Ung-mo Lee."
// +로 구분지을 필요없이 ${...} 으로 감싸면 문자열내의 표현식은 문자열로 강제로 타입변환 된다.

console.log(`1 + 1 = ${1 + 1}`); 
// "1 + 1 = 2"
  • 출처 : https://poiemaweb.com/

Related Posts

Comments