시작하기에 충분한 JavaScript : #17 rest,spread and destructuring

나머지 및 스프레드 연산자( ... )

👉 ECMA6 출시와 함께 쉼터와 스프레드 오퍼레이터 등장

👉 ... 나머지 및 스프레드 연산자로 사용할 수 있습니다.

쉬다

👉 남은 모든 매개변수를 단일 배열로 수집

👉 문제 설명 : write a function which can perform sum of N numbers
👉코드

const sum = (n1,n2,n3) => {
       return n1+n2+n3;
}

👉 이 솔루션은 3개의 숫자에만 작동하지만 정의에 따라 N개의 숫자를 추가해야 합니다.

👉 이제 문제는 얼마나 많은 매개변수가 전달될지 모른다는 것입니다. 아마도 3개, 5개, 100개?

👉 100개의 숫자에 대해 100개의 함수를 작성할 수 없습니다

👉 솔루션 : 휴식 연산자 사용

👉 나머지 연산자( ... )는 전달된 모든 실제 값을 수집한 다음 하나의 배열로 결합하므로 각 문제에 대해 별도의 함수를 작성할 필요 없이 n개의 매개변수를 전달할 수 있습니다.

👉 Example

const sumOfN = (...elements) => {
     let total = 0;
     // remember rest passes array as arguement
     // we'll loop through each element and add them into total.
     for(i=0;i<elements.length;i++)
     {
             // += is short hand for 'total = total + elements[i]`
             total+=elements[i]; // will add items from array one by one
     }
     return total;
}

// let's check
sumOfN(1); // ✔ returns 1
sumOfN(1,2); // ✔ returns 3
sumOfN(1,2,3); // ✔ returns 6
sumOfN(1,2,3,4); // ✔ returns 10

👉 ECMA 표준에 따라 나머지 연산자를 사용할 매개변수는 매개변수의 마지막에 있어야 합니다.

👉 Example : sumOfN(someOtherVar,...elements)

스프레드 연산자

👉 스프레드 연산자는 나머지 연산자와 유사한 ( ... ) 표현식을 갖지만 다른 컨텍스트에서 작동합니다.

👉확산 연산자를 사용하면 루프를 명시적으로 작성할 필요 없이 요소를 확장할 수 있습니다.
예를 통해 이해하자
👉 문제 설명 : create a program which can merge two arrays
👉 옛날 방식 :

let arr1=[1,2,3];
let arr2 = [4,5,6];
let mergedArray = [];
for(let item of arr1)
{      
       // push method is used to push elements into array at last index
       mergedArray.push(item);
}
for(let item of arr2)
{      
       mergedArray.push(item);
}

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

👉 스프레드 연산자를 사용한 새로운 방법:

let arr1 = [1,2,3];
let arr2 = [4,5,6];

// '...arr1' will unpack 1,2,3 into mergedArray
// '...arr2' will unpack 4,5,6 into mergedArray
let mergedArray = [...arr1,...arr2];

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

👉 Spread를 사용하면 일상적인 어레이 작업을 쉽게 수행할 수 있습니다.

구조화

👉 JavaScript에서 구조화한다는 것은 단순히 객체와 배열에서 원하는 값을 팝핑하는 것을 의미합니다.

👉 Example : The old way

const 🐕 = {
       name : "sharron",
       color : "black",
       age : 9
}

// old way to access values
const name = 🐕.name;
const color = 🐕.color;
const age = 🐕.age;

👉 Example : The new way

const 🐕 = {
       name : "sharron",
       color : "black",
       age : 9
}

// using destructuring to extract values
const {name,color,age} = 🐕;

console.log(name); // sharron
console.log(color);  // black
console.log(age);    // age

const heros = ['iron man', 'super man', 'spider man'];

const [hero1, hero2, hero3] = heros;
console.log(hero1); // "iron man"
console.log(hero2); // "super man"
console.log(hero3); // "spider man"

의심이나 피드백이 있으면 의견 섹션에 알려주십시오. 번창하는 개발자 커뮤니티에 시간을 할애할 가치가 있습니다. :)

계속 코딩 ❤

헤이, 렛츠커넥트👋

/
Github