[JavaScript] 배열 (array)

배열 (Array)

여러 개의 데이터를 담을 수 있는 특별한 변수, 0부터 시작되는 인덱스 번호로 관리하며 배열의 값은 변할 수 있음.

 

배열 작성 -> [0, 1, 2, 3];

배열 접근(읽기) -> 배열명[인덱스번호];

 

// 리터럴 방식

const a = {}; 객체 표현식

const b = () => {} 함수 표현식

 

let arr1 = []; // 빈 배열 생성. 배열로 초기화

  console.log(arr1[0]); // undefined.
  // 빈 배열이기 때문에 인덱스 0은 할당되지 않은 값

 

배열이 가지고 있는 요소의 수를 호출하는 .length

 

  console.log(arr1.length); // 0 요소가 없음

---

배열의 생성과 값 할당.

  let arr2 = [1, 2, 3]; // 배열에 1, 2, 3 할당
  console.log(arr2); // 배열의 요소 수 : 3

 

배열은 인덱스 번호로 관리하며 0부터 시작한다

위 배열이 가지고 있는 요소의 인덱스 넘버는

 

인덱스0 : 1

인덱스1 : 2

인덱스2 : 3

 

  console.log(arr2[2]); // arr2배열의 인덱스2 호출 : 3
  console.log(arr2.length); // arr2 배열의 요소 수 : 3

---

배열은 모든 자료형을 담을 수 있다.

  let arr3 = [1, 'string', true, function(){}, arr2, {}, null, undefined]
  console.log(arr3);

배열의 각 요소는 인덱스 번호로 구분된다.

배열의 자료형 타입은 'object'

  console.log(typeof arr3); // object

배열의 값은 인덱스 번호로 호출한다.

  console.log(arr3[2]); // true
  console.log(arr3[4]); // arr2 = [1, 2, 3]
  console.log(arr3[4][2]); // arr2의 인덱스2 호출 = 3
  console.log(arr3.length); // 8
  console.log(arr3[1].length); // 해당 인덱스 번호의 요소 'string'의 글자 수 = 6

---

개별 인덱스 넘버에 값 변경 혹은 할당 가능

  let arr4 = [1, 2, 3, 4];
  console.log(arr4[4]); // undefined
  arr4[4] = 5; // arr4의 인덱스4 위치에 값 '5' 추가
  console.log(arr4[4]); // 5
  arr4[0] = 'change value'
  console.log(arr4[0]); // change value
  console.log(arr4[2 + 1]); // 인덱스 번호 3 호출

 

인덱스 번호를 비우면 empty로 'undefined'를 반환한다.

  let arr5 = [1, , 3, 4, , 6];
  console.log(arr5);
  console.log(arr5[1]);

---

생성자 함수 배열의 특징

new Array();는 인수만큼의 자리수를 가지고 [] 대괄호 배열보다 코드가 효율적이지도 않기 때문에 잘 사용하지 않음.

  const arr1 = new Array(); // 빈 배열

 

  const arr2 = new Array(3); // 배열의 자리수만 생성
  console.log(arr2); // [empty, empty, empty]
  console.log(arr2.length); // 3

  const arr3 = new Array('문자열', 3, arr1, {}); // 인수에 배열의 값을 작성해준다.
  console.log(arr3[3]); // {...}

---

 

큐(que)와 스택(stack)

 

큐(que)

큐는 배열로 만드는 대표적인 자료 구조로 순서가 있는 자료들을 저장할 때 주로 사용.먼저 들어간 배열이 먼저 나오는 '선입선출형' 구조를 가진다.

 

큐에서 주로 사용되는 연산은 push와 shift가 있다.

---

          -------------------------------------입구->  자료4 자료3 자료2 자료1      -> 출구   -> 자료 0          -------------------------------------

---

스택(stack)

스택도 배열로 만드는 대표적인 구조 중 하나.

큐가 원통형의 구조로 먼저 들어간 게 먼저 나오는 형태라면

스택은 카드 덱의 구조로 위로 쌓이는 형태. 즉 늦게 들어갈수록 먼저 나오는

'후입선출형'구조를 가진다.

 

스택에서 주로 쓰이는 배열 메서드는 push와 pop이 있다

 

---

배열의 메서드 종류

 

push();

맨 끝에 요소를 추가.

  let arrPush = ['첫번째', '두번째', '세번째']
  console.log(arrPush); // '첫번째', '두번째', '세번째', '제로'
  arrPush.push('제로');

 

concat();

기존 배열의 요소를 사용해 새로운 배열을 만들거나, 기존 배열에 요소를 추가하고자 할 때 사용새로운 Array 객체로 반환하며 원본을 건드리지 않고 사본을 만들기 때문에 원본 유지

  let arr2 = [1, 2, 3, 4];
  let arr2Clone = arr2.concat();
  let arr2Clone2 = arr2.concat(40, 50, 60);
  let arr2Clone3 = arr2.concat("강아지", "고양이");
  console.log(arr2); // [1, 2, 3, 4]
  console.log(arr2Clone); // [1, 2, 3, 4] 새로운 배열로 반환
  console.log(arr2Clone2); // [1, 2, 3, 4, 40, 50, 60]
  console.log(arr2Clone3); // [1, 2, 3, 4, '강아지', '고양이']
  // 두 배열을 합쳐 새로운 배열로 반환.
  console.log(arr2.concat(arr2Clone3)); // [1, 2, 3, 4, 1, 2, 3, 4 '강아지', '고양이']
  console.log(arr2);

 

---

join();

배열 안의 각 요소를 추출해 매개변수로 연결해서 반환.

  console.log(arr2.join(' / ')); // 1 / 2 / 3 / 4

pop();

배열의 제일 마지막 요소 추출 (추출된 요소는 배열에서 삭제됨)

  console.log(arr2Clone3); [1, 2, 3, 4, '강아지', '고양이']
  console.log(arr2Clone3.pop()); // 고양이
  console.log(arr2Clone3); // [1, 2, 3, 4, '강아지']

shift();

배열의 제일 처음 요소 추출 (추출된 요소 삭제)

  console.log("----- shift() 배열의 제일 처음 요소 추출");
  console.log(arr2Clone3); // [1, 2, 3, 4, '강아지']
  console.log(arr2Clone3.shift()); // 1
  console.log(arr2Clone3); // [2, 3, 4, '강아지']

splice(시작 인덱스, 요소의 수, 대체 요소);

특정 인덱스 삭제 및 대체

  let arr3 = [10, 20, 30, 40, 50];
  console.log(arr3.splice(3)); // 인덱스 3번부터 추출[40, 50]
  console.log(arr3); // [10, 20, 30]

  let arr4 = [10, 20, 30, 40, 50];
  console.log(arr4.splice(1, 2)); // 인덱스 1번부터 2개의 요소 추출 [20, 30]
  console.log(arr4); // [10, 40, 50]

  let arr5 = [10, 20, 30, 40,50];
  console.log(arr5.splice(2, 3, 60, 70, 80)); // [30, 40, 50]
  console.log(arr5); // [10, 20, 60, 70, 80]

 

slice(시작 인덱스,마지막 인덱스);

시작 인덱스부터 마지막 인덱스 전까지를 복사해서 새로운 배열로 반환. 원본 유지

  let arr6 = [10, 20, 30, 40, 50];
  console.log(arr6.slice(0, 3)); // [10, 20, 30] 인덱스 0부터 2까지 복사
  console.log(arr6); // [10, 20, 30, 40, 50]

delete 키워드 : 요소의 값만 제거

  delete arr6[2]; // arr6의 인덱스2 제거
  console.log(arr6); // [10, 20, empty, 40, 50]

---

sort(fn)

배열 요소를 정렬해서 반환.

기본적인 정렬은 요소를 문자열로 취급해서 정렬하기 때문에 숫자형 데이터는 순서가 뒤섞일 수 있음.

 

배열 자체가 모든 데이터형이 담길 수 있는 만큼 정렬할 수 있는 기준을 함수로 만들어 인수로 넘겨줘야 원하는 결과를 얻을 수 있다.