JS 배열의 Method : Mutable과 Immutable

 

Mutable과 Immutable 개념

Mutable

• 원본이 변한다.
• 참조타입(reference type) : 배열, 객체, 함수 등 원시타입을 제외한 모든 type
• 데이터 주소를 찾아서 값을 변경한다

Immutable

• 원본이 변하지 않는다.
• 원시타입(primitive type) : Boolean, Null, Undefined, 수, 문자열
• 데이터 주소와 별개의 새로운 주소에 값이 할당된다

---

아래 글은 원시자료형과 참조자료형을 정리해 놓은 글이다.

https://wnsdufdl.tistory.com/6?category=1012091 

원시자료형(primitive type)과 참조자료형(reference type)

---

 

배열의 Method 

Mutable

• Array.splice() : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가한다.

  let fruits = ['apple', 'strawberry', 'banana', 'melon']
  
  fruits.splice(1,0,'mango')//1번 인덱스에서 0개 제거하고 'mango' 추가
  
  console.log(fruits) // ["apple", "mango", "strawberry", "banana", "melon"]
  
  fruits.splice(3,1,'May') // 3번 인덱스에서 1개 제거하고 'May' 추가
  //제거되는 요소 = ["banana"]
  
  console.log(fruits) // ["apple", "mango", "strawberry", "May", "melon"]
  
  fruits.splice(3,2,'byebye') //3번 인덱스에서 2개 제거하고 'byebye' 추가
  //제거되는 요소 ["May", "melon"]
  
  console.log(fruits) // ["apple", "mango", "strawberry", "byebye"]
  
  fruits.splice(2,2) // 2번 인덱스에서 2개 제거
  //제거되는 요소 ["strawberry", "byebye"]
  
  console.log(fruits) // ["apple", "mango"]​

• Array.unshift() : 배열의 맨 앞쪽에 새로운 요소를 추가하고 새로운 길이를 반환한다.

const arr = [1,2,3]

console.log(arr.unshift(7)) // 4

console.log(arr) // [7,1,2,3]

• Array.shift() : 배열의 첫번째 요소를 제거하고 제거된 요소를 반환한다.

const arr = [1,2,3]

console.log(arr.shift()) // 1

console.log(arr) // [2,3]

• Array.push() : 배열의 끝에 요소를 추가하고 새로운 길이를 반환한다.

const animals = ['pigs', 'goats', 'sheep'];

console.log(animals.push('cows')); //4

console.log(animals); // ["pigs", "goats", "sheep", "cows"]

• Array.pop() : 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.

const plant = ['potato', 'tomato', 'blueberry']

console.log(plant.pop()) // 'blueberry'

console.log(plant) // ['potato', 'tomato']

Immutable

• Array.concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

arr1과 arr2는 변하지 않는다.

const arr1 = ['a','b','c']
const arr2 = ['d','e','f']

arr3 = arr1.concat(arr2)

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