내일배움캠프 React트랙 22일차 회고 (2022.11.29)

배열(Array)

배열array은 여러 개의 값을 순차적으로 나열한 자료구조다. 

배열이 가지고 있는 값을 요소element라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스index를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 
자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 다른 프로그래밍언어의 배열동작을 흉내낸 특수한 객체이다.
이를 보완하기위해 타입이 정해져 있는 타입배열(Typed Collecton)이 따로 존재한다.

 

배열 생성방법

const anotherArray = [1, 2, 3, 4]; // 배열리터럴 이용해서 배열만들기
console.log(anotherArray);

let array = new Array(2); // 생성자함수 이용해서 배열사이즈 정하기 -> 빈칸2개의 배열이 생김
console.log(array);

array = new Array(1, 2, 3); // 생성자함수 이용해서 배열만들기
console.log(array);

array = Array.of(1, 2); // Array의 static 메서드 이용해서 배열만들기
console.log(array);

array = Array.from(anotherArray); // Array의 static 메서드 이용해서 기존의 배열로부터 새로운 배열만들기
console.log(array);

// 객체로부터 배열만들기
array = Array.from({
  0: "안",
  1: "녕",
  length: 2, // 배열에는 길이라는 정보가 있다.
});
console.log(array);

---

배열(Array)의 특성

 

배열에 접근하는 일반적인 방법

const fruits = ["🍌", "🍎", "🍇", "🍑"];

//배열에 접근하는 일반적인 방법
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
console.log(fruits.length); // 4

 

배열의 장점

const fruits = ["🍌", "🍎", "🍇", "🍑"];

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

일반 객체와 배열을 구분하는 가장 명확한 차이는 “값의 순서”와 “length 프로퍼티”다. 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조다. 이때문에 배열은 처음부터 순차적으로 요소에 접근할 수도 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근할 수도 있다는 장점이 있다.

 

배열의 요소를 추가, 삭제할때 좋지않은 방법들

const fruits = ['🍌', '🍎', '🍇', '🍑'];

// 배열의 요소를 추가, 삭제할때 좋지않은 방식들
fruits[6] = "🍓";
console.log(fruits);
// 만약 배열.length가 x인데, x+3이상의값에 할당하면
// x+1칸, x+2칸이 빈공간인채로 남아있기때문에 좋지 않은 방법이다.

delete fruits[1];
console.log(fruits);
// 만약 배열.length가 x(단, x>4)인데 x-2값을 삭제한다고 가정했을 때
// x-2칸이 빈공간인채로 남아있기때문에 좋지 않은 방법이다.

---

배열(Array)의 메서드

자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공한다. 범주를 크게 2가지로 분류할 수 있다.

• Array 생성자함수의 정적 메서드
•  Array.prototype메서드 (배열 객체의 프로토타입인 Array.prototype는 프로토타입 메서드를 제공한다.)

배열은 사용 빈도가 높은 자료구조이므로 배열 메서드의 사용법을 잘 알아둘 필요가 있다.  배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다. 배열에는 원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드(mutatormethod)와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)가 있다.

배열 자체를 변경하는지, 새로운 배열을 반환하는지가 중요하다.

 

const fruits = ["🍌", "🍎", "🍋"];

// 특정한 오브젝트가 배열인지 체크
console.log(Array.isArray(fruits));
console.log(Array.isArray({}));

const fruits = ["🍌", "🍎", "🍋"];

// 특정한 아이템의 위치를 찾을때
console.log(fruits.indexOf("🍎"));

const fruits = ["🍌", "🍎", "🍋"];

// 배열안에 특정한 아에팀이 있는지 체크
console.log(fruits.includes("🍎"));

const fruits = ["🍌", "🍎", "🍋"];

// 추가 - 제일 앞
length = fruits.unshift("🍓"); // 배열 자체를 수정(업데이트)
console.log(fruits);
console.log(length);

// 추가 - 제일 뒤
let length = fruits.push("🍑"); // 배열 자체를 수정(업데이트)
console.log(fruits);
console.log(length);

// 제거 - 제일 앞
lastItem = fruits.shift(); // 배열 자체를 수정(업데이트)
console.log(fruits);
console.log(lastItem);

// 제거 - 제일 뒤
let lastItem = fruits.pop(); // 배열 자체를 수정(업데이트)
console.log(fruits);
console.log(lastItem);

// 중간에 추가 또는 삭제
const deleted = fruits.splice(1, 1);
console.log(fruits); // 배열 자체를 수정(업데이트)
console.log(deleted);
fruits.splice(1, 1, "🍎", "🍓");
console.log(fruits); // 배열 자체를 수정(업데이트)

// 특정한 값으로 배열을 채우기
arr.fill(0); // 배열 자체를 수정
console.log(arr);

arr.fill("s", 1, 3); // end-index는 미만의 개념임 -> end-index가 3이면 3제외 2까지
console.log(arr);

arr.fill("a", 1); // end-index를 작성하지않으면 시작단계에서 배열끝index까지 수정함
console.log(arr);

---

// 잘라진 새로운 배열을 만듦
let newArr = fruits.slice(0, 2); // 배열.slice(0, 2)는 배열요소의 0부터 1까지를 남기고 나머지를 slice한다는 의미이다.
console.log(newArr);
console.log(fruits);
newArr = fruits.slice(-1); // 제일 마지막요소에서 한칸앞의 요소부터 slice된다는 의미이다.
console.log(newArr);

// 여러개의 배열을 붙여서 새로운 배열을 만듦
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3);

// 순서를 거꾸로한 새로운 배열을 만듦
const arr4 = arr3.reverse();
console.log(arr4);
console.clear();

// 중첩 배열을 하나의 배열로 쫙 핀 새로운 배열을 리턴함
let arr = [
  [1, 2, 3],
  [4, [5, 6, [3, 4]]],
];
console.log(arr);
console.log(arr.flat(3)); // 배열을 몇단계까지풀어줄지 정할 수 있음
arr = arr.flat(3);

// 배열을 문자열로 합하기
let text = arr.join();
console.log(text); // '1,2,3,4';

text = arr.join("");
console.log(text); // '1234'

text = arr.join(":");
console.log(text); // '1:2:3:4'

---

얕은복사(Shallow Copy)

// 자바스크립트에서 복사할때(배열에 기존 배열을 가져올때 등등..)는 항상 얕은 복사가 이루어짐!
// Array.from, concat, slice, spread(...), Object.assign 모두 Shollow Copy가 이루어짐
const pizza = { name: "🍕", price: 2, owner: { name: "Ellie" } };
const ramen = { name: "🍜", price: 3 };
const sushi = { name: "🍣", price: 1 };
const store1 = [pizza, ramen];
const store2 = Array.from(store1);
console.log("store1", store1);
console.log("store2", store2);

// sotre1과 store2는 완전히 다른 객체이므로 store2에 무언가를 추가한다 하더라도
// store1에는 전혀 변화가 없는 것을 확인할 수 있다.
store2.push(sushi);
console.log("store1", store1);
console.log("store2", store2);

// store1과 store2는 새롭게 배열을 만드는 것이 아니라,
// pizza와 ramen이 가지고있는 배열의 메모리주소를 참조해 배열이 저장된 곳을 찾아가,
// 저장된 배열을 가지고오기때문에 저장된 배열의 값을 바꾸면,
// 그 배열을 가지고있는 배열도 바뀐 배열의 값을 가지고 있는 것이다.
pizza.price = 4;
console.log("store1", store1);
console.log("store2", store2);