일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- vuex
- vue
- EM6
- 상태관리
- vuetify
- VR
- AR
- PHP
- vue-template-compiler
- web
- CI/CD
- A-Frame
- version mismatch
- PDO
- Node
- JS
- 3d
- promise
- aframe
- bootstrap
- WebXR
- Component
- auth0
- javscript
- npx
- JavaScript
- Three.js
- package-lock.json
- array
- WebVR
Archives
- Today
- Total
대가는 결과를 만든다
[ES6] 비구조화 할당, 객체 리터럴 생성 간편화 본문
반응형
1. 비구조화 할당
: 객체의 필드를 꺼내 새로운 변수를 대입하는 상황을 단순화
//ES5
var example ={
name : "james",
age: "15",
school: "some"
};
var name = example.name;
var age = example.age;
//ES6 비구조화 할당
const example ={
name : "james",
age: "15",
school: "some"
};
let {name, age} = example;
console.log(name, age); //james 15
//ES6 함수 파라미터 응용
const example ={
name : "james",
age: "15",
school: ["some", "any", "how"]
};
function printSchools ({schools}) {
schools.map((school)=>{
console.log(school);
});
}
printShools(example);
//some
//any
//how
//ES6 배열의 비구조화 할당
const language = ["java", "c", "python", "kotlin"];
const [first, second, third] = languages;
console.log(first, second, third);
//java c python
2. 객체 리터럴 생성 간편화
- 객체 생성시 프로퍼티 초기화, 메서드 정의 간편화
//ES6
const name = "홍길동";
const age = "22";
const example = {
name,
age,
getName(){ //ES5 : getName: function (){
return this.name
}
}
console.log(example); //{name:"홍길동", age:"22"}
console.log(example.getName) //홍길동
'개발 > Javascript' 카테고리의 다른 글
javascript array 주요 메서드 정리 (ES5 주의) (0) | 2020.01.03 |
---|---|
[ES6] import/export module (0) | 2019.12.24 |
[ES6] String, Array 관련 함수(spread) 추가 정리 (0) | 2019.12.24 |
scroll to animation only with js 예제 (0) | 2019.12.17 |
[스터디] javscript의 상속 Traditional vs ES6 (0) | 2019.09.24 |
Comments