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'}
'React Native' 카테고리의 다른 글
class (react native) (1) | 2022.09.30 |
---|---|
Arrow function (react native) (0) | 2022.09.30 |
for ... in, for ... of 반복문 사용방법(react native) (0) | 2022.09.29 |
String literal(react native) (1) | 2022.09.29 |
var let const 의 차이(react native) (0) | 2022.09.29 |