자바스크립트 , 구조분해 할당 (비구조할당) / arguments 활용 / 펼침연산자

 

구조분해 할당이란

 

구조분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 표현식이다.

 

 

객체 구조분해 할당

 

    let sandwich = {
        bread:"더치 크런치",
        meat:"참치",
        cheese:"스위스",
        toppings:["샐러리","토마토","머스터드"]
    }

sandwich 라는 객체가 있다.

이 속성값을 변수에 저장해보자.

    let { bread, meat } = sandwich;
    console.log(`** before => ${bread}, ${meat}`);

let {bread 와 meat} 는 변수 bread 와 meat 이다.

속성과 변수명이 같다면 , 그에 속성값을 할당 받을 수 있다.

 

추후에 변수에 다른것을 저장한다고 하더라도,

변수의 값이 변경된것이지 , 객체의 속성이 변경된 것이 아님에 주의 하자.

    let { bread, meat } = sandwich;
    console.log(`** before => ${bread}, ${meat}`);

    bread="통밀빵";
    meat="한우";
    console.log(`** after => ${bread}, ${meat}`);
    console.log(`** sandwich => ${sandwich.bread}, ${sandwich.meat}`);

 

 

---

프로퍼티의 축약적용 : 속성명과 동일한 이름의 변수값이 속성에 할당된다.

   let xx=11, yy=22;
   let newObj = {
        xx,
        yy,
        sayHi: () => {
            console.log(`** sayHi_New => xx=${newObj.xx}, yy=${this.yy}`);
        } //sayHi
   } //newObj
   console.log(`** newObj => xx=${newObj.xx}, yy=${newObj.yy}`);
   oldObj.sayHi();
   newObj.sayHi();

화살표 함수를 통해 표현하였기 때문에 this.yy 는 값이 undefined.

 

---

배열과 객체의 구조분해 할당의 기초구조를 살펴보자

 

배열의 구조분해 할당(비구조 할당)

 

      let list = [ 1, 2, 3 ]
      let [ a,b,c ] = list

a,b,c 라는 변수에 list의 배열을 순차적으로 집어 넣음.

 

객체의 구조분해 할당(비구조 할당)

      let object = {name: "홍길동", age: 20};
      let {name, age} = object;

위에서 봤듯 , 속성과 변수명이 같을경우 그 변수에 속성값이 할당됨.

 

매개변수로 사용된 배열과 객체의 구조분해 할당을 살펴보자

매개변수로 사용된 배열의 구조분해 할당

   let list = [1, 2, 3, 4, 5 ];
   let [a, b, c, d, e, f, g] = list;
   console.log(`a=${a}, b=${b}, c=${c}, d=${d}, e=${e}, f=${f}, g=${g}`);
   function testParam([a, b, c=a+b, d=a*b]) {
   console.log(`** Test 2.1) 배열형: a=${a}, b=${b}, c=${c}, d=${d}`);
  } 
   testParam([100]); 
   testParam([100, 200]); 
   testParam([100, 200, 30, 40, 50]);

왼편(변수들)과 오른편(배열)의 크기가 다르다.

변수값을 할당 받지 못했다면 , 그저 변수 선언만 된 상태라고 볼 수 있으며,

그 값은 undefined 에 해당한다.

 

testParam 에 해당하는 매개변수는 배열로서 전송하게 되는데,

첫번째 인자인 a 만 받았다면 두번째인자 b는 undefined 에 해당하고

연산의 결과를 적용한 세네번째의 자리는 NaN 값이 나온다.

 

매개변수이상의 값을 전송했다면 그값은 무시되고,

연산적용되는 세네번째의 자리에 직접적인 값이 들어온다면 , 연산이 무시되고 값을 우선적으로 적용한다.

 

매개변수로 사용된 객체의 구조분해할당.

  function testObj({a, b, c=a+b, d=a*b}) {
    console.log(`** Test 2.2) 객체형: a=${a}, b=${b}, c=${c}, d=${d}`);
  }
  testObj({a:100}); 
  testObj({a:100, b:200});
  testObj({a:100, b:200, c:'ObjectTest'});
  testObj({a:100, b:200, c:'ObjectTest', f:'없는 인자 Test'});

매개변수로 객체형태로 전송받는다.

매개변수는 그의 속성값을 말하고 , 

전송되는 인자들의 일치하는 속성값으로 찾게 된다.

전송되는 인자값이 직접적으로 명시된경우 연산보다 우선하게 된다.

전송되는 인자값이 매개변수에 없다면 , 그 값은 무시된다.

---

매개변수와 arguments

js 의 함수의 특징을 살펴보면,

함수의 인자와 전달되는 인자의 갯수가 달라도 오류가 발생되지 않는다.

순차적으로 할당되고 , 나머지는 할당되지 않는 구조이다.

또는 , 객체에서 키값을 찾거나 키값이 없을때 할당되지 않는 구조이다.

함수 호출시 , 함수의 내부적으로 arguments 라는 객체가 생성되고,

배열의 형태로 전달된 인자를 저장한다.

하지만, 배열의 형태일 뿐 배열이 아니기 때문에 배열 메서드는 사용할수 없다.

즉, 가변인자를 사용하는 경우 argumets 객체를 활용할수 있다.

 

- 기본 매개변수

초기값 설정이 가능하고 , 인수 선언시 먼저 선언된 인수의 값을 활용 할 수 있다.

 let gang = {
      resorts: ["강릉","속초","동해","설악산"],
      print: function(delay=1000) {
                console.log('** print Test1) => '+this.resorts.join(","));
                setTimeout(function() {
                  console.log('** print Test2) => '+this.resorts.join(","))             
                  }.bind(this), delay);
      }
    } 
    gang.print();

이와 같이 gang의 메서드인 print를 실행했는데 전달되는 인자가 없다.

매개변수안에 delay 의 초기값을 설정 할 수 있고,

    gang.print(); 안에     gang.print(2000); 이라고 한다면 , delay의 값은 2000이 할당된다.

 

 

나머지 매개변수 (확정되지 않는 매개변수)

 

확정되지 않는 매개변수 정의 방법 

1)arguments 배열 를 활용.

2) ... 펼침 연산자를 활용.

---

1. argumets 배열의 활용

    function test1(pp) {

      //arguments =[11,22,33] -> 호출시 전달된 매개변수 (갯수무관) 모두 담아줌

      if ( arguments[1] ) return pp+arguments[1];

      else return arguments[0];

    }

    console.log(`test1 인자1개 => ${test1(11)}`);      // 11

    console.log(`test1 인자2개 => ${test1(11,22)}`);   // 33

    console.log(`test1 인자3개 => ${test1(11,22,33)}`);// 33

 

매개변수를 여러개 던져주고 있는 상황이다.

이 값에 대한 판단을 if 문을 통해 내부적으로 저장된 arguments를 활용하여

리턴값을 나눠주고 있다.

함수 test1은 전달된 인수 중 두 번째 인수가 존재하면

첫 번째 인수와 두 번째 인수를 더한 값을 반환하고,

두 번째 인수가 없으면 첫 번째 인수를 그대로 반환한다..

 

test1(11) -> arguments가 [11] 인 상황.

test1(11,22) -> arguments가 [11,22] 인 상황.

test1(11,22,33) -> arguments가 [11,22,33] 인 상황.

 

 

---

function test2() {

      let sum = 0;

      for (let i=0; i<arguments.length; i++) {

          sum += arguments[i];

      }

      return sum;

    }

    console.log(`test2 인자 0개 = ${test2()}`); // 0

    console.log(`test2 인자 1개 = ${test2(11)}`); // 11

    console.log(`test2 인자 2개 = ${test2(11, 22)}`); // 33

    console.log(`test2 인자 3개 = ${test2(11, 22, 44)}`); // 77

    console.log(`test2 인자 4개 = ${test2(11, 22, 44, 88)}`); // 165

 

 

test2는 arguments 를 활용하여 , 들어오는 인자들의 합을 구하는 상황이다.

 

 

---

 

2. ... 펼침 연산자를 활용.

 

    function test3(pp, ...args) {

      if ( args[0] ) return pp+args[0];

      else return pp;

    }

    console.log(`test3 인자 1개 = ${test3(11)}`); // 11

    console.log(`test3 인자 2개 = ${test3(11, 22)}`); // 33

    console.log(`test3 인자 5개 = ${test3(11, 22, 33, 44, 55)}`); // 33

 

 

test 3은 매개변수로 ...을 통해 첫번째 인자는 pp에 나머지는 ...을 통해 배열 형태로 받았다.

if 문은 pp 다음의 두번째 매개변수가 존재하면 pp 값과 두번째 매개변수의 값을 더하고,

그렇지 않았을때는 첫번째 매개변수인 pp 값만 반환받는다.

 

    function test4(pp, ...args) {

      let sum = pp;

      for (let i=0; i<args.length; i++) {

          sum += args[i];

      }

      return sum;

    }

    console.log(`test4 인자 0개 = ${test4()}`); // undefined

    console.log(`test4 인자 1개 = ${test4(11)}`); // 11

    console.log(`test4 인자 2개 = ${test4(11, 22)}`); // 33

    console.log(`test4 인자 5개 = ${test4(11, 22, 33, 44, 55)}`); // 165

 

test4는 test 3과 매개변수로 받는 형식이 같다.

인자로 들어오는 값을 담아서  for 문을 통해 합산하여 , 합산 값을 반환한다.

sum 이 처음에 값이 지정된것이 아니고 pp 값을 받아 오기때문에

첫번째 같은경우는 pp가 undefined 임으로 , undefined 로 반환된다.

---

펼침 연산자 ... 이란 ?

 

배열이나 객체에서 하나씩 펼쳐 나열할때 쓰는 용이다.

 

1. 배열의 복사

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]

- 기존의 배열을 복사하는 간단한 방법이다.

 

2.배열의 결합

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

- 배열을 복사하는 방법에서 확장되어 두개 이상의 배열을 복사하여 저장하면,

배열의 결합하여 저장된 변수를 볼 수 있겠다.

 

3. 배열의 추가

const array = [1, 2, 3];
const newArray = [0, ...array, 4];

console.log(newArray); // [0, 1, 2, 3, 4]

- 원본 배열에서의 추가작업이 필요 한경우 새로운 변수로 값을 받아서 저장하면서 , 추가 할 수 있다.

 

보면서 알 수 있듯, 원본을 복사하여 작업하는 형식이기 때문에,

일정부분 삭제 또는 복잡한 추가 작업을 요하는 경우에는 , 미리 선작업이 필요할수 있겠구나 싶다.

 

---

 1. 객체의 복사

const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

console.log(copiedObject); // { a: 1, b: 2 }

배열과 같은 형태로 복사형식을 볼 수 있다.

 

2. 객체의 결합

const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };

console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }

 

 

3.객체의 속성추가 -> 같은 키값을 명시 할 경우 덮어 쓰기가 가능하다.

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, b: 3, c: 4 };

console.log(newObject); // { a: 1, b: 3, c: 4 }

 

---

 

펼침연산자의 인자 활용

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

아까는 매개변수에서 활용한 부분을 보았다면,

함수의 인자로 사용될 수 있다는 것을 보고 넘어가자.