[JavaScript] 배열 (Array)

1. 배열 (Array)

• 배열은 여러 데이터 타입을 담으며 배열 내에는 어떠한 데이터 타입이든 포함될 수 있다. 특히 배열 안에 다른 배열이 포함될 수도 있다.
• 대괄호를 사용하고, 쉼표로 요소들을 구분한다.
• 랭킹과 같은 순위, 또는 순서가 있는 값을 만들 경우 객체보다 배열이 보다 간결하고 효율적이다.
• 단순히 여러 값의 묶음이 필요할 때도 활용 가능하다.
• 배열은 객체에 해당한다.

2. 요소 (element)

배열 내 각 데이터

3. 순서(index)

• 일반적으로 세는 방식과 달리 0 부터 순서를 메긴다.
  ex. let myArray = [3, 25, 'people', true] 에서 3은 첫 번째가 아닌 0번 인덱스에 해당
• 객체와 비교했을 때 프로퍼티 네임의 역할

4. 요소에 대한 접근

인덱싱(indexing) - 인덱스를 통해 요소에 접근
접근하려는 배열 이름 뒤에 대괄호를 적은 후 대괄호 안에 접근하고자 하는 인덱스 번호를 적는다.

console.log(myarray[0]) //0번 인덱스에 접근

5. 요소 수정

배열 이름 뒤에 수정하고자 하는 요소의 인덱스 번호를 적은 후 값을 할당한다.

let myArray = [3, 25, 'people', true] 
	myArray[0] = 300
	console.log(myArray) //[300, 25 'peoople', true]

6. 배열 길이 구하기 (배열 내 요소의 총 개수)

arr.length

let myArray = [3, 25, 'people', true] 
console.log(myArray.length) //4

7. 요소 추가

(1) push

배열의 마지막 요소에 값 추가
arr.push(value)
파라미터로 추가할 요소 값 전달

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.push('베이지');
console.log(members); //['빨강', '노랑', '주황', '초록', '파랑', '베이지']

(2) unshift

배열의 첫 요소에 값 추가
arr.unshift(value)
파라미터로 추가할 요소 값 전달

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.unshift('핑크');
console.log(members); //['핑크', '빨강', '노랑', '주황', '초록', '파랑']

8. 요소 삭제

(1) pop

배열의 마지막 요소 부터 삭제
파라미터는 따로 전달하지 않는다.

arr.pop() //한 줄만 작성할 경우 마지막 인덱스만 삭제

위 처럼 한 줄만 작성할 경우 마지막 요소만 삭제되며, 아래와 같이 세 줄을 작성할 경우 3개의 요소가 삭제된다.

arr.pop()
arr.pop()
arr.pop()

(2) shift

배열의 맨 앞 요소 부터 삭제
파라미터는 따로 전달하지 않는다.
pop과 마찬가지로 한 줄만 작성할 경우 맨 앞 요소만 삭제되며 여러 줄 작성할 경우 적은 요소 개수 만큼 삭제된다.

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.shift();
console.log(members); // ['노랑', '주황', '초록', '파랑']

(3) splice

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(4); //4번 인덱스 '파랑' 삭제
let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(1); //1번 인덱스 '노랑' 부터 뒤의 요소들이 모두 삭제

• splice 메소드의 두 번째 파라미터로 숫자값을 하나 더 전달하여 삭제할 요소 개수를 정할 수 있다.
  splice(삭제 시작할 요소의 인덱스, 삭제할 개수)

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(1, 2); //1번 인덱스부터 요소 2개 삭제 -> ['빨강', '초록', '파랑']
members.splice(1, 1); //1번 인덱스 1개만 삭제 -> ['빨강', '주황', '초록', '파랑']

• splice 메소드의 세 번째 파라미터로 요소를 전달하여 삭제한 자리에 해당 요소를 추가할 수 있다.
  splice(삭제를 시작할 요소의 인덱스 번호, 삭제할 개수, 추가할 요소)

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(1, 1, 'Nice', 'Hi'); // ['빨강', 'Nice', 'Hi', '주황', '초록', '파랑']

cf. 응용 - 요소 수정
splice(삭제할 요소 인덱스, 삭제할 개수, 수정할 요소)

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(2, 1, '민트'); //['빨강', '노랑', '민트', '초록', '파랑']
members.splice(2, 2, '다홍', '보라'); //2번 인덱스로부터 2개, 즉 2번과 3번 인덱스 삭제 -> ['빨강', '노랑', '다홍', '보라', '파랑'];

cf. 삭제할 개수를 0으로 설정함으로써 배열 내 어느 곳에든 요소를 추가할 수도 있다. 이때 어떠한 요소도 삭제되지 않으며 기존 인덱스 위치에 있던 요소는 뒤로 밀려난다.
splice(요소 추가할 인덱스, 0, 추가할 요소)

let members = ['빨강', '노랑', '주황', '초록', '파랑'];
members.splice(1, 0, 'Nice', 'Hi'); // 1번 인덱스 위치에 'Nice', 'Hi' 추가 -> ['빨강', 'Nice', 'Hi', '노랑', '주황', '초록', '파랑']

(4) filter

9. 중첩된 배열

let myArray = [3, 25, 'people', [100, 300, 700], true] 
console.log(myArray[3][0]) //100

10. 기타 배열 메서드

(1) indexOf

• 배열에서 특정 값 찾기 (indexOf / lastIndexOf)
• array.indexOf(item) -> array에 item이 포함되어 있는지 확인
  -> 포함되어 있을 경우 item의 인덱스 번호가 리턴
  -> 포함되어 있지 않을 경우 -1 리턴
  -> 여러번 포함되어 있을 경우 첫 인덱스 번호 리턴

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao')); //1
console.log(brands.indexOf('Daum')); //-1

(2) lastIndexOf

indexOf와 반대로 뒤에서 부터 탐색

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.lastIndexOf('Kakao')); //3
console.log(brands.lastIndexOf('Daum')); //-1

(3) 배열 내 특정 값 존재 여부 확인 (includes)

array.includes(item)
특정 값의 인덱스를 리턴하는 indexOf, lastIndexOf와는 달리 값이 배열 내에 존재하는지 그 여부만을 확인하고자 할 때 includes 메서드를 활용한다.
배열 내 해당 값이 존재할 경우 true, 존재하지 않을 경우 false를 리턴한다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao')); //true
console.log(brands.includes('Daum')); //false

(4) 배열 요소 순서 뒤집기 (reverse)

array.reverse()

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands); //["Google", "Kakao", "Naver", "Kakao"]
brands.reverse();
console.log(brands); //["Kakao", "Naver", "Kakao", "Google"]