[javascript] 배열 (1)

1. 배열의 실체

• 자바스크립트에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체
• 메모리가 연속적인 밀집 배열(dense array)가 아닌 비 연속적인 희소배열(sparse array)

2. 배열 타입 확인 및 요소 삭제

1) 배열 타입 확인

(1) 배열 타입 확인 방법
`
Array.isArray(value)`

2) 배열 요소 삭제

`delete array[index]` : 삭제해도 배열 사이즈가 그대로라 많이 사용 안 함 

3. 배열 조작

1) 배열 추가/삭제

(1) LIFO - Back

• 배열 추가
  Array.push(element)

• 배열 삭제
  Array.pop()

(2) LIFO - Front

• 배열 추가
  Array.unshift(element)

• 배열 삭제
  Array.shift()

2) 배열 삭제/변경 (index)

• 배열 요소 삭제/변경

  (1) splice

  : 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경하고 제거된 배열을 반환
  Array.splice(index[, deleteCount, elem1 ..., elemN]

  [ 파라미터 ]
  index
  ▶︎ 배열의 변경을 시작할 index
  ▶︎ 배열의 길이보다 큰 값일 경우 배열의 길이로 설정
  ▶︎ 음수인 경우 배열의 끝에서부터 요소를 센다.
  예 ) array.splice(-n) -> array.length -n과 같다.
  값의 절대값이 배열의 길이보다 큰 경우 0으로 설정

  deleteCount(Optional)
  ▶︎ 배열에서 제거할 요소의 수
  ▶︎ 생략하거나 값이 array.length - start보다 클 경우 start 부터의 모든 요소를 제거
  ▶︎ 0이하의 값을 설정 할 경우 어떤 요소도 제거하지 않음, 이 경우 최소한 하나의 새로운 요소를 추가해야한다.

  item1, item2, ...(Optional)
  배열에 추가할 요소
  생략할 경우 요소를 제거하기만 한다.

   참고: https://tocomo.tistory.com/31

  

(2) slice

: 원본의 배열에 변화없이 잘 라낼 배열의 시작index와 end index를 파라미터로 받아서,그 사이의 원소들을 새로운 배열로 만들어서 리턴함

Array.slice([start [,end]])

[ 파라미터 ]
begin
▶︎ 잘라낼 배열의 시작 index

end(optional)

▶︎ 잘라낼 배열의 종료 index
▶︎ ⭐️ end index의 값은 잘라낼 배열에 포함되지 않음
▶︎ end index 생략시 begin index부터 배열의 끝까지를 자름

리턴값
잘라낸 원소들로 만든 새로운 배열을 리턴.

(3) concat

: 다중 배열 병합, 원본 배열을 변경하지 않고 병합된 배열을 반환
array.concat([value1[, value2[, ...[, valueN]]]])

[ 파라미터 ]
value1~valueN
▶︎ 기존 배열에 합칠 배열 또는 값
▶︎ ⭐️ 파라미터가 배열인 경우, 배열 안의 원소들을 꺼내여 새로운 배열에 포함시킴
그러므로 새로운 배열(newArr)의 길이는 변화함하고 원본 arr의 값은 변하지 않는다.

4. 배열 반복문

• 다양한 반복문 문법을 통해 배열 요소에 접근 가능
  

5. 배열 탐색

1) 앞에서부터 탐색

Array.indexOf(item,from)
▶︎ 문자열(string)에서 특정 문자열(item)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴
▶︎ 찾는 문자열이 없으면 -1 반환
▶︎ 대소문자 구분

[파라미터]
item : 필수 입력값, 찾을 문자열
from: optional, 기본값은 0, string에서 item을 찾기 시작할 위치

2) 뒤에서부터 탐색

Array.lastIndexOf(item,from)

3) 값 포함 여부 확인

Array.includes(item,from)
▶︎ true, false로 값 반환

6. 배열 변형

1) 배열 정렬/ 반전

(1) 배열정렬

Array.sort()
▶︎ 오름차순 정렬
▶︎ 십의자리수가 섞이면 제대로 정렬 못해줌. 고차함수를 이용한 정렬 수행 필요

(2) 배열반전

Array.reverse()
▶︎ 좌우 반전 - 내림차순 정렬로 응용 가능

2) 배열 변환

Array.join(separator)
▶︎ 배열값을 문자열로 변환

(1) forEach()

myArr.forEach((currentElement, index, array)
▶︎ 배열에 활용ㅡ 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드임.
▶︎ map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다.
▶︎ 배열 요소 별 콜백 함수 각각에 실행: Array.forEach(function(item,index,array){})

[ 파라미터 ]
item : 요소
index : 인엑스
array : forEach()를 호출한 배열 (잘 안 쓰임)

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

myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    console.log(array);
});

▼ 출력 ▼

index: 0
[ 1, 2, 3, 4, 5 ]
요소: 2
index: 1
[ 1, 2, 3, 4, 5 ]
요소: 3
index: 2
[ 1, 2, 3, 4, 5 ]
요소: 4
index: 3
[ 1, 2, 3, 4, 5 ]
요소: 5
index: 4
[ 1, 2, 3, 4, 5 ]

(2) map()

▶︎ 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
▶︎ for of 문이나 forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류이나, 매 반복마다 return 되는 결과에 따라 새로운 배열을 만들어내는 것이 핵심이다.

Array.map((item,index,array){})

ex)

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

const newMyArr = myArr.map((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`);
    console.log(`index: ${index}`);
    
    return currentElement * 2
});

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