[5] 자바스크립트 – 스프레드 연산자

지난 며칠 동안 나는 JavaScript를 집중적으로 배우려고 노력했습니다. 따라서 다음 몇 개의 게시물에서는 유용한 함수, 메서드 및 구문 기능에 대한 몇 가지 생각을 할 것입니다. 오늘은 자바스크립트 스프레드 연산자부터 시작하겠습니다.

스프레드 구문

자바스크립트 확산 연산자는 공간을 절약하고 구문을 개선하는 매우 유용한 도구가 될 수 있습니다. 아래의 첫 번째 예에서는 args 배열을 5행의 newArgs에 전달하는 데 사용하고 있습니다. 다음으로 7행과 8행에서 해당 배열을 fn 함수에 전달합니다.

fn = (x, y, z, a = 4, b = 5, c = 6) => {
  console.log(x, y, z, a, b, c)
 }
var args = [1, 2, 3]
var newArgs = [...args, "four", "five", "six"] // [1, 2, 3, four, five, six]

fn(...args) // 1 2 3 4 5 6
fn(...newArgs) // 1 2 3 four five six

다음 예는 약간 다릅니다. 여기에서 ...args를 매개변수로 사용하는 함수를 만들고 있습니다. 함수 내부에는 인수 목록을 반복하는 for 루프가 있습니다. 원칙적으로 필요한 만큼 많은 인수가 있을 수 있습니다. 마지막으로, 함수가 호출될 때 주어진 모든 인수(1, 2, 100 등)를 취합니다.

sumAll = (...args) => {
    let sum = 0
    for (let arg of args) {
        sum += arg
    }
    console.log(sum)
}

sumAll(1) // 1
sumAll(1, 2) // 3
sumAll(1, 2, 3) // 6

다음과 같이 스프레드 연산자를 사용할 수도 있습니다.

문자열을 통한 반복.

const str = "Hello"
var letters = [...str]
console.log(letters) // [ 'H', 'e', 'l', 'l', 'o' ]

배열을 숫자(z)와 객체(w)로 나누는 것, 실제로는 다른 배열입니다. (JS 데이터 유형에 대한 추가 정보here).

var [w, ...z] = [1, 2, 3]

console.log(w, z) // 1 [2, 3]

console.log(typeof(w)) // number
console.log(Array.isArray(w)) // false

console.log(z[1]) // 3
console.log(typeof(z)) // object
console.log(Array.isArray(w)) // true

또는 객체를 반복할 수도 있습니다.

var object = {
    a: 1,
    b: 2,
    c: 3,
    *[Symbol.iterator]() {
        for (let key of Object.keys(this)) {
            yield this[key]
        }
    }
}

console.log(...object) // 1 2 3
console.log(typeof(object.a)) // number

최신 예제는 다음과 같은 방법으로도 수행할 수 있습니다. 그러나 이 경우 배열을 반환합니다.

var object = {
    a: 1,
    b: 2,
    c: 3
}

var x = Object.values(object)
console.log(x); // [1, 2, 3]
console.log(typeof(x)) // object

Original post 24.07.20 @ create-react-app.com

사이트https://proj.create-react-app.com/
깃허브https://github.com/villivald