ES6 의 문법들

p-q·2021년 9월 28일
0

JavaScript

목록 보기
5/11

향상된 객체 리터럴(Enhanced Object Literal)

기존 자바스크립트의 객체 정의 방식

var josh = {
	// 속성(property): 값(value)
    language: 'javascript',
    coding: function() {
    	console.log('Hello World');
    }
};

축약문법

속성과 값이 같을경우

객체 정의시 속성(property)와 값(value)이 같으면 아래와 같이 축약가능

var language = 'javascript';

var josh = {
	// language = language
	language
}

속성에 함수를 정의할 때

function 예약어 생략

const josh = {
	// 속성(property): 함수(function)
    coding: function() {
    	console.log('Hello World');
    }
};
josh.coding(); // Hellow World

>>>>> 예약어 생략

const josh = {
	coding() {
    	console.log("Hello World");
    }
};
josh.coding(); // Hello World

스프레드 오퍼레이터(Spread Operator)

스프레드 오퍼레이터 사용법

// obj 객체를 newObj 객체에 복제
var obj = {
	a: 10,
    b: 20
};

var newObj = { ...obj }
console.log(newObj); // {a: 10, b: 20}

//arr 배열을 newArr 배열에 복제
var arr =[1, 2, 3];
var newArr = [...arr];
console.log(newArr); // [1, 2, 3]

기존 자바스크립트의 객체 복제 방식

// 객체(object)의 값을 복제하는 경우
var obj = {
	a: 10,
    b: 20
};
var newObj = {
	a: obj.a,
    b: obj.b
};
console.log(newObj); // {a: 10, b: 20}

// 배열(array)의 값을 복제하는 경우
var arr = [1, 2, 3];
var newArr = [arr[0], arr[1], arr[2]];
console.log(newArr); // [1, 2, 3]

객체 복사시 obj 의 속성들을 일일이 접근해서 대입해줘야하며 배열의 경우에는
기존 배열 arr의 인덱스에 일일이 접근하여 새로운 요소를 만들어 줘야한다

스프레드 오퍼레이터를 사용시 코드의 양이 확연하게 줄어드는 장점이있다.

템플릿 리터럴(Template Literal)

자바스크립트에서 문자열을 입력하는 방식 ES6에서는 백틱(`)을 사용하여 정의한다.

const str = `Hello ES6`;

백틱은 개행할 필요가 없이 입력한 그대로 출력이되며 문자열 중간에 변수를 바로 대입할 수 있으며 연산도 가능하다.

var language = 'javascript';
var expression = `I love ${language}!`; // 문자열 중간에 바로 변수 대입
console.log(expression); // I love javascript!
var language = 'Javascript';
var expression = `I love ${language.split('').reverse().join('')}!`; // 문자열 중간에서 간단한 연산가능
console.log(expression); // I love tpircsavaJ!

구조 분해 문법(Destructuring)

기본 자바스크립트 에서의 구조

var arr = [1, 2, 3, 4];
var obj = {
	a: 10,
    b: 20,
    c: 30
};

구조 분해란?

var {a, b, c} = obj;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

다음과 같이 변수 선언 형식이 자유로워 지는것이다

특정 객체의 값을 꺼내오는 방법

기존 자바 스크립트에서 특정 개체의 값 꺼내오기

var josh = {
	language: 'javascript',
    position: 'front-end',
    area: 'pangyo',
    hobby: 'singing',
    age: '102   
};

var language = josh.language;
var position = josh.position;
var area = josh.area;
var hobby = josh.hobby;
var age = josh.age;

객체의 특정 값을 꺼내올 때마다 일일이 변수를 하나 생성하고 담아줘야 하는 불편함이 있음

구조분해 문법의 특정 개체의 값 꺼내오기

var josh = {
	language: 'javascript',
    position: 'front-end',
    area: 'pangyo',
    hobby: 'singing',
    age: '102   
};

var {language, position, area, hobby, age} = josh;
console.log(language) // javascript
console.log(position) // front-end
console.log(area) // pangyo
console.log(hobby) // singing
console.log(age) // 102

구조 분해 문법을 사용시 코드 라인의 숫자를 줄일 수 있고, 전체적으로 코드가 간결해지는 효과가 있다.

출처: https://joshua1988.github.io/vue-camp/

profile
ppppqqqq

0개의 댓글