이번에는 배열을 다룰 때 알고있으면 너무나 유용한 다양한 내장 함수들에 대하여 알아보겠습니다.
forEach
forEach는 가장 쉬운 배열 내장함수입니다. 기존에 우리가 배웠던 for 문을 대체 시킬 수 있습니다.
const superhoroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
다음과 같은 배열이 있고, 배열 안에 있는 모든 값을 출력해야 한다면 for문을 사용하여 다음과 같이 구현할 수 있다.
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
for (let i = 0; i < superheroes.length; i++) {
console.log(superheroes[i]);
}
이것을 배열의 forEach 함수를 사용하면 다음과 같이 구현 할 수 있습니다.
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
superheroes.forEach(hero => {
console.log(hero);
});
forEach 함수는 피라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줍니다. 이 함수의 파라미터(매개변수) hero는 각 원소를 가르키게 됩니다.
이렇게 함수형태의 파라미터(매개변수)를 전달하는 것을 콜백함수 라고 부릅니다. 함수를 등록해주면, forEach가 실행을 해주는거죠.
map
map은 배열 안의 각 원소를 변활 할 때 사용되며, 이 과정에서 새로운 배열이 만들어집니다.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
위와 같은 배열이 있고, 이 배열 안의 숫자를 모두 제곱해서 새로운 배열을 만들고 싶다고 어떻게 해야 할까요?
map 함수를 사용하지 않고 우리가 지금까지 배운 지식들을 활용하면 다음과 같이 구현 할 수 있습니다.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = [];
for (let i = 0; i < array.length; i++) {
squared.push(array[i] * array[i]);
}
console.log(squared);
배열에 반복문을 사용해서 계속해서 제곱해나간다는 값을 주는 것입니다.
[1, 4, 9, 16, 25, 36, 49, 64];
결과는 다음과 같이 출력이 될 것입니다. 이것을 map을 사용하면 더 짧은 코드를 사용하여 구현이 됩니다.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const add = n => n * n;
const abc = array.map(add);
console.log(abc);
위와 같은 결과가 나타났는지 확인 해봅니다.
map함수의 파라미터(매개변수)로는 변화를 주는 함수에게 전해줍니다. 이를 변화함수라고 부르도록 하겠습니다.
현재 우리의 변화함수 add는 파라미터 n을 받아와서 이를 제곱해줍니다.
array.map 함수를 사용 할 때 add는 파라미터 n을 받아와서 이를 제곱해줍니다.
array.map 함수를 사용 할 때 add는 변화함수로 사용함으로서, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성하였습니다.
변화함수를 꼭 이름을 붙여서 선언 할 필요는 없습니다. 코드를 다음과 같이 작성해도 됩니다.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const add = array.map(n => n * n);
console.log(add);
훨씬 간결 해지죠?
indexOf
indexOf는 원하는 항목이 몇번째 원소인지 찾아주는 함수입니다.
예를 들어서 다음과 같은 배열이 있을 때
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
여기에서 토르가 몇 번째 항목인지 알고싶다고 가정해봅시다.
그렇다면 아래와 같이 입력 할 수 있습니다.
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);
결과는 배열은 0부터 시작하기 때문에, 2에 위치한 토르가 나타납니다.
2
index 값은 0 부터 시작하기 때문에 0: 아이언맨 1: 캡틴 아메리카 2: 토르 이렇게 돼서 2라는 값이 나타나는 것 입니다.
findlndex
만약에 배열 안에 있는 숫자, 문자열, 또는 불리언이라면 찾고자 하는 항목이 몇번째 값인지 알아내려면 indexOf를 사용하면 됩니다.
하지만, 배열 안에 있는 값이 객체이거나, 배열이라면 indexOf로 찾을 수 없습니다.
const todos = [
{
id : 1,
text : '자바스크립트 입문',
done : true
},
{
id : 2,
text : '함수 배우기',
done : true
},
{
id : 3,
text : '객체와 배열 배우기',
done : true
},
{
id : 4,
text : '배열 내장함수 배우기',
done : false
},
];
다음과 같은 배열이 있다고 가정해봅시다.
여기서 만약 id가 3인 객체가 몇번째에 있는지 찾으려고 한다면, findIndex함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있습니다.
const index = todos.findIndex(todo => todo.id === 3);
console.log(index);
이렇게 해주면 결과는 2가 나타납니다.
find
find 함수는 findIndex랑 비슷한데, 찾아낸 값이 몇번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환합니다.
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
const todo = todos.find(todo => todo.id === 3);
console.log(todo);
결과는 다음과 같습니다.
Object {id: 3, text: "객체와 배열 배우기", done: true}
filter
filter함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듭니다.
예를 들어서, 우리가 방금 만들었던 todos 배열에서 done 값이 false인 항목들만 따로 추출해서 새로운 배열을 만들어봅시다.
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);
filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 됩니다. 방금 우리가 작성한 코드는 이렇게 입력 할 수도 있습니다.
splice
splice는 배열에서 특정 항목을 제거할 때 사용합니다.
const numbers = [10, 20, 30, 40];
위 배열에서 30을 지운다고 가정해봅시다. 그러면, 30이 몇번째 index인지 알아낸 이후, 이를 splice를 통해 지워줄 수 있습니다.
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);
결과는 다음과 같습니다.
[10, 20, 40]
splice를 사용 할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를
지울지를 의미합니다.
slice
slice는 splice랑 조금 비슷한데요, 배열을 잘라낼 때 사용하는데, 중요한점은 기존의 배열은 건들이지 않는 다는 것입니다.
const numbers =[10, 20, 30, 40];
const sliced = numbers.slice(0, 2); //0부터 시작해서 2전까지
console.log(sliced); // [10, 20]
console.log(numbers); //[10, 20, 30, 40]
slice에는 두개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지를 의미합니다.
shift 와 pop
shift 와 pop은 비슷하지만, 다릅니다.
shift 는 첫 번째 원소를 배열에서 추출해줍니다.(추출하는 과정에서 배열에서 해당 원소는 사라집니다.)
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value);
console.log(numbers);
결과는 다음과 같습니다.
10
[20, 30, 40]
다음으로 pop을(를) 해볼까요?
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value);
console.log(numbers);
pop는 push의 반대로 생각하시면 됩니다. push는 배열의 맨 마지막에 새 항목을 추가하고, pop는 맨 마지막 항목을 추출합니다.
unshift
unshift는 shift의 반대입니다.
배열의 맨 앞에 새 원소를 추가합니다.
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);
결과는 다음과 같습니다.
[5, 10, 20, 30, 40]
concat
concat은 여러개의 배열을 하나의 배열로 합쳐줍니다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated);
결과는 다음과 같습니다.
[1, 2, 3, 4, 5, 6];
concat 함수는 arr1과 arr2에 변화를 주지 않습니다.
join
join은 배열 안의 값들을 문자열 형태로 합쳐줍니다.
const array = [1, 2, 3, 4, 5];
console.log(array.join()); //1, 2, 3, 4, 5
console.log(array.join(' ')); //1 2 3 4 5
console.log(array.join(', ')); //1, 2, 3, 4, 5
reduce
reduce함수는 잘 사용 할 줄 알면 정말 유용한 내장함수이니다. 마약 여러분이 주어진 배열에 대하여 총합을 구해야 하는 상황이 왓다고 가정해봅시다. 이렇게 구현을 할 수 있을텐데요.
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
sum += n;
});
console.log(sum);
(결과는 15가 됩니다)
여기서 sum을 계산하기 위해서 사전에 sum을 선언하고, forEach를 통하여 계속해서 덧셈을 해주었는데요,
reduce라는 함수를 사용하면 다음과 같이 구현 할 수 있습니다.
accumulator는 값의 의미는 누적된 값,
는 어렵다 나중에 수정해야지
'JavaScript' 카테고리의 다른 글
삼항 연산자 (0) | 2020.03.20 |
---|---|
프로토타입과 클래스 (0) | 2020.03.20 |
반복문 (0) | 2020.03.19 |
배열 (0) | 2020.03.18 |
객체 (0) | 2020.03.18 |