[JavaScript] 전개 구문 (spread syntax) _ more

전개 구문

배열이나 문자열 객체 등 반복 가능한 값을 복사해서 키-값을 가지는 객체로 반환.

...뒤에 프로퍼티를 추가하여 확장 반환도 가능

 

'...'을 앞에다 붙여 구문 작성

 

배열 리터럴과 문자열

    [...iterableObj, '4', 'five', 6];

<script>
  const arr1 = ["a", "b", "c", "d"];
  const arr2 = arr1.concat(); // arr1을 복사해 새로운 배열 arr2로 반환.
  const arr3 = [...arr2];

  console.log(arr2); // ['a', 'b', 'c', 'd']
  console.log(arr3); // ['a', 'b', 'c', 'd']

  console.log("----------------");
  const arr4 = arr1.concat("생강차", "유자차");
  const arr5 = [...arr4, "마테차", "결명자차"];
  console.log(arr4); // ['a', 'b', 'c', 'd', '생강차', '유자차']
  console.log(arr5); // ['a', 'b', 'c', 'd', '생강차', '유자차', '마테차', '결명자차']
</script>

 

객체 리터럴

    let objClone = { ...obj };

  const dog = {
    name: "Mark",
    age: 3,
    weight: 5 + "kg",
  }

  const animal1 = {...dog} 
  const animal2 = {...dog, hobby: "walking", age: 4};
  console.log(animal1); // {name: 'Mark', age: 3, weight: '5kg'}
  console.log(animal2); // {name: 'Mark', age: 4, weight: '5kg', hobby: 'walking'}
  // 기존 프로퍼티와 같은 키를 추가하면 값이 변경 됨.

 

함수 호출

	myFunction(...iterableObj);

---