JS의 3가지 개발 해킹 ...배열용 확산 연산자

소프트웨어 엔지니어이기 때문에 항상 새로운 것을 배우고 루프에서 구현합니다😉. 이 게시물은 자바스크립트 ES6 ...확산 연산자에 관한 것입니다. 삶을 더 쉽게 만들고 전문가처럼 코딩하세요.😎

확산 연산자란?

MDN은 어떻게 정의합니까?


간단히 말해서 배열과 같은 iterable에 적용할 수 있는 점 3개(...) 뿐입니다. 요소를 결합/복사하도록 설정합니다. 개체에 적용하면 키-값 쌍을 업데이트/추가하는 데 도움이 됩니다.

스토리별로 배열에 어떻게 적용되는지 이해해 봅시다.

장면 1: 기능에 대해 작업 중이고 결합할 요소가 다른 2개의 배열이 있습니다. 어떻게 하시겠습니까?

cosnt array1 = ["JS", "REACT", "GIT"]
const array2 = ["Node", "Mongo"]

이것이 당신이 따르고 있는 접근법입니까?

const newArray = array1.concat(array2);

console.log(newArray)
// output -> ["JS", "REACT", "GIT", "Node", "Mongo"]

그렇다면 아래 항목을 사용하여 시작하십시오. 권장되고 이해하기 쉬우며 더 투명합니다.

const mergedArray = [...array1, ...array2];

console.log(mergedArray)
// output -> ["JS", "REACT", "GIT", "Node", "Mongo"]

Just for sake of understanding consider spread as "remove bracket and get all the elements inside them"😜

장면 2: mergedArray가 있고 이제 이를 복제하고 일부 작업을 수행하려고 한다고 가정해 보겠습니다.

// we now have mergedArray= ["JS", "REACT", "GIT", "Node", "Mongo"]

배열을 복제해 봅시다. 매우 쉽습니다. 그냥 과제.

const cloneArray = mergedArray;

clonedArray[0] = "Python";

conosle.log(clonedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😎

console.log(mergedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😲

우! 당신은 그런 일이 일어날 것이라고 기대하지 않았습니다. 배열은 참조 유형이며 변수에 할당되면 실제 값이 아닌 참조를 저장합니다. 따라서 "="할당 연산자를 통해 병합된 배열을 복제하면 값이 아닌 주소가 저장됩니다. 따라서 복제된 배열에서 변경된 내용은 실제 배열을 변경한 것입니다.

그렇다면 어떻게 해야할지, 걱정하지 마시고 오퍼레이터를 구출하세요.✨

const clonedArray = [...mergedArray];

clonedArray[0] = "Python";

conosle.log(clonedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😎

console.log(mergedArray) 
// ["JS", "REACT", "GIT", "Node", "Mongo"]😃

여기서 스프레드 연산자는 mergedArray의 주소를 참조하지 않고 대신 새 주소에 배열을 복사하므로 clonedArray에서 변경한 내용이 mergedArray를 변경하지 않습니다.

장면 3: 숫자 배열이 있고 배열에서 최대 및 최소 요소를 가져오는 방법을 가정해 보겠습니다. ...확산을 믿으세요😂

const numberArray = [22, 58, 46, 20, 5]

console.log(Math.max(...numberArray)) // -> 58
console.log(Math.min(...numberArray)) // -> 5

이 게시물을 읽으면서 귀중한 시간을 할애해 주셔서 감사합니다. 오늘 뭔가를 배우셨으리라 확신합니다.😄