5.배열다루기 -1 (Javascript의 배열은 객체다, Array.length, 배열 요소에 접근하기, 유사 배열 객체, 불변성)

■ 순서

1.Javascript의 배열은 객체다

2.Array.length

3.배열 요소에 접근하기

4.유사 배열 객체

5.불변성

 

---

1.Javascript의 배열은 객체다

: 자바스크립트는 index에 아래와 같이 문자열이나 객체를 넣어줘도 들어간다.

: 자바스크립트의 배열은 객체이기 때문이다.

const arr = [1,2,3];

arr[3] = 'test';
arr['property'] = 'string value'; //실행안됨
arr['obj'] = {}; //실행안됨
arr[{}] = [1, 2, 3]; //실행안됨
//실행안되는 이유는 for문에서 index에 숫자만 넣어줘서 그렇다.



arr['func'] = function () {
  return 'hello';
};

for (let i = 0; i < arr.length; i++) {
  consloe.log(arr[i]);
}

자바스크립트의 배열은 객체이기 때문에

사용을 할때 아래와 같이 확인을 해주는 것이 좋다.

 

const arr = [1, 2, 3];

console.log(Array.isArray(arr)); //true

---

2.Array.length

: 아래와 같이 Array.length를 바로 셋팅을 해주면 배열이 저런식으로 바껴버린다.

 

const arr = [1, 2, 3];
console.log(arr.length); //3

arr.length = 10;
console.log(arr.length); //10

//arr이 [1, 2, 3, , , , , , ] 이런식으로 되어버린다!!!

 

 

문제는 아래와 같은 상황이다. 당연히 length가 5개라고 생각하고 있는데 10개가 되어버린다.

const arr = [1, 2, 3];
arr[3] = 4;
console.log(arr.length); //4

arr[9] = 10;
//arr이 [1, 2, 3, , , , , , 10]
console.log(arr.length); //10, 오마이갓... 5개가 아니라 10개가 나온다!!

 

 

하지만, 아래와 같이도 사용이 가능하다.

배열의 길이를 0으로 셋팅함으로써 배열을 비워줄 수 있다.

Array.prototype.clear = function () {
  this.length = 0;
}

function clearArray(array) {
  array.length = 0;
  
  return array;
}

const arr = [1,2,3];

console.log(clearArray(arr)) // []

---

3.배열 요소에 접근하기

: 아래와 같이 배열 요소를 가져올때 index를 쓰는 것보다 명시적으로 가져올 수 있게 하는 것이 좋다.

 

const array = [1, 2, 3];

function operationTime(input,operators, is) {
  inputs[0].split('').forEach((num) => {
    cy.get('.digit').contains(num).click();
  });
  
  inputs[1].split('').forEach((num) => {
    cy.get('.digit').contains(num).click();
  });
}

 

예를 들면 아래와 같이 배열마다 어떤 요소인지 구별을 할 수 있게 해준다.

function formatDate(targetDate) {
  const [date] = targetDate.toISOString().split('T'); // 하나인데도 사용이 가능하다
  
  const [year, month, day] = date.split('-');
  
  return `${year}년 ${month}월 ${day}일`;
}

 

 

아니면 함수를 하나 만들어 주는 것도 좋다.

0, 1 이런것들을 줄여주자.

function hear(arr) {
  return arr[0] ?? ''
}

function formatDate(targetDate) {
  const date = head(targetDate.toISOString().split('T'));
  
  const [year, month, day] = date.split('-');
  
  return `${year}년 ${month}월 ${day}일`;
}

---

4.유사 배열 객체

: 아래의 객체는 Array.from으로 부터 배열처럼 만들수가 있다.

이는 배열은 곧 객체라는 것을 다시 말할 수 있다.

 

const arrayLikeObject = {
  0: 'HEllO',
  1: 'WORLD',
  length: 2,
};

const arr = Array.from(arrayLikeObject);

console.log(Array.isArray(arr)) //true

 

또한 유사 배열 객체 중 하나는 arguments가 있다.

하지만 이 arguments는 배열에 쓸 수 있는 고차 함수인 map, forEach, reduce, filter, every, some등을 쓸수 없다.

arguments를 Array.from(arguments)을 이용해 배열로 바꾸면 가능하다.

 

---

5.불변성

: 새로운 배열을 만들고, 기존 배열을 바꿨는데도 새로운 배열도 바껴버린다.

이를 방지하는 방법

1.배열을 복사한다.

2.새로운 배열을 반환하는 메서드들을 활용한다.(filter,map,slice 등등)

 

const originArray = ['123', '456', '789'];

const newArray = originArray;

originArray.push(10);
originArray.push(11);
originArray.push(12);
originArray.unshift(0);

//newArray를 호출하면 영향을 받고 있다.

 

 

---