JavaScript 이론 정리 #3 [배열 메소드]

유튜버 코딩앙마님의 자바스크립트 중급 강좌를 보며 정리한 내용입니다.

https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=2396s 

---

 

Array

 

arr.splice(n, m)

: 특정 요소 지움

: n부터 시작해서 m개

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

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

 

 

arr.splice(n, m, x)

: 특정 요소 지우고 추가

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

arr.splice(1, 3, 100, 200);

console.log(arr); //[1, 100, 200, 5]

 

두 번째 인자로 0을 넣으면 아무것도 지우지 않고 새로운 값을 추가할 수 있다.

let arr = ["나는", "철수", "입니다"];

arr.splice(1, 0, "대한민국", "소방관"); 
//["나는", "대한민국", "소방관", "철수", "입니다"]

 

 

arr.splice()

: 삭제된 요소 반환

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

let result = arr.splice(1, 2);

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

 

 

arr.slice(n, m)

: n부터 m까지 반환하되 m은 포함하지 않는다.

let arr = [1, 2, 3, 4, 5];
arr.slice(1, 4); //[2, 3, 4]

 

 

arr.concat(arr2, aar3..)

: 합쳐서 새배열 반환

let arr = [1, 2];

arr.concat([3, 4]); // [1, 2, 3, 4]
arr.concat([3, 4], [5, 6]); //[1, 2, 3, 4, 5, 6]
arr.concat([3, 4], 5, 6); //[1, 2, 3, 4, 5, 6]

세 번째 예시처럼 첫 번째 인자는 배열이고 다른 인자는 배열이 아니어도 정상적으로 합쳐져서 하나의 배열로 반환되게 된다.

 

 

arr.forEach(fn)

: 배열 반복

: 배열의 값 하나하나마다 콜백 함수를 실행한다.

let users = ['Mike', 'Tom', 'Jane'];

users.forEach((item, index, arr) => {
	//..
});

forEach는 3가지의 파라미터가 있는데 첫 번째는 item, 즉 배열의 값들이다. 두 번째는 index이고 세 번째는 arr 자체를 받을 수 있다.

 

let arr = ["Mike", "Tom", "Jane"];

arr.forEach((name, index) => {
	console.log(`${index + 1}. ${name}`);
});

/*
1. Mike
2. Tom
3. Jane
*/

 

 

arr.indexOf / arr.lastIndexOf

:인덱스를 확인

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

arr.indexOf(3); //2

arr.indexOf(3, 3); //7

arr.lastIndexOf(3); //7

indexOf의 인자가 2개인 경우 첫 번째 인자는 탐색을 시작하는 시작점이고 이 시작점부터 두 번째 인자가 어디 있는지 인덱스를 반환하게 된다.

 

뒤에서부터 인덱스를 찾고 싶다면 lastIndexOf를 사용하면 된다.

 

 

arr.includes()

:포함하는지 확인

let arr = [1, 2, 3];

arr.includes(2); //true
arr.includes(8); //false

 

 

arr.find(fn)/ arr.findIndex(fn)

: indexOf와 같이 찾는다는 것은 동일하지만 콜백함수를 인자로 받아 복잡한 연산이 가능하다.

: 값마다 콜백함수를 실행하는 것이 아니라, 첫 번째 true값이 나오면 그 값만 반환하고 끝난다.

: 만약 없으면 undefined를 반환한다.

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

const result = arr.find((item) => {
	return item % 2 === 0;
});

console.log(result);

//2

짝수를 반환하는 식을 만들었을 때 첫 번째 true값인 2만 반환한다.

모든 짝수를 찾고 싶다면? filter를 사용하면 된다.

 

let userList = [
	{name: "Mike", age: 30},
    {name: "Jane", age: 27},
    {name: "Tom", age: 10}
];

const result = userList.find((user) => {
	if(user.age < 19) {
    	return true;
    }
    return false;
})

console.log(result);
//{name: "Tom", age: 10}

findIndex를 사용하면 조건에 맞는 인덱스를 반환하므로 2가 나온다.

 

 

arr.filter(fn)

:만족하는 모든 요소를 배열로 만들어 반환

 

위에서 배열에서 짝수 찾는 함수를 filter를 이용해서 첫 번째 값이 아니라 모두 찾도록 하면

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

const result = arr.filter((item) => {
	return item % 2 === 0;
});

console.log(result);

//[2, 4]

 

 

arr.reverse()

:역순으로 재정렬

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

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

 

 

arr.map(fn)

:함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
	{name: "Mike", age: 30},
    {name: "Jane", age: 27},
    {name: "Tom", age: 10}
];

let newUserList = userList.mpa((user, index) => {
	return Object.assign({}, user, {
    id: index + 1
    	isAdult: user.age > 19,
    });
});

console.log(newUserList);

/*[
	{name: "Mike", age: 30, id: 1, isAdult: true},
    {name: "Jane", age: 27, id: 2, isAdult: true},
    {name: "Tom", age: 10, id: 3, isAdult: false}
];
*/

기존의 배열은 건드리지 않고 새로운 배열을 반환한다.

 

 

 

arr.join

: 배열을 하나의 문자열로 변환

let arr = ["안녕", "나는", "철수야"];

let result = arr.join();

console.log(result);

//안녕,나는,철수야

join의 인자로 들어오는 값이 구분자이다. 구분자로는 " "(공백), "-", "\n" 등 다양하게 사용할 수 있으며 따로 구분자를 지정하지 않을 시 기본 값은 쉼표이다.

 

 

 

arr.split

:문자열을 배열로 나눠서 변환

: 인자의 문자를 기준으로 쪼개서 배열로 만든다

const user = "Mike,Jane,Tom,Tony";

const result = users.split(",");

console.log(result);

//["Mike", "Jane", "Tom", "Tony"]

쉼표를 기준으로 문자를 나누어 배열로 만든 것이다. 아무 값도 주지 않으면 한 글자씩 쪼개진다.

 

 

Array.isArray()

:배열인지 아닌지 type을 반환한다.

: typeof를 사용할 수 없는 이유는 배열은 특별한 형태의 객체여서 typeof를 할 경우 object로 나오기 때문이다.

let user = {
	name: "Mike",
    age: 30
}

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user); //object
console.log(typeof userList); //object

console.log(Array.isArray(user)); //false
console.log(Array.isArray(userList)); //true

 

 

arr.sort()

:배열 재정렬

:원본 배열 자체가 정렬됨.

 

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

arr.sort();

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

제대로 정렬된 것을 볼 수 있다.

 

let arr = [27, 8, 5, 13];

arr.sort();

console.log(arr);
//[13, 27, 5, 8]

이번엔 정렬이 이상하게 됐는데 그 이유는 숫자가 문자열로 적용되어 13의 1이 첫 번째 이기 때문에 첫 번째로, 27의 2가 그다음 순서이기 때문에 두 번째로 정렬되었다.

이럴 땐 어떤 순서로 정렬할 것인지 함수를 전달해주면 된다.

 

let arr = [27, 8, 5, 13];

arr.sort((a, b) => a - b );

console.log(arr);
//[13, 27, 5, 8]

a-b를 해서 음수면 a를 앞으로 보내고 0이면 그대로, 양수면 a가 더 큰 것이기 때문에 a를 b 뒤로 보내는 것이다. 따라서 오름차순으로 정렬이 가능하다. 내림차순으로 정렬하려면 b - a를 하면 된다.

 

보통은 이런 함수를 따로 만들어서 사용하기보다 Lodash라는 라이브러리를 사용한다. 

 

 

 

arr.reduce()

:(누적 계산값, 현재 값 ) => {return 계산 값 };

:인수로 함수를 받음.

 

배열의 모든 값을 더하는 방법은 for문 forEach 등 여러 가지가 있다. reduce 역시 그중 하나이다.

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

const result = arr.reduce((prev, curr) => {
	return prev + curr;
}, 0)

console.log(result); //15

reduce는 인자로 (누적된)이전 값과 현재 값을 받는다. 그리고 초기값을 선택사항이라 안 써도 되는데 안 쓰는 경우 첫 번째 값이 초기값이 된다.

초기값을 0으로 설정했기 때문에 처음 prev(누산값) = 0, curr (현재 값) = 1이다. prev + curr = 1

다시 한 바퀴 돌면서 prev = 1, curr = 2가 되고 prev + curr = 3,

다시 prev = 3, curr = 3, prev + curr = 6,

prev = 6, curr = 4, prev + curr = 10,

prev = 10, curr = 5, prev + curr = 15

따라서 15가 반환되는 것이다.

 

 

reduce를 사용해서 성인인 객체의 이름만 뽑아보자.

let userList = [
	{name: "Mike", age: 30},
    {name: "Tom", age: 10},
    {name: "Jane", age: 27},
    {name: "Sue", age: 26},
    {name: "Harry", age: 42},
    {name: "Steve", age: 15},
];

let result = userList.reduce((prev, curr) => {
	if(curr.age > 19){
    	prev.push(curr.name)
    }
     return prev;
}, [])

console.log(result);

초기값은 [] 빈배열이다. 이 빈 배열에 성인인 사람의 이름만 넣어주는 것이다.

처음엔 prev=[], curr = {name: "Mike", age: 30}

19보다 크기 때문에 prev=["Mike"]

 

-prev=["Mike"], curr = {name: "Tom", age: 10}

19보다 작기 때문에 prev 값은 변화가 없다.

 

-prev=["Mike"], curr ={name: "Jane", age: 27},

19보다 크기 때문에 prev=["Mike", "Jane"]

 

-prev=["Mike", "Jane"], curr = {name: "Sue", age: 26},

19보다 크기 때문에 prev=["Mike", "Jane", "Sue"]

 

-prev=["Mike", "Jane", "Sue"], curr = {name: "Harry", age: 42},

19보다 크기 때문에 prev=["Mike", "Jane", "Sue", "Harry"]

 

-prev=["Mike", "Jane", "Sue", "Harry"], curr = {name: "Steve", age: 15},

19보다 작기 때문에 prev 값 변화없다.

 

따라서 ["Mike", "Jane", "Sue", "Harry"]가 반환된다.

 

arr.reduceRight

:reduce와 동일하게 기능하나 배열의 우측부터 계산됨.