230115 JS: 숙달을 위한 메모 - SpreadOperator(전개연산자) 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

 

전개연산자. 영어론 spread operator

단어 뜻대로 풀이하자면 데이터를 뿌리듯이? 출력해주는 방법인데,

이게 어떻게 뿌려지는지는 아래 예시를 통해 기억하고 이해하기 위해 적어보려한다. 

---

우선 전개연산자는 배열이나 문자열 같이 반복이 가능한 문자를 인수또는 요소로 확장해서,

key:value의 객채로 확장 시킬 수 있다.

 

예시

const obsts = ['Apfel', 'Banane', 'Kirsh', 'Mango'];
console.log(obsts); //>> ['Apfel', 'Banane', 'Kirshe']
console.log(...obsts); // >> Apfel Banane Kirsh: 문자데이터형식으로 출력

function toObject(x, y, ...z) { // z가 나머지의 모든 아이템들을 받아줌(rest operator)
  return {
    a : x,
    b : y,
    c : z
  }
}
console.log(toObject(...obsts));
/*
{a: 'Apfel', b: 'Banane', c: Array(2)}
a: "Apfel"
b: "Banane"
c: (2) ['Kirsh', 'Mango'] << toObject함수를 통해 z매개변수를 통해 나머지 아이템을 다 받음
*/

console.log(toObject(obsts[0], obsts[1], obsts[2])); 
/*
{a: 'Apfel', b: 'Banane', c: Array(1)}
a: "Apfel"
b: "Banane"
c: ['Kirse'] << console.log에서 2번배열아이템까지 출력하라고 했기때문에 Kirshe까지만 출력
*/


/// 화살표 함수로 바꿔보기(우선 key:value가 같은변수여야함 ex. a:a)
const totoObject = (a, b, ...c) => ({a, b, c});
//{a, b, c} 이렇게만 두면 단순 객체.
//즉 블럭의 의미만 갖고 있기때문에 return을 하려면 ()안에 넣어야 함수가 돌아감
console.log(totoObject(...obsts));

---

코드블럭 안 주석에 설명을 많이 적어서 부산스러울 순 있지만

우선 전개연산자를 통해 나머지연산자로 아이템들을 다 넣어버리는 방식이라는

설명을 적고싶어서 코드블럭에 부득이하게 넣게되었다.

 

아무튼, 전개연산자는 크게는 저런 방법으로 사용되고,

.append()메소드를 사용하며 반복되는 요소들을 끼워넣을 때 같이 사용하면 좋을 것 같단 생각이 들었다.

 

다음은 2차과제에 대한 회고!