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
// 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의 인덱스에 일일이 접근하여 새로운 요소를 만들어 줘야한다
스프레드 오퍼레이터를 사용시 코드의 양이 확연하게 줄어드는 장점이있다.
자바스크립트에서 문자열을 입력하는 방식 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!
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
구조 분해 문법을 사용시 코드 라인의 숫자를 줄일 수 있고, 전체적으로 코드가 간결해지는 효과가 있다.