[JS] 배열 내장함수

Hyun·2021년 12월 29일

JS

목록 보기

4/20

배열 내장함수

배열에는 굉장히 많은 내장함수를 가지고있다.
내장함수를 이용하면 for,if문을 사용했을때 보다 깔끔하고 짧은 코드를 완성할 수 있다

자바스크립트를 구성하는 거의 '모든 것'이 객체이다. 원시형 값(number,string,boolean,undefined,null)을 제외한 나머지 값(object,array,function)은 모두 객체이다.
내장함수는 객체의 매서드와 똑같다.

1. `forEach`

= 배열이 존재할 때, for문 대신 사용한다

(*짧게코드를 작성하는데 for와 같은 역할을 한다)

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//<결과>
//1
//2
//3
//4

for문을 이용하여 배열을 반복했을때

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

arr.forEach((elm) => console.log(elm));
//<결과>
//1
//2
//3
//4

forEach를 사용하면 짧은코드로 작성할 수 있다
(콜백함수가 있는경우)

let arr = [1, 2, 3, 4];
arr.forEach(function (elm) {
  console.log(elm);
});
//<결과>
//1
//2
//3
//4

forEach를 사용
(콜백함수가 없는경우)

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

arr.forEach(function (elm) {
  console.log(elm * 2);
});
//<결과>
//2
//4
//6
//8

forEach를 사용하여 요소에 2씩 곱해주고 출력도 가능하다.
(콜백함수가 없는경우)

2. `map`

= 배열 내장함수는 원본 배열에 모든 요소들을 순회하면서 연산을하며 최종으로 return된 값들만을 새로운 배열로 추려내서 반환해주는 함수

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

arr.forEach(function (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]

3.`includes`

= 내장함수는 주어진 배열에서 전달받은 인자와 일치하는값이 존재하는지를 불리언식으로 리턴(확인)해주는 함수.

(*비교연산자(===)를 이용하여 값을 찾아준다.)

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

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

includes 배열 내장함수를 이용하여 코드를 짧게 작성할 수 있다.

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

console.log(arr.includes(number));
//<결과>
//true

만약 숫자가아니라 문자열 3이라면?

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

console.log(arr.includes(number));
//<결과>
//false

4.`indexOf`

= 배열에 존재하면 몇번쨰에 있는지 인덱스를 출력해주는 함수

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

console.log(arr.indexOf(number));
//<결과>
//-1

*배열에 -1이 나온이유는 주어진값이 배열에 없을경우 이다.

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

console.log(arr.indexOf(number));
//<결과>
//2

5.`findIndex`

= findIndex 배열 내장함수를 이용하면 콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째요소를 반환하는 로직

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


console.log(arr.findIndex((elm) => elm.color === "green"));
//<결과>
//3

콜백함수가 익숙하지않다면 아래와같이 작성도 할 수 있다.

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

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

(주의) 일치하는 조건이 두개있을경우 가장 첫번째의 것을 반환함

(이유) 배열을 처음부터 끝까지 순서대로 순회하면서 가장 조건을 먼저 만족하는 것에 대해 인덱스를 반환하는 함수
고로, 배열에 내가 찾고자하는 검색이 유효한지를 확인하고 사용하는것이 좋다

결국 반환받을 수 있는건 배열의 인덱스이다

근데, 우리가 찾고자하는 요소에 직접적으로 접근하고싶다 하면 findIndex를 활용해서 할 수 있다

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

const idx = arr.findIndex((elm) => {
  return elm.color === "green";
});
console.log(arr[idx]);
//<결과>
//{color: "green"}

이 방법도 나쁘진 않지만 구지 이 방법을 사용안해도 되는 방향이 있다.

`find` 배열 내장함수를 이용하면된다!!

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

const obj = arr.find((elm) => {
  return elm.color === "green";
});
console.log(obj);
//<결과>
//{color: "green"}

find와 findIndex는 결국 콜백함수(이 조건을 만족하는 첫번째요소를 반환한다.)는 동일하지만,
find로 하게되면 만족하는 요소 그자체 반환
findIndex는 그 요소의 인덱스를 반환

6.`filter`

= 전달하는 콜백함수가 true를 반환하는 모든 요소를 배열로 반환하는 함수

배열에서 특정 조건을 만족하는 요소들을 배열로 반환하고싶을때 사용

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

console.log(arr.filter((elm) => elm.color === "blue"));
//<결과>
//(1) [Object]

//0: Object
//num: 3
//color: "blue"

7.`slice`

= 배열을 잘라서 새로운 배열로 반환해준다

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

console.log(arr.slice());
//<결과>
//(5) [Object, Object, Object, Object, Object]
//0: Object
//num: 1
//color: "red"
//1: Object
//num: 2
//color: "black"
//2: Object
//num: 3
//color: "blue"
//3: Object
//num: 4
//color: "green"
//4: Object
//num: 5
//color: "purple"

위처럼 slice()에 아무것도 적어주지않으면 그대로 반환한다

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

console.log(arr.slice(0, 2));
//<결과>
//(2) [Object, Object]
//0: Object
//num: 1
//color: "red"
//1: Object
//num: 2
//color: "black"

첫번째 인자를 비긴, 두번째 인자를 엔드
slice는 엔드에서 한개를 뺀것까지만 반환한다.

8.`concat`

= 두개의 배열을 하나로합쳐 새로운 배열로 반환해준다.

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" }
];
const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "purple" }
];

console.log(arr1.concat(arr2));
//<결과>
//(5) [Object, Object, Object, Object, Object]
//0: Object
//num: 1
//color: "red"
//1: Object
//num: 2
//color: "black"
//2: Object
//num: 3
//color: "blue"
//3: Object
//num: 4
//color: "green"
//4: Object
//num: 5
//color: "purple"

arr1을 기준으로 뒤에 arr2를 붙여서 하나의 배열로 반환해준다.

9.`sort`

= 문자배열을 사전순으로 정렬해주는 함수

정렬된배열을 반환하는것이아니라 그냥 원본배열을 정렬한다!

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

console.log(chars);
//<결과>
//(3) ["나", "다", "가"]

sort를 쓰기전에는 그대로 출력되지만

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

console.log(chars);
//<결과>
//(3) ["가", "나", "다"]

chars.sort();
console.log(chars);
//<결과>
//(3) ["가", "나", "다"]

sort를 하기전 콘솔결과와 한 후의 콜솔결과가 동일한것을 확인할 수 있다.

앞서 말한것과 같이 sort는 정렬된배열을 반환하는것이아니라 그냥 원본배열을 정렬한다라는것을 예제를 통해 눈으로 확인 할 수 있다.

그럼 숫자도 한번 해보자@_@

let numbers = [0, 3, 1, 5, 10, 21, 45, 68];

numbers.sort();
console.log(numbers);
//<결과>
//(8) [0, 1, 10, 21, 3, 45, 5, 68]

숫자의 경우 내가 원하는대로 정렬이 되지않는 결과를 확인할 수 있다.

그 이유는 앞에 말한것과같이 sort는 숫자를 기준으로 정렬하는것이아니라, 문자열을 기준으로 정렬하기떄문에 사전순으로 정렬하여 이런 결과가 나타난다.

고로 sort함수로 숫자를 정렬할때는 괄호안에 비교함수를 넣어서 사용해야한다.

let numbers = [0, 3, 1, 5, 10, 21, 45, 68];

const compare = (a, b) => {
  if (a > b) {
    //1.크다
    return 1;
  }
  if (a < b) {
    //2.작다
    return -1;
  }
  return 0; //3.같다
};

numbers.sort(compare);
console.log(numbers);
//<결과>
//(8) [0, 1, 3, 5, 10, 21, 45, 68]

비교함수는 기본적으로 두개의 값을 비교해서 세가지 중 하나의 결과를 출력해야한다.

비교함수가 세가지 기준에서 하나를 줘야하는데,
1은 a가 b보다 크면(=true면) a가 b보다 뒤에있어야 한다는 뜻
양수일때 뒤로 가고 음수일때는 앞으로 가라는 같을떄는 자리를 안바꾼다
내림차순은 양수,음수를 바꾸면 된다.

10.`join`

= 문자열을 하나로 합쳐주는 함수

const arr = ["현정", "님", "안녕하세요", "또 오셨군요"];

console.log(arr);
//<결과>
//(4) ["현정", "님", "안녕하세요", "또 오셨군요"]

이렇게 출력되는 문자열을 한 문장으로 만들고싶은 욕구가 생긴다.

const arr = ["현정", "님", "안녕하세요", "또 오셨군요"];

console.log(arr[0], arr[1], arr[2], arr[3]);
//<결과>
//현정 님 안녕하세요 또 오셨군요

이렇게 작성할 수도 있지만 1억개면 손가락이 뿌러지기에 join매서드를 사용한다!

const arr = ["현정", "님", "안녕하세요", "또 오셨군요"];

console.log(arr.join());
//<결과>
//현정,님,안녕하세요,또 오셨군요

쉼표로 구분하며 문장을 하나로 이어준다
쉼표가 싫다면은 괄호안에 따옴표를 넣어주면 된다!

const arr = ["현정", "님", "안녕하세요", "또 오셨군요"];

console.log(arr.join(""));
//<결과>
//현정님안녕하세요또 오셨군요

Hyun

FrontEnd Developer (with 구글신)

이전 포스트

[JS] <for> 반복문

다음 포스트

[JS] 배열 내장함수

JS

배열 내장함수

1. `forEach`

= 배열이 존재할 때, for문 대신 사용한다

(*짧게코드를 작성하는데 for와 같은 역할을 한다)

2. `map`

= 배열 내장함수는 원본 배열에 모든 요소들을 순회하면서 연산을하며 최종으로 return된 값들만을 새로운 배열로 추려내서 반환해주는 함수

3.`includes`

= 내장함수는 주어진 배열에서 전달받은 인자와 일치하는값이 존재하는지를 불리언식으로 리턴(확인)해주는 함수.

(*비교연산자(===)를 이용하여 값을 찾아준다.)

4.`indexOf`

= 배열에 존재하면 몇번쨰에 있는지 인덱스를 출력해주는 함수

5.`findIndex`

= findIndex 배열 내장함수를 이용하면 콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째요소를 반환하는 로직

(주의) 일치하는 조건이 두개있을경우 가장 첫번째의 것을 반환함

`find` 배열 내장함수를 이용하면된다!!

6.`filter`

= 전달하는 콜백함수가 true를 반환하는 모든 요소를 배열로 반환하는 함수

7.`slice`

= 배열을 잘라서 새로운 배열로 반환해준다

8.`concat`

= 두개의 배열을 하나로합쳐 새로운 배열로 반환해준다.

9.`sort`

= 문자배열을 사전순으로 정렬해주는 함수

정렬된배열을 반환하는것이아니라 그냥 원본배열을 정렬한다!

10.`join`

= 문자열을 하나로 합쳐주는 함수

[JS] <for> 반복문

[JS] 삼항연산자

0개의 댓글

[JS] 배열 내장함수

JS

배열 내장함수

1. forEach

= 배열이 존재할 때, for문 대신 사용한다

(*짧게코드를 작성하는데 for와 같은 역할을 한다)

2. map

= 배열 내장함수는 원본 배열에 모든 요소들을 순회하면서 연산을하며 최종으로 return된 값들만을 새로운 배열로 추려내서 반환해주는 함수

3.includes

= 내장함수는 주어진 배열에서 전달받은 인자와 일치하는값이 존재하는지를 불리언식으로 리턴(확인)해주는 함수.

(*비교연산자(===)를 이용하여 값을 찾아준다.)

4.indexOf

= 배열에 존재하면 몇번쨰에 있는지 인덱스를 출력해주는 함수

5.findIndex

= findIndex 배열 내장함수를 이용하면 콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째요소를 반환하는 로직

(주의) 일치하는 조건이 두개있을경우 가장 첫번째의 것을 반환함

find 배열 내장함수를 이용하면된다!!

6.filter

= 전달하는 콜백함수가 true를 반환하는 모든 요소를 배열로 반환하는 함수

7.slice

= 배열을 잘라서 새로운 배열로 반환해준다

8.concat

= 두개의 배열을 하나로합쳐 새로운 배열로 반환해준다.

9.sort

= 문자배열을 사전순으로 정렬해주는 함수

정렬된배열을 반환하는것이아니라 그냥 원본배열을 정렬한다!

10.join

= 문자열을 하나로 합쳐주는 함수

[JS] <for> 반복문

[JS] 삼항연산자

0개의 댓글

1. `forEach`

2. `map`

3.`includes`

4.`indexOf`

5.`findIndex`

`find` 배열 내장함수를 이용하면된다!!

6.`filter`

7.`slice`

8.`concat`

9.`sort`

10.`join`