배열의 내장함수

for문

const arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

1
2
3
4

forEach 메소드

const arr = [1, 2, 3, 4];
arr.forEach((elm) => console.log(elm));

1
2
3
4

배열의 하나 하나 요소를 콜백함수의 파라미터로 전달해준다.

forEach 메소드를 활요해서 배열의 요소에 2배를 한 새로운 배열 만들기

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

arr.forEach((elm) => newArr.push(elm * 2));
console.log(newArr);

[ 2, 4, 6, 8 ]

map 메소드

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});
console.log(newArr);

[ 2, 4, 6, 8 ]

map 메소드는 원본 배열의 모든 요소를 순회하면서 연산해 return된 값들을을 반환해 새로운 배열을 만들어준다.

includes 메소드

const arr = [1, 2, 3, 4];
let number = 3;

arr.forEach((elm) => {
  if (elm === number) {
    console.log(true);
  }
});

true

arr배열 안에 number와 일치하는 값이 있는지 확인하는 프로그램, include 메소드를 이용하면 훨씬 간단하게 작성할 수 있다.

const arr = [1, 2, 3, 4];
let number = 3;

console.log(arr.includes(number));

주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인해주는 메소드이다. 타입까지 같은 값을 찾아주는 것을 유의하자 (===)

indexOf 메소드

const arr = [1, 2, 3, 4];
let number1 = 3;
let number2 = '3';

console.log(arr.indexOf(number1));
console.log(arr.indexOf(number2));

2
-1

indexOf메소드는 주어진 배열에서 전달받은 인자와 일치하는 값이 있으면 인덱스를 찾아준다. 값이 배열에 존재하지 않을 경우 -1을 반환해준다.

findIndex 메소드

const arr = [
  { color: 'red' },
  { color: 'blue' },
  { color: 'black' },
  { color: 'green' }
];


console.log(
  arr.findIndex((elm) => {
    return elm.color === 'green';
  })
);

3

findIndex메소드는해당 콜백함수가 true인 첫번째 요소를 반환해준다.

find 메소드

const arr = [
  { color: 'red' },
  { color: 'blue' },
  { color: 'black' },
  { color: 'green' }
];

console.log(
  arr.find((elm) => {
    return elm.color === 'green';
  })
);

{ color: 'green' }

find메소드는 findIndex와 비슷하지만, 해당 요소의 인덱스가 아닌 요소를 반환해준다.

filter 메소드

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'blue' },
  { num: 3, color: 'black' },
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' },
];

console.log(arr.filter((elm) => elm.color === 'blue'));

[ { num: 2, color: 'blue' }, { num: 5, color: 'blue' } ]

filter메소드는 전달한 콜백함수가 true를 반환하는 요소들을 배열로 반환하는 메소드이다.

slice 메소드

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'blue' },
  { num: 3, color: 'black' },
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' },
];

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

[ { num: 1, color: 'red' }, { num: 2, color: 'blue' } ]

배열을 잘라주는 메소드 slice(a,b)일경우 a 인덱스부터 b 인덱스 - 1까지의 요소들을 잘라서 반환해준다

concat 메소드

const arr1 = [
  { num: 1, color: 'red' },
  { num: 2, color: 'blue' },
  { num: 3, color: 'black' },
];

const arr2 = [
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' },
];

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

[
  { num: 1, color: 'red' },
  { num: 2, color: 'blue' },
  { num: 3, color: 'black' },
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' }
]

두 배열을 합쳐서 반환해주는 메소드

sort메소드

let chars = ['나', '다', '가'];

console.log(chars);
chars.sort();
console.log(chars);

[ '나', '다', '가' ]
[ '가', '나', '다' ]

원본 배열을 정리하는 메소드

let numbers = [0, 1, 3, 2, 10, 30, 20];

console.log(numbers);
numbers.sort();
console.log(numbers);

[
   0,  1,  3, 2,
  10, 30, 20
]
[
   0, 1, 10, 2,
  20, 3, 30
]

숫자를 정렬할 경우 문자를 기준으로 정렬(사전순)이 된다.

이런 경우를 위해 비교함수를 직접 만들어 정렬해줄 수 있다.

let numbers = [0, 1, 3, 2, 10, 30, 20];
const compare = (a, b) => {
  if (a > b) {
    // 크다 - 뒤로 보냄
    return 1;
  }
  if (a < b) {
    // 작다 - 앞으로 보냄
    return -1;
  }
  // 같다
  return 0;
};

console.log(numbers);
numbers.sort(compare);
console.log(numbers);

[
   0,  1,  3, 2,
  10, 30, 20
]
[
   0,  1,  2, 3,
  10, 20, 30
]

join 메소드

const arr = ['Hello', 'world', '!'];
console.log(arr.join(' '));

Hello world !

배열의 모든 요소를 하나의 문자열로 합쳐주는 메소드. 매개변수를 넣지 않을 경우 ,가 자동으로 넣어진다.