JavaScript _배열 [Array].indexOf, pop, shift, push, unshift, concat, splice, slice

Array

• 데이터의 집합으로 여러 개의 값을 하나의 이름으로 묶어 사용할 수 있게 도와준다.
• 배열의 각 값은 원소(element) 혹은 요소라고 부른다.
  • var num =[1,2,3];
• 배열의 크기는 length 프로퍼티를 통해 알 수 있다. 
• 배열의 생성자 함수에 숫자를 한개만 넣으면 인스턴스의 길이를, 여러 숫자를 넣으면 배열의 원소를 뜻한다.
  • 배열이름= new Array(배열길이);
  • 배열이름= new Array(element1, element2 ....);
• 배열의 리터럴 표현( [ ] )
• 각괄호 + 인덱스를 통해 각 원소에 접근할 수 있으며, 원소에 값을 저장할 수도 있다.
• 심지어 존재하지 않는 원소에도 접근이 가능하다.
• 리터럴 생성과 동시에 원소에 접근 할 수도 있다. ([1,2,3,][0] === 1)

---

indexOf

• 요소의 인덱스를 찾고 싶을 때
• 배열에 존재하지 않는 요소를 찾거나 해당 인덱스에서 지정된 요소가 탐색되지 않을 시 -1을 출력한다.
• indexOf(탐색하고자 하는 요소, 탐색을 시작하고자 하는 인덱스(생략가능))

---

< 요소의 삭제 >

pop

• 맨 뒤에서 요소를 삭제 할 때
• 제거 한 요소를 보관하고 싶다면 변수에 담아 둘 수 있다. (빈 배열에 pop을 호출하면 undefined를 호출)

shift

: pop와 반대로 앞에 있는 요소라고 생각하면 된다.!

// 철수는 엄마에게 배추, 아빠에게 마늘 줘라!!
let 철수 = ["마늘", "양파", "배추"];

let 엄마 = 철수.pop(); 
console.log(엄마)  //'배추'

let 아빠 = 철수.shift();
console.log(아빠)  //'마늘'

console.log(철수);  //['양파']

---

< 요소의 추가 >

push

• 맨 뒤에서 요소를 추가 할 때
• 배열의 마지막 요소로 인자로 전달한 값을 추가하고 새로운 배열의 길이를 반환한다.

unshift

: push와 반대로 앞에 있는 요소라고 생각하면 된다.!

// 철수야 기분이다, 과자랑 젤리 넣어
let 철수 = ["마늘", "양파", "배추"];

let 앗싸1 = 철수.push("과자"); 
console.log(앗싸1)   // 4

let 앗싸2 = 철수.unshift("젤리");
console.log(앗싸2)   // 5

console.log(철수);   //['젤리', '마늘', '양파', '배추', '과자']

---

concat

• 주로 배열을 합치거나 새로운 요소를 추가할 때
• 매개변수로 주어진 값 또는 배열을 이용해서 기존의 배열에 존재하던 요소를 사용해 새로운 배열을 만들 수 있다
• 기존 배열을 변경하지 않는다!

const cafe = ['coffee'];

cafe.concat(['cake']);
//['coffee', 'cake']

cafe.concat(['tea'], 'cookie');
//['coffee', 'tea', 'cookie']

---

splice

: 배열 중간 부분에서 요소를 추가하고 삭제하는 것 or 한꺼번에 요소를 2개 이상 추가하거나 삭제할 수 있다.

(인덱스, 카운트, 아이템) 순서로 인자를 전달합니다.

💡 인덱스: 음수 가능 , 카운트: 음수 불가

처음 인자만 입력하면 해당 인덱스부터 끝까지 삭제

var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
//코끼리 제거
fish.splice(5, 1);

//참치 다음에 추가
fish.splice(4, 0, "다금바리");

//돌고래 제거 -> 옥돔,갈치 추가(=교체)
fish.splice(2, 1, "옥돔", "갈치");

console.log(fish);

slice

: 원본 배열은 그대로 필요한 부분만 자르고 꺼내는 것

두 개의 인자를 전달하여 배열안에 있는 요소를 새로운 배열로 반환한다.

원본 요소가 바뀌지 않는것이 포인트! 특히 두 번째 인자에 해당하는 인덱스의 아이템은 포함하지 않는다.

여기서 그러면 pop,shift 랑 너무 비슷한데?라고 생각할 수 있지만 너무 다른 차이점이 있다!

1. 시작과 끝을 정해서 요소를 여러개 꺼낼 수 있다.
2. 실행결과 기존배열은 바뀌지 않는다!!!

//물고기가 아닌 것 꺼내기
var fish = ["정어리", "고등어", "돌고래", "참치", "고래상어", "코끼리"];
//돌고래 
console.log(fish.slice(2, 3);
//코끼리
console.log(fish.slice(-1));