ECMA Script 6 - destructuring
De-Structuring
디스트럭처링은 객체의 구조를 해체하는 것을 의한다.
배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다. 이러한 이유 때문에 분할 할당이라고도 한다.
배열 디스트럭처링
= 기준으로 양쪽 모두 배열형식으로 지정해야 된다. 인덱스를 기준으로 값을 할당한다.
<script type="text/javascript">
//분해 (배열, 객체)
const array = [10, 20];
const [x, y] = array;
console.log(x, y); //10 , 20
const [k, k2, k3] = array;
console.log(k, k2, k3); // 10,20,undefined
var a, a2, a3;
[a, a2, a3] = [9, 8, 7];
console.log(a, a2, a3); // 9, 8, 7
const m = [10, 9, [100, 200]];
var b, b2, b3, b4;
[b, b2, [b3, b4]] = m;
console.log(b, b2, b3, b4); // 10, 9, 100, 200
</script>
rest 연산자
const [a, b, ...c] = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(c); // 7,6,5,4,3,2,1 array
함수의 파라미터 destructuring
const sum = ([k, k2]) => k + k2;
console.log(sum([10, 20])); // 30
객체 디스트럭처링
= 기준으로 양쪽 모두 객체 형식으로 지정해야된다. key 값을 기준으로 값을 할당한다. 미리 선언된 변수를 사용하기 위해서는 반드시 () 안에 코드를 작성해야된다.
var { a, b } = { a: 100, b: 200 };
console.log(a, b); //100,200
//변수명 바꾸기
var { a: aa, b: bb } = { a: 100, b: 200 };
console.log(aa, bb); //100,200
//중첩
var x = { k: 100, k2: 200, ppp: { k3: 300 } };
var {
k,
k2,
ppp: { k3 },
} = x;
console.log(k, k2, k3); //100,200,300
function xxx({ a, b, c = 100 }) { // c 디폴트 값 설정
console.log(a + b, c); //300, 100
}
xxx({ a: 100, b: 200 });
json object
key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능
// json객체
var k = 'name';
var n = { name: '홍길동', age: 20 };
console.log(n.name, n['name'], n[k]); //홍길동,홍길동,홍길동
// key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능
// 1. 키 값을 ㅇ변수로 지정하여 사용하기
var x = 'username';
var x2 = 'userage';
var obj = { x: '이순신', x2: 20 };
console.log(obj); // {x: "이순신", x2: 20}
var obj2 = { [x]: '이순신', [x2]: 20 };
console.log(obj2); //{username: "이순신", userage: 20}
// 2. 응용
var obj = { sport1: '축구', sport2: '야구', sport3: '농구' };
console.log(obj); //{ sport1: '축구', sport2: '야구', sport3: '농구' }
var s = 'sport';
var obj2 = { [s + '1']: '축구', [s + '2']: '야구', [s + '3']: '농구' };
console.log(obj2); //{ sport1: '축구', sport2: '야구', sport3: '농구' }
// 3. 키 값을 연결
var obj3 = { ['one' + 'two']: 100 };
console.log(obj3); //{onetwo:100}
Author And Source
이 문제에 관하여(ECMA Script 6 - destructuring), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ssswon/ECMA-Script-6-destructuring
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
디스트럭처링은 객체의 구조를 해체하는 것을 의한다.
배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다. 이러한 이유 때문에 분할 할당이라고도 한다.
= 기준으로 양쪽 모두 배열형식으로 지정해야 된다. 인덱스를 기준으로 값을 할당한다.
<script type="text/javascript">
//분해 (배열, 객체)
const array = [10, 20];
const [x, y] = array;
console.log(x, y); //10 , 20
const [k, k2, k3] = array;
console.log(k, k2, k3); // 10,20,undefined
var a, a2, a3;
[a, a2, a3] = [9, 8, 7];
console.log(a, a2, a3); // 9, 8, 7
const m = [10, 9, [100, 200]];
var b, b2, b3, b4;
[b, b2, [b3, b4]] = m;
console.log(b, b2, b3, b4); // 10, 9, 100, 200
</script>
const [a, b, ...c] = [9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(c); // 7,6,5,4,3,2,1 array
const sum = ([k, k2]) => k + k2;
console.log(sum([10, 20])); // 30
= 기준으로 양쪽 모두 객체 형식으로 지정해야된다. key 값을 기준으로 값을 할당한다. 미리 선언된 변수를 사용하기 위해서는 반드시 () 안에 코드를 작성해야된다.
var { a, b } = { a: 100, b: 200 };
console.log(a, b); //100,200
//변수명 바꾸기
var { a: aa, b: bb } = { a: 100, b: 200 };
console.log(aa, bb); //100,200
//중첩
var x = { k: 100, k2: 200, ppp: { k3: 300 } };
var {
k,
k2,
ppp: { k3 },
} = x;
console.log(k, k2, k3); //100,200,300
function xxx({ a, b, c = 100 }) { // c 디폴트 값 설정
console.log(a + b, c); //300, 100
}
xxx({ a: 100, b: 200 });
key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능
// json객체
var k = 'name';
var n = { name: '홍길동', age: 20 };
console.log(n.name, n['name'], n[k]); //홍길동,홍길동,홍길동
// key값으로 접근 가능하기도 하며, 배열의 변수명으로 접근 가능
// 1. 키 값을 ㅇ변수로 지정하여 사용하기
var x = 'username';
var x2 = 'userage';
var obj = { x: '이순신', x2: 20 };
console.log(obj); // {x: "이순신", x2: 20}
var obj2 = { [x]: '이순신', [x2]: 20 };
console.log(obj2); //{username: "이순신", userage: 20}
// 2. 응용
var obj = { sport1: '축구', sport2: '야구', sport3: '농구' };
console.log(obj); //{ sport1: '축구', sport2: '야구', sport3: '농구' }
var s = 'sport';
var obj2 = { [s + '1']: '축구', [s + '2']: '야구', [s + '3']: '농구' };
console.log(obj2); //{ sport1: '축구', sport2: '야구', sport3: '농구' }
// 3. 키 값을 연결
var obj3 = { ['one' + 'two']: 100 };
console.log(obj3); //{onetwo:100}
Author And Source
이 문제에 관하여(ECMA Script 6 - destructuring), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssswon/ECMA-Script-6-destructuring저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)