[ES6] 데이터컬렉션(1) - Array (배열) (변경자 ,수정메서드 ,조작 등)

데이터컬렉션을 다루는 구조들을 알아보겠습니다. 먼저 첫번째로 이번 포스팅에서는 Array에 대해 알아보겠습니다. 주의사항들 위주로 다루겠습니다.

Array는 높은 유연성을 가진 컬렉션입니다. 다른 컬렉션을 Array로 변경해 작업한 뒤, 원래의 데이터구조로 복구하기도 합니다.
일련의 작업들(추가,제거,정렬,필터링,교체 등)을 하기에 다양한 메서드를 갖고 있어 조작하기도 쉽습니다.

ES6의 새로운 문법중 상당수가 배열과 관련되어 있습니다. 그 만큼 배열이 높은 가치를 인정받고 있다는 증거이기도 합니다.

---

1.Array를 직접조작하는 메서드

저도 Array메서드를 유용하게 사용하고 있습니다.

하지만 주의사항이 있습니다.
원본을 조작하는 메서드들을 사용할 땐 !! 내가 뭘 하고 있는지 알아야 합니다.

원본을 조작하는 메서드 

const origin = ['a','b','c','d']
const copied = some
copied.push('e')
console.log(origin)
console.log(copied)

간단한 코드입니다.

push()는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
origin과 copied 배열의 결과값은 동일하게 ['a','b','c','d','e'] 가 됩니다.

origin배열의 값이 abcd같은 단순한 문자가 아니라 사용자 정보 등 중요한 데이터라면 문제가 됩니다.

그리고, 추가만 한다면 차라리 다행이지만
만약, MDN > 인스턴스메서드 > 변경자메서드 를 보시게되면 삭제, 변경 등도 있는데 이런 경우는 'push()'보다 문제가 더 커집니다.

내가 원본을 직접 조작해도 되는지, 아니면 복사해서 사용해야 하는지 판단에따라 다른 방법을 사용해야 합니다.

조작없이 간편하게 복사해서 사용할 수 있는 펼침 연산자 (전개 연산자, spread operator) 에 대해서는 후에 포스팅하겠습니다.

2.Array의 특징

MDN에서의 Array문서 를 보시면
배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다.

밀집도가 보장되지 않는다는 것

const someArray = [1,2]
someArray[100] = 101
console.log(someArray)        // [ 1, 2, <98 empty items>, 101 ]
console.log(someArray[50])    // undefined (임의의 중간값 입니다.)

---

  배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용합니다. 속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않습니다.

인덱스로 정수만 가능하다. 문자열을 이용할 경우 배열 객체로 저장된다. 순회,변형작업은 배열리스트요소부분 (정수 인덱스) 에만 실행된다.

// someArray에 문자열 key를 추가했을 때 순회결과 

const someArray = [1,2]
someArray[100] = 101
someArray['stringKey'] = 'stringResult'
someArray.forEach(element => {    // forEach문은 리스트요소만 순회
    console.log(element)
    //1
    //2
    //101
});     

for(const i of someArray) {    // for...of문 리스트요소만 순회
    console.log(i)      
    // 1
    // 2
    // undefined
    // ...
    // undefined
    // 101
}

// someArray['stringKey']가 존재하지 않을까요?
// someArray 객체를 2차원배열화해서 출력하겠습니다.
console.log(Object.entries(someArray))

결과 : 
[
  [ '0', 1 ],
  [ '1', 2 ],
  [ '100', 101 ],
  [ 'stringKey', 'stringResult' ]
]
// 첫 코드에는 출력되지 않았지만 someArray['stringKey']는 존재합니다.

for...of, forEach는 someArray의 iterable 요소(숫자 index요소)만 순회합니다.

추가로 덧붙이면, for...in 문을 사용하게 했을 때는
[ '0', '1', '100', 'stringKey' ] 가 출력됩니다.
for... in문이 내부적으로 Object.keys()를 사용해 key값들을 배열화 시킨뒤 인덱스를 순회하기 때문입니다.

읽어주셔서 감사합니다!