배열(Array) 다루기

배운 것

---

1. 배열(Array) 요소 다루기

1.1. push

배열 끝에 하나 이상의 요소를 추가

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

1.2. pop

배열의 마지막 요소를 제거하고 반환(return)

shift와 unshift로 할거면 push랑 pull로 하지

const arr = [1, 2, 3];
const last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2]

1.3. shift

배열의 첫 번째 요소를 제거하고 반환(return)

const arr = [1, 2, 3];
const first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3]

1.4. unshift

배열 앞에 하나 이상의 요소를 추가, 그리고 method는 추가 후의 배열 길이를 반환

입력한 순서대로 앞에 추가되는 점 유의

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

1.5. splice

배열에 지정한 위치에서 지정한 개수만큼 없애고, 그 뒤에 오는 것들을 추가

지정한 개수만큼 없애는 두 번째 파라미터에 0을 넣으면 아무것도 없애지 않고 첫번째 요소의 index에다가 세 번째 부터 끝까지 요소를 끼워 넣는다.

그리고, method는 잘라낸 배열을 반환. 0개를 잘라냈으면 []을 반환.

splice는 접합, 결합이라는 뜻의 단어.

//arr.splice(지정한 위치에서, 몇개나 짤라서, 이것들을 붙여 넣어)
const arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 2, "a", "b")); // [3, 4]
console.log(arr); // [1, 2, "a", "b", 5]

1.6. slice

배열에서 첫 번째 지정한 위치에서 두 번째 지정한 위치 앞까지 잘라내 새로운 배열을 만든다.

원본 배열을 수정하진 않는다.

만약 두 번째 지정한 위치값이 없으면 끝까지.

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

지정한 위치를 음수값으로 넣으면, -1은 배열의 가장 끝 요소이고, -2는 가장 끝에서 두 번째 요소이다. 즉, 역순.

보는 사람 헛갈리게 하기 딱 좋다. 이렇게.

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(-4, -1);
console.log(slicedArr); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5]

 

2. 배열 요소를 순서대로 사용하기

1. 과 달리 배열의 요소를 사용하지, 배열을 변경하지 않는다. 

2.1. forEach

callback 함수에서 정의한 로직에 배열 요소를 이용해서 수행, 반환(return)값이 없다.

for 문처럼 많이 사용한다.

const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item);
});
// 1
// 2
// 3

2.2. map

callback 함수의 반환(return) 값을 받아서 배열을 새로 만든다.

반환된 배열의 length는 원본 배열과 항상 같다.

const arr = [1, 2, 3];
const doubledArr = arr.map((item) => {
  return item * 2;
});
console.log(doubledArr); // [2, 4, 6]

 

2.3. filter

조건에 해당하는 것만 반환(return)

반환된 배열의 length는 원본보다 줄어들 수 있다.

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((item) => {
  return item % 2 === 0;
});
console.log(filteredArr); // [2, 4]