[자바스크립트 JS] 배열의 편리한 함수들을 알아보자

안녕하세요! 

오늘은 배열을 다룰 때 많이 쓰이는 여러가지 편리한 함수들을 소개해보도록 하겠습니다!

코딩테스트 푸실 때에도 필요한 부분을 적용해보시면 좋을 것 같아요.

그럼 저와 함께  꼬고싱~

 

 

---

 

배열 생성하기

const arr1 = new Array(); // []
const arr2 = []; // []
const arr3 = [1, 2, 3, 4, 5]; // [1, 2, 3, 4, 5]
const arr4 = new Array(5); // [ <5 empty Items> ]

 

Array.fill(): 배열 초기화 하기

fill 함수는 입력받은 파라미터의 값으로 모든 요소를 초기화한다.

const arr5 = new Array(5).fill(5);

console.log(arr5); // [5, 5, 5, 5, 5]

 

Array.from(): 순서가 있는 배열의 초기화

const arr6 = Array.from(Array(5), function (v, k) {
  return k + 1;
});

console.log(arr6); // [1, 2, 3, 4 ,5]

reverse(): 배열 뒤집기

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

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

reverse 함수를 사용하면 원래 있던 배열에도 영향이 가기 때문에 주의해야 한다. 

console.log(arr.reverse() === arr); // true

 

 

 

 

concat(): 배열 합치기

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = [7, 8, 9, 10];

// concat
console.log(arr1.concat(arr2));

 

---

push(): 배열의 끝에 요소 추가하기

push() 는 배열의 끝에 여러가지 요소를 추가해주기도 한다.

arr1.push(7);
arr1.push(7, 8, 9);

 

 

pop(): 배열의 끝 요소 삭제하기

이 떄 pop은 삭제한 요소를 반환해주기 때문에 console에는 7이 찍힐 것이다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 7, 8, 9];

arr.pop();
arr.pop();
console.log(arr.pop());

 

 

unshift(): 배열의 맨 앞에 요소 추가하기

arr.unshift(10);

 

 

shift(): 배열의 맨 앞 요소 삭제하기

shift 역시 삭제한 요소를 반환한다.

arr.shift();

 

---

 

slice() : 배열 중간의 요소를 잘라서 반환하기

slice 의 첫번째 파라미터에는 시작하는 요소의 인덱스를 써주고 ,

두번째 파라미터에는 끝 요소의 인덱스에 + 1를 써주어야 한다.

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.slice(2, 4));

이 떄, 콘솔에는 [3, 4] 가 찍힌다.
slice 를 쓸 경우에는 원본 배열에는 영향을 주지 않는다. 이 부분을 주의하자.

 

 

 

splice(): 배열 중간의 요소를 자르기

첫번째 파라미터에는 배열 중 자르고 싶은 첫 번째 요소의 인덱스를 써주고,

두번째 파라미터에는 자르고 싶은 길이를 써주면 된다.

const arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 2);

console.log(arr);

arr의 2번째 인덱스인 3 부터 2개를 자르니 3, 4가 잘려 나갔다.

따라서 콘솔에는 [1, 2, 5, 6] 이 찍힌다.

 

 

 

for 문으로 배열 순회하기

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 1 2 3 4 5

 

 

for of 문으로 배열 순회하기 (추천)

const arr = [1, 2, 3, 4, 5, 6]

for (const item of arr) {
  console.log(item);
}

// 1 2 3 4 5 6

 

 

배열은 객체이다?!

const arr = [1, 2, 3];

console.log(typeof arr); // object

 

 

사실 배열은 객체이기 때문에 아래 2번쨰 줄처럼 객체처럼 사용할 수 있다.

하지만 length를 찍어보면 여전히 6이 나온다.

자바스크립트에서 배열이 특수한 객체이기 때문이다.

배열의 길이는 내부적으로 관리되기 때문에 객체처럼 사용하더라도 크게 달라지지 않는다.

하지만 이렇게 사용하는 것은 배열을 올바르게 사용하는 방법은 아니기 때문에 추천하진 않는다.

 

const arr = [1, 2, 3, 4, 5, 6];
arr["key"] = "value";
// [ 1, 2, 3, 4, 5, 6, key: 'value' ]

console.log(arr.length); // 6

 

---

 

여기까지 배열의 여러가지 편리한 함수들을 소개해보았습니다.

도움이 되셨으면 좋아요 댓글 한번 달아주세요! (소통해요 ㅇ _ ㅇ ㅋㅋ)