[JavaScript] Array(배열) 이란?

Array (배열)

1. Array (배열) 이란?
   - 배열은, 여러 개체 값을 순차적으로 나열한 자료 구조 입니다.
   - 배열 내 값을 '요소'라고 부릅니다.
   - 배열 요소는 '인덱스(index)'로 접근할 수 있습니다. 인덱스는 0부터 시작합니다.

const check1 = []; // [] (콘솔찍었을때)
const check2 = new Array(); // [] (콘솔찍었을때)

2. array에는 중간에 빈자리가 생길 수 있습니다
   - array[0]에 값을 넣고, array[9]에 값을 넣어서 중간 1 ~ 8 인덱스 자리가 비어있을 수 있습니다.
   - 이때, length는 10 입니다.

const arr = [];
arr[0] = 0;
arr[9] = 9;

console.log(arr); // [ 0, <8 empty items>, 9 ]
console.log(arr.length); // 10

3. array.length는 마음대로 할당해서 늘렸다 줄일 수 있습니다 (원본훼손 O)
   - array.length에 0을 할당해서, 배열 안의 값을 모두 삭제할 수도 있습니다.

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

arr.length = 10;
console.log(arr); // [ 0, 1, 2, 3, 4, <5 empty items> ]
console.log(arr.length); // 10

arr.length = 0;
console.log(arr); // []
console.log(arr.length); // 0

4. 빈 배열인지 확인할 때는, 배열의 길이로 확인해야 합니다

const arr = [];
console.log(arr === []); // false
console.log(arr.length === 0); // true

배열 관련 method (findIndex, indexOf, lastIndexOf, includes, find)

1. 인덱스를 반환 (없으면 -1 반환)

const test = [ '김', '무', '명', '김', '무', '명' ];

// findIndex: 파라미터로 함수를 받는다 (대상이 객체이거나, 어떤 조건을 가지고 찾을 경우에 사용)
const check = test.findIndex((item) => { // 1
  return item === "무";
});

// indexOf: 파라메터로 값을 받는다
test.indexOf("배열안의 값", 옵션); // 몇번째 인덱스에 있는지 반환. 옵션을 안넣으면 자동으로 0이 들어간다.
test.indexOf("무", 0); // 1 // 0번째 인데스로부터, 가장가까운 해당 문자열값의 인덱스를 알려준다
test.indexOf("무", 2); // 4

// lastIndexOf: 파라메터로 값을 받는다
test.lastIndexOf("배열안의 값", 옵션); // indexOf를 맨 뒤에서부터 확인한다

2. Boolean을 반환 (없으면 false 반환)

const test = [ '김', '무', '명', '김', '무', '명' ];

test.includes("배열안의 값", 옵션); // 값이 포함되어 있으면 true, 없으면 false

3. 값을 반환 (없으면 undefined 반환)
   - 값이 있는지 찾고, '값 자체를 반환'합니다. (단, 조건을 만족하는 단 1개의 값만 반환)
   - 조건을 만족하는 값을 찾는 순간, 해당 값을 반환하고 즉시 반복문을 종료합니다. (반복횟수가 줄어들기 때문에 효율이 더 좋다)

const test = ["안", "녕", "하", "세", "요"];

const check1 = test.find((item) => { // 1번) 조건을 만족하는 값 1개만 반환
  return item === "녕"; // 2번) 조건을 만족하는 값을 찾는 순간, 해당 값을 반환하고 즉시 반복문을 종료한다!
});

console.log(test); // [ '안', '녕', '하', '세', '요' ]
console.log(check1); // 녕

const people = [
  {name: 'rose', age: 16, job: false},
  {name: 'chloe', age: 26, job: false},
  {name: 'john', age: 36, job: true},
];

const check2 = people.find((person) => { // 조건을 만족하는 값 1개만 반환
  return person.job === false;
});

console.log(check2); // { name: 'rose', age: 16, job: false }

배열 병합, 배열 복사 (원본훼손 X)

1. [ ...arr ] (원본훼손 X)

// 맨앞, 맨뒤 뿐만아니라 중간에 넣어도 된다
const one = [1, 2, 3];
const hundred1 = [...one, 100, 200, 300]; // [ 1, 2, 3, 100, 200, 300 ]
const hundred2 = [100, 200, 300, ...one]; // [ 100, 200, 300, 1, 2, 3 ]
const hundred3 = [100, 200, ...one, 300]; // [ 100, 200, 1, 2, 3, 300 ]

// 배열 더하기를 여러번 사용해도된다
const one = [1, 2, 3];
const ten = [10, 20, 30];
const mix = [...one, ...ten]; // [ 1, 2, 3, 10, 20, 30 ]

2. concat (원본훼손 X)

const firstname = ["chloe"];
const lastname = ["min"];
const fullname = firstname.concat(lastname);

console.log(fullname); // [ 'chloe', 'min' ]
console.log(firstname); // [ 'chloe' ]

const fullname1 = "chloe".concat(lastname); // chloemin
const fullname2 = ["chloe"].concat(lastname); // [ 'chloe', 'min' ]
const fullname3 = firstname.concat("min"); // [ 'chloe', 'min' ]
const fullname4 = firstname.concat(["min", 0, 0, 0]); // [ 'chloe', 'min', 0, 0, 0 ]

배열 정렬하기 Array - sort　(원본훼손 O)

1. sort
   - 특정 기준으로 배열을 정렬하는 메소드 입니다.
   - 기본 동작은 작은 값에서 큰 값으로 정렬됩니다.

const test = [2, 8, 4, 6];

test.sort();
console.log(test); // [ 2, 4, 6, 8 ]

2. 작은숫자 ~ 큰숫자

const test = [2, 8, 4, 6];

test.sort(function(a, b) {
  return a - b
});

console.log(test); // [ 2, 4, 6, 8 ]

3. 큰숫자 ~ 작은숫자

const test = [2, 8, 4, 6];

test.sort(function(a, b) {
  return b - a
});

console.log(test); // [ 8, 6, 4, 2 ]

4. 숫자 화살표함수 버전

const test = [2, 8, 4, 6];

test.sort((a, b) => a - b);

console.log(test); // [ 2, 4, 6, 8 ]

5. 한국어&영어 작은값 ~ 큰값

const test = ["마", "가", "다", "나", "라"];

test.sort(function(a, b) {
  return a.localeCompare(b);
});

console.log(test); // [ '가', '나', '다', '라', '마' ]

6. 한국어&영어 큰값 ~ 작은값

const test = ["마", "가", "다", "나", "라"];

test.sort(function(a, b) {
  return b.localeCompare(a);
});

console.log(test); // [ '마', '라', '다', '나', '가' ]

7. 한국어&영어 화살표함수 버전

const test = ["마", "가", "다", "나", "라"];

test.sort((a, b) => a.localeCompare(b));

console.log(test); // [ '가', '나', '다', '라', '마' ]

8. 숫자 절댓값으로 sort 하는 방법

const A = [-8, 4, 5, -10, 3];

A.sort((a, b) => Math.abs(a) - Math.abs(b));

console.log(A); // [ 3, 4, 5, -8, -10 ]

Array -> String

1. join (원본훼손 X)
   - 배열[]에서 -> 문자열''로 변환하는 메소드 입니다.
   - 배열의 모든 요소를 연결해, 하나의 문자열로 만듭니다.

const test = [ '김', ' ', '무', ' ', '명' ];

const check1 = test.join("");
console.log(check1); // 김 무 명
console.log(check1.length); // 5
console.log(test); // [ '김', ' ', '무', ' ', '명' ]

const check2 = test.join("!");
console.log(check2); // 김! !무! !명
console.log(check2.length); // 9
console.log(test); // [ '김', ' ', '무', ' ', '명' ]

2. toString (원본훼손 X)

const test = [ '김', ' ', '무', ' ', '명' ];

const check = test.toString();
console.log(check); // 김, ,무, ,명

배열 요소 반복문 (for문)

1. 1차원 배열

const nums = [1, 2, 3, 4, 5];

// 기본 for문    ---> 문자열도 사용가능
for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]); // 1 2 3 4 5
}

// for-of    ---> 문자열도 사용가능
for (const num of nums) {
  console.log(num); // 1 2 3 4 5
}

// for-in    ---> 객체도 사용가능
for (let i in nums) { // 이때 i는 인덱스
  console.log(i); // 0 1 2 3 4 // 인덱스
  console.log(nums[i]); // 1 2 3 4 5 // 요소
}

2. 2차원 배열

const numArr = [
  [1, 2, 3],
  [4, 5],
  [6, 7, 8]
];

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