rest operator, spread operator (react native)

rest operator

rest operator는 함수의 마지막 파라메터 앞에 들어가는 ... ←이것이다.

모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법이다.

// Rest Operator
function printNum(num1, num2) {
    console.log(num1, num2);    // 1 2
    console.log(arguments);     // 1,2,3,4,5
}

function printNums(num1, ...num2) {
    console.log(num1, num2);    // 1 [2, 3, 4, 5]
}

printNums(1, 2, 3, 4, 5);

 

 

Spread Operator

spread Operator는 함수를 호출할때 인수로 사용할 수도 있고, 배열안에 들어갈수도 있고, 객체 안에 들어갈 수도 있다.

Rest Operator와는 다르게 함수를 호출할때 쓰기 때문에 중간에 낑겨있어도 된다.

// Spread Operator
function sum (x, y, z) {
    return x+y+z;
}
console.log(sum(1,2,3));        // 6

let arrNum = [10, 20, 30]
console.log(sum.apply(null, arrNum))    // 60
console.log(sum(...arrNum));            // 60

function sum1(a,b,c,d,e,f) {
    return a+b+c+d+e+f;
}
console.log( sum1(10, ...arrNum, 40, 50) )  // 160

 

이번엔 String 에서 어떻게 쓰이는지 보자

let face = ['눈', '코', '입'];
let head = ['머리카락', ...face, '귀'];
console.log(head)       // ['머리카락', '눈', '코', '입', '귀']

위에서 본거랑 별 차이를 못느낀다.

이번엔 윗 배열을 카피를 해볼까?

let faceCopy = [...face]
let faceCopy2 = face
console.log(faceCopy)   // ['눈', '코', '입']
console.log(faceCopy2)  // ['눈', '코', '입']

String에서 배열을 spread Operator로 카피를 하거나 그냥 카피를 해도 결과값은 똑같이 나온다.

하지만 push를 하면 다른 결과값이 나온다.

let foot = ['발톱', '발바닥', '발가락'];
let footCopy = [...foot]
let footCopy2 = foot

footCopy.push('발등')
console.log(foot)       // ['발톱', '발바닥', '발가락']
console.log(footCopy)   // ['발톱', '발바닥', '발가락', '발등']

footCopy2.push('손가락')
console.log(foot)       // ['발톱', '발바닥', '발가락', '손가락']
console.log(footCopy2)  // ['발톱', '발바닥', '발가락', '손가락']

spread Operator로 카피를 한 footCopy에 push를 하고 나온 값을 보니

foot은 그대로이고, footCopy에만 '발등' 이라는 결과를 얻을수 있다.

 

하지만 그냥 카피를 한 footCopy2에 push를 하고 나온 값은

foot에도 footCopy2에도 '손가락'이 추가된 결과를 볼 수 있다.

원본데이터까지 바꿔버리는 좋지 않은 코드는 지양토록 하자.

 

객체 안에서는 어떻게 사용되는지 한번 보자

let fruit = {
    apple: 'red',
    banana: 'yellow'
}

let newFruit = {
    melon: 'green',
    grape: 'purple',
    ...fruit
}

console.log(newFruit)	// {melon: 'green', grape: 'purple', apple: 'red', banana: 'yellow'}