Spread
배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용.
예시1
function sum(x,y,z) {
return x + y +z;
}
const numbers= [1,2,3]
sum(...numbers) // 이부분이 배열을 풀어서 각각의 요소에 적용한 것.배열에서 사용하기
Spread문법은 배열에서 사용하기 좋음
1.배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
lyrics = ["head", "shoulders", "knees", "and", "toes"]2.배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않습니다.3.객체에서 사용 / 이때 객체+객체시 동일한 키가 존재한다면 나중에온 value값이 적용됨.
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
cloneObj ={foo: "bar", x: 42}
mergedObj ={foo: "baz", x: 42, y: 13}arguments
spread syntax 도입 이전에 나온것이 arguments
arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'이지만 유사배열임.(배열은 아님)
- 배열과 요소가 같다고 하더라도 배열과 '===' 연산자로 비교해보면 false가 나옴
--> 배열과 유사배열이기 때문에 서로 다름. - typeof arguments //object로 나옴. 배열이나 객체나 object이기 때문
- Array.isArray() 로 확인하면 false가 나옴. // 객체(유사배열) 이기 때문.
Array.from()
이 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array를 만듬.
- Array.isArray() 해보면 true로 나옴
Rest문법
파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용
Spread와 비슷하지만 반대
function sum(...theArgs) {
return theArgs.reduce(previous,current) => {
return previous + current;
}
}
sum(1,2,3) // 파라미터를 입력하여 function sum(...theArgs)에 배열의 형태로 넣음인자의 수가 정해져 있지 않은 경우에도 사용이 가능
function sum(...nums) {
let sum = 0;
for (let i = 0; i < nums.length; i++) {
sum = sum + nums[i];
}
return sum;
}
sum(1, 2, 3) // ...nums로 인해 [1,2,3]인 배열로 들어가므로 nums.lengh는 3이됨.
sum(1, 2, 3, 4)구조 분해(Destructing)
Spread문법을 이용해여 값을 해체한 후 , 개별값을 변수에 새로 할당하는 과정
위치 요소(정보)를 변환 받아서 변수에 저장하는것을 의미.
만들어진 구조를 새롭게 할당한다는 의미.
1.배열의 구조분해
const [a, b, ...rest] = [10, 20, 30, 40, 50];
a = 10
b = 20
rest = [40,50]let [a,b,c] = [1,2]
a=1
b=2
c=undefined
이러한 경우 배열에 기본값을 주면 c값이 undefined가 나오지 않고 기본값을 사용
let [a=3 ,b=4, c=5] = [1,2]
a=1
b=2
c=52.객체의 구조분해
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a // 10
b // 20
rest // {c : 30 , d:40 }let user = {name : "kim" , age: 30}
let {name , age } = user
name // "kim"
age // "30"
//user라는 객체의 key값을 변수로 두고 user객체의 value값이
//변수에 할당되는 구조분해할당let user = {name : "kim" , age: 30}
let {name : username , age: userAge} = user
consle.log(username) // "Kim"
console.log(userAge) // 30
//동일한 key값이면 왼쪽에 있는 value값이 키가되고
//오른쪽에 있는 value값이 value가 된다.
``
## 3. 그대로 반환 받는법
```js
const abc = [1,2,3,4,5,6]
const [...x] = abc
console.log(x) //[1, 2, 3, 4, 5, 6]
abc === x // false 그 이유는 주소값이 서로 다르기 때문 얕은 복사메서드 Reduce()
배열의 각 요소에 대해 주어진 리듀서(Reducer)함수를 실행하고 하나의 결과값을 반환.
즉 배열에서만 사용이 가능하다는 의미.
구문
arr.reduce(callback[, initialValue])
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);accumulator – 이전 함수 호출의 결과. initial은 함수 최초 호출 시 사용되는 초깃값을 나타냄(옵션)
item – 현재 배열 요소
index – 요소의 위치
array – 배열
initail - 값은 생략가능
예시1
const arr = [3,-1,10,5,0]
const sum = arr.reduce(function(accumulator, currentValue) {
console.log(accumulator) // 작동원리를 확인하는법 3, 2 , 12 , 17
console.log(currentValue) // 작동원리를 확인하는 법 -1 , 10 ,5 ,0
return accumulator + currentValue;
})
console.log(sum) // 17예시2
const arr = [3,-1,10,5,0]
const num1 = arr.reduce((acc, value) => acc + value);
console.log(sum1) // 17예시3
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0); //initail값이 0
alert(result); // 150,1 => 1 최초에는 intail값이 sum에 들어가고 current(arr[0]값)
1,2 => 3 첫번째 결과에 의해 sum=1이고 current(arr[1]값)=2
3,3 => 6
6,4 => 10
10,5 => 15
forEach
arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌.
arr.forEach(function(item, index, array) {
// 요소에 무언가를 할 수 있습니다.
});let numbers = [1,2,3,4,5,6,7]
numbers.forEach(number => console.log(number)); // 1,2,3,4,5,6,7이 한번씩 찍힘let numbers = [1,2,3,4,5,6,7]
numbers.forEach(function(number) {
console.log(number)
})let a = [1,2,3,4,5]
let b = [10
a.forEach(abcd => b.push(abcd)) // abcd같은경우는 아무값이나 사용해도됨.
console.log(b) //(6) [10, 1, 2, 3, 4, 5]
