스프레드(spread) 연산자
반복이 가능한(iterable) 객체에서 요소를 하나씩 분리하는데 사용하는 연산자다. 분리하여 나온 결과를 변수에 할당하거나 호출하는 함수의 매개변수 값으로도 사용이 가능하다. 스프레드 연산자를 이용해서 배열의 구조를 해체하고 다시 새로운 배열에 넣을수도 있다.
- ...
스프레드 연산자는 세 개의 점을 이용한 문법이다. 스프레드 연산자를 이용해서 반복이 가능한 객체들을 합치거나, 요소를 제거하거나 하는 등의 기능을 수행할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 배열에서 spread연산자(...) 사용
const arr1 = [1,2,3,4,5,6];
const arr2 = arr1;
// arr1을 복사한 다음에, arr2를 분해한 값으로 다시 배열을 생성함
// 분해한 후 다시 배열을 생성하게 되면 다른 주소를 참조하게된다. 따라서 둘의 동등연산자의 결과가 false가 나온다.
const arr2_1 = [...arr2];
console.log(arr2_1 == arr2); //false
// arr1과 arr2의 배열을 분해한다음에 두개의 배열을 합치고, 새로운 배열의 값을 추가함
const arr3 = [...arr1, ...arr2, 8, 9, 6]; // [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 8, 9, 6]
console.log(arr3);
// 문자열의 각 문자를 배열로 저장
const str1 = "abcdefg"
const arr4 = [...str1];
console.log(arr4); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
// object에도 spread연산자(...)사용 가능
const obj1 = {
a : 1,
b : "안녕"
}
const obj2 = {
a : 5,
c : "ab"
}
// 같은 key값이 있을 경우 마지막에 선언된 key 값을 가져온다.
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a:5, b:"안녕", c:"ab"}
// 배열의 중간값 제거하기
const arr5 = [1,3,4,5,9];
const arr5_1 = arr5.filter((index)=>{
return index != 4;
});
console.log(arr5_1); // [1, 3, 5, 9]
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
|---|---|
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |
| JavaScript : DOM의 기본에 대하여 (0) | 2024.07.25 |
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |
| JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 (0) | 2024.07.23 |