Javascript destructng array and object.

 destructuring 은 구조화된 배열 또는 객체를 비구조화 시켜서 개별의 변수에 할당하는 것이다.

배열 또는 객체 리터럴에서 필요한 값을 추출할때 유리하다.


1
2
3
4
5
6
const arr = [2, 3, 4];
const a = arr[0];
const b = arr[1];
const c = arr[2];
 
const [x, y, z] = arr;
const [x , , z] = arr;
cs

일반적으로 배열의 값을 변수에 할당하는 방법으로 변수 마다 하나씩 배열의 값을 손수 할당해 주었다.

destructuring 에서는 배열의 값을 바로 할당할 수 있다.
x , y , z 에 각각 배열 0 ,1 ,2 번째 값이 할당돼 있는 것이다. 그리고 , , 으로 필요없는 값은 스킵 할 수 있다.

1
2
3
//Nested destructuring
const nested = [2, 4, [5, 6]];
const [i, , [j, k]] = nested;
cs

감싸져 있는 구조의 경우 다음과 같이 할당이 가능하다. 각각 i = 2 , j = 5 , k = 6 이 할당이 되어 있는 상태이다.

만약 없는 배열의 값을 가져오게 되는 경우는 undefined 를 가져오지만 디폴트 값을 설정해 줄 수도 있다.

1
2
//default value
const [p = 1, q = 1, r = 1] = [8, 9];
cs
 
배열의 세번째 값은 없다. 따라서 r 에는 undefined가 할당되어야 하지만 디폴트 값 설정으로 인해 r 에는 1이 할당된다.




객체의 desturcturing 에 대해 알아보겠다.
객체의 디스터럭쳐링을 위해선 프로퍼티의 이름이 필요하다.

1
2
3
4
5
6
7
8
9
10
11
const myself = {
  name: 'colin',
  family: ['me', 'father', 'mother', 'sister', 'dog'],
  parttimejob: {
    mon: {
      open: '18:80',
      close: '20:00',
    },
  },
  age: 22,
};
              cs

우선 myself 라는 객체를 만들고 이를 이용하겠다.

1
2
const { name, family, age } = myself;
console.log(name, family, age);
cs

name 그리고 family ,age 의 프로퍼티 값을 프로퍼티 이름으로 할당하였다. 새로운 변수에 할당하려면 어떻게 해야할까?

1
2
const { name: myname, age: myage, family: myfamily } = myself;
console.log(myname, myfamily, myage);
cs

객체 myself의 프로퍼티 이름 name의 값을 myname에 할당했다. 나머지 myage , myself 또한 마찬가지이다.


//Mutating variables
let a = 12;
let b = 10;

const obj = { a: 20, b: 19, c: 18 };
({ a, b } = obj);
console.log(a, b);

변수를 바꿀 때에도 사용할 수 있다. 이때 중괄호를 괄호로 묶은 이유는 중괄호가 첫 줄로 오게 되면 코드 블럭으로 인식하기 때문에 나름에 꼼수를 사용한 것이다.

1
2
3
4
5
6
7
8
9
10
11
//object in array
const {
  family: [i, , j],
} = myself;
console.log(i, j);
 
//object in object
const {
  parttimejob: { open: o, close: c },
} = myself;
 
                    Colored by Color Scripter
                               cs

객체 안의 객체 , 배열에 디스터럭쳐링 하는 방법이다.


만약 없는 특성값을 객체에서 가져오게 되면 어떻게 될까 마찬가지로 undefined를 가져오겠지만 이때에도 디폴트 값을 설정하는 방법이 있다.
 

1
2
//delfault
const {girlfriend = []} = myself;
                                    cs

myself 에는 girlfriend 라는 특성이 없다. 따라서 undefined가 할당되어야하지만 위 코드와 같이 디폴트 값을 설정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
introduce: function ({ myname, myage, myfamilyindex }) {
console.log(
 `my name is ${myname} and ${myage} years old, i love ${this.family[myfamilyindex]}`
    );
};
 
myself.introduce({
  myage: 21,
  myname: 'jiji',
  myfamilyindex: 2,
});
cs
 
introduce 가 myself의 매쏘드라고 생각하고 보자. 인자를 객체로 작성한 사실을 볼 수 있다.
이는 destructuring 을 이용하여 작성한 방식으로 api 를 이용할때 강력한 능력을 가진다.

즉,
{ myname, myage, myfamilyindex }={myage: 21,myname: 'jiji',myfamilyindex: 2,}

위 코드와 같은 역할을 한다. 


























댓글

댓글 쓰기

이 블로그의 인기 게시물

Javascript this keyward

This 란? This 는 모든 실행 컨텍스트(모든 함수)에 대해 생성되는 특별한 값이다. 그리고 this 키워드가 사용된 함수의 "owner" 의 값을 가진다 this는 값이 똑같지 않다. this 의 값은 함수가 어떻게 호출됬는지에 따른다. 그리고 this의 값은 오직 함수가 실제로 호출될 때만 할당된다. Method => this 는 method를 소유한 객체를 가르킨다. Simple function call => this = undefined (엄격 모드에서만 해당된다. 아닐 경우 전역 객체인 window 의 값을 가져온다.) Arrow function => this = lexical this 이다. 즉, 자신을 둘러싼 환경의 this 를 그대로 승계받는다. Event Listener = > this => handler 함수가 붙어 있는 DOM 요소이다. new,call,apply,bind => later course.. this 는 사용하고 있는 함수를 절대 가르키지 않는다. 또한 함수의 variable environment를 절대 가르키지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 const  jonas  =  {   firstName:  'Jonas' ,   year:  1991 ,   calcAge:  function  () {      console .log( this );      console .log( 2037   -   this .year);   },     greet: ()  = >   console .log(`Hey ${ this .firstName}`), }; jonas.greet(); ...
자세한 내용 보기

Javascript Object vs Primitives (Primitives vs reference type)

이미지
먼저 조금은 이해가 가지 않는 코드에 대해 이야기해보자. 1 2 3 4 5 6 7 8 9 const  me  =  {   age :  21 , }   const  you  =  me; you.age  =   30 ;   console .log(you);          //30 console .log(me);           //30 me 라는 객체에서 나이에  21을 할당했다.  그리고 you 에 me 의 객체를 똑같이 넣어주고 you의 나이를 30 으로 할당했다. 이때 me 의 객체와 you 의 객체는 따로 있으므로 나이는 다르다고 생각 할 수 있다. 하지만 값은 둘 다 30으로 동일하다. 어떻게 이런 일이 일어날까 이를 알기 위해서 우선 primitives value 와 object 의 차이를 알아야 한다. 자바스크립트에서의 원시값은 7개로 int , string , boolean ,  undefined , symbol, bigint, Null 있다. 원사 값을 제외한 모든 값은 Object로 대표적으로 object literal , array , function ....... 등이 있다. 자바스크립트 엔진의 구성요소에 대해 기억하는가? 콜 스택과 메모리 힙으로 구성되어 있다. 여기서 간단하게 말하자면 원시 값 (primitive type) 은 콜 스택에 저장되고 객체 (reference type) 은 메모리 힙에 저장된다. 콜 스택 그리고 메모리 힙에서 어떻게 원시 값과 객체가 저장되는 지는 아래 글을 ...
자세한 내용 보기

javascript 15 switch statement

자바스크립트의 스위치 명령문에 대해 알아보자 스위치 명령문은 if/else 와 비슷하다. 아래 쓰인 예시를 보자.  const day = ' wednesday ' ; switch ( day ) {     case ' monday ' :   //day === monday         console . log ( ' today is monday! ' );         console . log ( ' sad day ' );         break ; 위의 코드를 보면 괄호안에 어떤 변수가 필요한지 선언해야 한다. case 옆에는 변수안의 값이 일치하는지 확인하기 위한 요소이며 type coerison이 적용되지 않아 === 처럼 strict comparison operator 라고 생각하면된다.     case ' tuesday ' :         console . log ( ' today is tuesday! ' ); //if no break code is executed until break appear     case ' wednesday ' :     case ' saturday ' :         console . log ( ' my Favorite day! ' );         break ; 위에 tuesday 에서는 break; 를 뺏는데 이 경우 아래 break 코드가 나올때 까지 모든 코드를 실행 시킨다. 따라서 wednesday 그리고 saturday는 같은 결과를 가진다.     default :         console . log ( ' good day! ' )...
자세한 내용 보기