배열과 객체의 표준내장함수[JS]

송민혁·2023년 1월 4일

Javascript

목록 보기

4/7

자바스크립트는 프로토타입 기반 프로그래밍 언어이다. 프로토타입은 나중에 게시글로 정리할 거여서 지금 간단히 설명하자면 유전자 같은 것이다. 내가 어떤 데이터를 만들기 전에 이미 그 객체 안에 있는 속성과 메소드를 의미한다. 이를 통해 상속 기능을 구현할 수 있다. 이 글에서는 많이 쓰이고 있는 배열과 객체에 내장되어있는 메소드를 알아보자.

배열 목차

forEach()

map()

indexOf()

findOf()

filter()

sort()

slice()

splice()

pop(), shift()

push(), unshift()

concat()

reduce()

객체 목차

Object.assign()

Object.entries()

Object.keys()

Object.values()

part (Array)

MDN (참조 사이트)

forEach

배열과 for문을 같이 혼합하여서 쓰는 경우가 많았다. 예를 들어

const items = ['sword', 'shoes', 'gloves'];

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

라는 코드가 있다. 배열의 길이만큼 반복문을 실행하는 형태이다.
이를 간단한 코드를 바꾸기 위해 forEach 이 등장하였다.

const items = ['sword', 'shoes', 'gloves'];

items.forEach(item=> console.log(item));

이렇게 바꿀 수 있다. forEach문은 배열의 원소의 개수만큼 반복문이 실행되며 주로 콜백함수와 같이 사용한다.

콜백함수(callback function)이란 매개변수로 들어가는 함수를 가리킨다.

map

배열의 요소를 모두 다 어떠한 연산을 하고 싶을 때 map()이라는 메소드 사용한다.

map을 사용하지 않을 때는 반복문이나 forEach를 사용해서 만들 수 있다. map은 새로운 배열을 만들어낸다는 차이점을 가지고 있다. 이를 코드를 통하여 모두 비교해보자. 예제의 내용은 각 요소들을 제곱하는 걸로 하자.

for문 사용 시 코드

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

for(let i=0; i<arr.length; i++) {
  squared.push(arr[i] * arr[i]);
}

console.log(arr); // [1,4,9,16,25,36]

forEach 메소드 사용 시 코드

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

arr.forEach(el=>{
  squared.push(el*el);
});

console.log(arr); // [1,4,9,16,25,36]

map 메소드 사용 시 코드

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

const squared = arr.map(el=> el*el); // 새로운 배열 반환
console.log(arr); // [1,4,9,16,25,36]

forEach와 map을 통하여 일반적인 for문보다 더 짧은 코드를 구현할 수 있다.
더 나아가, map은 forEach와 달리 새로운 배열을 반환한다. 이는 앞으로 기억해야 할 내용이다.

indexOf

indexOf는 원하는 내용의 요소의 인덱스를 찾아준다.

const arr = ['가방', '펜', '책', '텀블러'];
console.log(arr.indexOf('책')); // 2

findOf

만약 배열 안에 있는 원시 타입의 데이터(숫자, 문자열, 불리언)을 찾는다면 indexOf를 사용하면 된다. 하지만 배열이나 객체의 인덱스를 찾기 위해서는 indexOf가 아닌 findOf를 사용하여야 한다.

const theory = [
  {
    id:1,
    content: function
  },
  {
    id:2,
    content: array
  },
  {
    id:3,
    content: object
  }
 ];

console.log(theory.findOf(theory.id == 3)); // 2

filter

filter 메소드에서는 단어 그대로 특정 조건에 맞는 요소를 추출한다. 반복문 안에 조건문을 통해 일일이 검사하는 방법도 있지만 filter를 통해 해결하면 코드의 양을 줄일 수 있다.
filter메소드는 주로 콜백함수를 이용하여 조건을 추가하낟.

const nums = [1, 10, 25, 37, 100];

const result = nums.filter(num => num > 10); 
console.log(result); // [25, 37, 100]

sort

sort문은 정렬할 때 사용한다. 주로 이것은 알고리즘에서 많이 써서 유용하다. 배열 안에 요소들을
문자열의 유니코드 순서대로 정렬하고 그 배열을 반환한다.
이 점을 생각하면 오름차순이나 내림차순이 Number 기준으로 작동되지 않을 수 있다는 말이다.

그렇다면 오름차순과 내림차순은 어떻게 할까?

const nums = [1, 20, 15, 36, 28];

const sortedNums = nums.sort((a,b)=> a-b) // 오름차순
console.log(sortedNums) // [1, 15, 20, 28, 36]

const nums = [1, 20, 15, 36, 28];

const sortedNums = nums.sort((a,b)=> b-a) // 내림차순
console.log(sortedNums) // [36, 28, 20, 15, 1]

MDN reference

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.

compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.

compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 인덱스로 소트합니다.

송민혁

이전 포스트

class [JS] - 미완성

다음 포스트

배열과 객체의 표준내장함수[JS]

Javascript

배열 목차

객체 목차