Growth from the root - Vanilla JavaScript - 배열과 메서드

요소 추가 제거 메서드

📃 배열의 맨 앞이나 끝에 요소를 추가하거나 제거하는 메서드

• arr.push(...items) - 맨 끝에 요소 추가
• arr.pop() - 맨 끝에 요소 제거
• arr.shift() - 맨 앞 요소 제거
• arr.unshift(...items) - 맨 앞에 요소 추가
  
  
  

splice

📃 배열에서 요소를 하나만 지우고 싶다면 ?
배열 역시 객체형에 속하므로 프로퍼티를 지울 때 쓰는 연산자 'delete'를 사용 할 수 있음.

let arr = ["I", "go", "home"];

delete arr[1] ; // "go" 를 삭제함.

alert(arr[1]); // undefined

alert(arr.length); // 3
=> arr = ["I", " ", "home"]

✏️ 요소는 지웠지만, 배열의 요소는 여전히 세 개임.

👉 arr.splice(start) 는 요소를 자유자재로 다룰 수 있게 해주죠, 이 메서드를 통해 추가, 삭제, 교체 모두 가능함.

• 삭제

  let arr = ["I", "study", "JavaScript"]
  
  arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거
  
  alert( arr ); // ["I", "JavaScript"]

• 교체

  let arr = ["I", "study", "JavaScript", "right", "now"];
  
  // 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
  arr.splice(0, 3, "Let's", "dance");
  
  alert( arr ) // now ["Let's", "dance", "right", "now"]
  

  
  
  

slice

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

📃 slice 는 "start" 인덱스부터 "end" 인덱스까지의 요소를 복사한 후 새로운 배열을 반환함.

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

concat

arr.concat(arg1, arg2 ...)

📃 concot 는 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용함.

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

forEach 로 반복잡업 하기

📃 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌.

arr.forEach(function(item, index, array){
// 요소에 무언가 할 수 있음.
})

아래는 요소 모두를 얼럿창을 통해 출력해줌.

["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

아래는 인덱스 정보까지 더해서 출력해주는 정교한 코드임.

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

배열 탐색하기

배열 내에서 무언가를 찾고 싶을 때 쓰는 메서드에 대해 알아보자.

indexOf, lastIndexOf 와 includes

• arr.indexOf(item, from)는 인덱스 from부터 시작해 item(요소)을 찾습니다. 요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환합니다.
• arr.lastIndexOf(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다릅니다.
• arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환합니다.

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

find와 findIndex

 let result = arr.find(function(item, index, array) {
   // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
   // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
 });

✏️ item - 함수를 호출할 요소 / index - 요소의 인덱스 / array - 배열 자기 자신

filter

📃 find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾음.
조건을 충족하는 요소가 여러 개라면 arr.filter()를 사용하면 됨.
filter는 find와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점에서 차이가 있음.

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

배열을 변형하는 메서드

map

📃 map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환.

 let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort

📃 sort는 배열의 요소를 정렬해줌, 배열 자체가 변경됨.

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2

요소는 문자열로 취급되어 재 정렬되기 때문임.

reverse

📃 reverse 는 요소를 역순으로 정렬시켜주는 매서드임.

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1