JavaScript 기초 3/3

한입 크기로 잘라 먹는 리액트(React.js) 강의 내용을 정리하며 JavaScript의 기본 개념에 대해 알아보자

📒 배열의 내장함수

✏️ 1. forEach()

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

arr.forEach(function (elm) {
	console.log(elm);
});

// arr.forEach((elm) => console.log(elm)); 동일하다

👉🏻 callback 함수를 배열의 각각 요소에 적용해서 출력한다.

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

arr.forEach(function (elm) {
	newArr.push(elm * 2);
});

console.log(newArr);

👉🏻 모든 요소에 * 2를 하여 새로운 배열 만들기

✏️ 2. map()

const arr = [1,4,9,16];

const newArr = arr.map((elm) => {
	return elm * 2;
});

console.log(newArr);

// 출력 : (4) [2, 8, 18, 32]

👉🏻 원본 배열의 모든 값을 순회하며 * 2를 하여 새로운 배열 만들기
👉🏻 return을 사용해서 값 반환

✏️ 3. includes()

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

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

// console.log(arr.includes(number));와 동일

👉🏻 인자로 받은 값이 존재하는지 boolean으로 return한다.

✏️ 4. indexOf()

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

let number = 3;

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

// 출력 : 2

👉🏻 전달 받은 값과 동일한 값이 있는지 확인하고 위치를 반환한다.
👉🏻 없으면 -1을 반환한다.

✏️ 5. findIndex()

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

let number = 3;

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

👉🏻 findIndex()는 일치하는 조건이 두개면 배열을 순서대로 순회하기 때문에 앞에 있는 순서를 반환한다.
👉🏻 index가 아니라 배열의 요소를 가지고 오고 싶으면 find()를 사용하면 된다.

✏️ 6. find()

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

let number = 3;

const element = arr.find(elm) => {
	return ele.color === "blue";
});

console.log(element);

👉🏻 callback 함수를 사용하는 것은 동일하며 요소를 반환하는지 순서를 반환하는 지 차이이다.

✏️ 7. filter()

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

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

👉🏻 조건을 만족하는 요소를 배열로 반활할때 사용한다.

✏️ 8. slice()

👉🏻 배열의 method.slice()는 초기값부터 마지막 값 -1까지를 잘라서 출력한다.

✏️ 9. concat()

arr.concat(arr2)

👉🏻 arr1을 arr2에 붙인다.

✏️ 10. sort()

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

const compare = (a,b) => {
	if (a>b) {
    	return 1;
        // 1이면 뒤로 보내기
    }
    if (a<b) {
    	return -1;
        // -1이면 앞으로 보내기
    }
    return 0;
};

numbers.sort(compare);

console.log(numbers);

👉🏻 배열들의 배열, 함수들의 배열 등도 마음대로순서를 정리할 수 있다.

✏️ 11. join()

const arr = ["최유리", "여", "안녕하세요", "또오셨군요"];

console.log(arr[0],arr[1],arr[2],arr[3]);

// console.log(arr.join(" "));로 사용

// 출력 : 최유리 여 안녕하세요 또오셨군요

👉🏻 배열의 모든 요소를 문자열로 합치는 method이다.
👉🏻 join을 사용하면 하나씩 안쳐도 공백으로 구분해서 하나로 합치기 가능하다.
👉🏻 괄호 안은 구분자 역할을 한다.

✏️ 이 외에도 배열의 내장함수는 굉장히 많다.