1. map 활용
map() 메서드는 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드로 어떤 배열에 있는 모든 요소들의 값을 콜백 함수를 활용해 변경하여 만든 값들을 모은 배열이 필요할 때 사용한다.
map() 메서드의 사용 방법은 매개변수로 배열의 인자를 받고, 해당 인자에 어떤 변화를 준 뒤 반환하는 식으로 사용한다.
map은 3개의 매개변수를 가지고 있다.
- value : 현재 요소
- index : 요소의 인덱스
- array : map()을 호출한 원본 배열
그렇다면 map의 다양한 사용 예시를 통해 map에 대해서 조금 더 자세히 이해해보자
- 간단한 배열에서 map을 통해 배열 값을 조작하기
let arr = [1, 2, 3, 4]; let modifiedArr = arr.map(function(element) { return element * 3; }) console.log(modifiedArr); // Result : [3, 6, 9, 12] - 객체 배열에서 map을 통해 배열 속 객체를 재구성하기
let users = [ {firstName : "Susan", lastName: "Steward"}, {firstName : "Daniel", lastName: "Longbottom"}, {firstName : "Jacob", lastName: "Black"} ]; let userFullnames = users.map(function(element){ return `${element.firstName} ${element.lastName}`; }) console.log(userFullnames); // Result : ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
* 추가적으로 map을 활용할 때 필요한 부분만 사용하려면 어떻게 해야할까?
아래의 코드는 배열에서 홀수의 값만 남기기 위해 사용하는 map 메서드를 살펴보자
const arr = [1, 2, 3, 4, 5]
arr.map(element => {
if(element % 2){
return element
}
})
// Result : [1, undefined, 3, undefined, 5]
하지만 우리는 홀수인 [1, 3, 5] 배열을 원하는 것이지 undefined가 들어간 배열을 원하는 것이 아니다.
이때는 filter를 활용하여 undefined를 제거할 수 있다.
arr.map(item => {
if((item%2)){
return item
}
}).filter(element => element)
// Result : [1, 3, 5]
하지만 사실 위와 같은 경우에서는 map을 사용하지 않고 filter만 사용해도 같은 결과가 나오기는 한다.
arr.filter(element => element % 2)
// Result : [1, 3, 5]
그렇다면 filter는 무엇일까?
2. filter 활용
filter의 경우 주어진 배열의 일부에 대한 얕은 복사본은 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과하는 요소로만 필터링하는 것이다.
아래 간단한 예시를 통해 확인해보자
// 10보다 작은 값들만을 배열의 요소에 저장하고 싶을 때
let array = [3,5,11,0,9,'string'];
let result = array.filter((value) => value < 10)
console.log(result);
//Result : array [3, 5, 0, 9]
2-1. filter 사용법
filter 메서드를 쓸 때, 원하는 조건식을 filter()의 괄호 안에 쓰는 방법과 filter 외부에 쓰는 방법이 있다.
조건식을 filter 내에 쓰기
위 그림에서 #1은 filter 메서드의 조건식을 괄호 안에 바로 작성하였다.
이 방법은 조건식이 간단하여 한눈에 보기 쉬울 때 작성하면 된다.
조건식을 filter 내에 쓰기
위 그림에서 #2은 filter 메서드의 조건식을 외부함수로 선언한 후 callback 하고 있다.
이 방법은 조건식이 조건식이 복잡해졌을 때 코드 관리를 위해 사용 할 수 있을 것 같다.
* 간단한 예를 통해서 filter 메서드에 대해서 더 자세히 알아보자
const animals = [
{ species : 'mammal', name: 'cat' },
{ species : 'reptil', name: 'lizard' },
{ species : 'amphibia', name: 'flog' },
{ species : 'mammal', name: 'dog' },
{ species : 'amphibia', name: 'salamander' },
{ species : 'mammal', name: 'rabbit' },
]
위와 같은 객체 배열이 있다고 생각해보자.
이때 우리는 species가 mammal인 객체 배열을 원한다면 어떻게 해야할까?
const animals = [
{ species : 'mammal', name: 'cat' },
{ species : 'reptil', name: 'lizard' },
{ species : 'amphibia', name: 'flog' },
{ species : 'mammal', name: 'dog' },
{ species : 'amphibia', name: 'salamander' },
{ species : 'mammal', name: 'rabbit' },
]
const mam = animals.filter((anim) => anim.species === 'mammal')
console.log(mam)
// Result
// [
// {species: 'mammal', name: 'cat'},
// {species: 'mammal', name: 'dog'},
// {species: 'mammal', name: 'rabbit'}
//]
3. trim 활용
trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환하는 것으로 공백은 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR등)을 의미한다.
이것은 입력을 받았을 때 사용자가 입력한 내용에서 내가 필요한 데이터(문자열)만을 추출하고 싶을 때 사용하면 된다.
const greeting = ' Hello world! ';
console.log(greeting);
// Expected output: " Hello world! ";
console.log(greeting.trim());
// Expected output: "Hello world!";
추가적으로 한쪽 끝(앞, 뒤)의 공백을 제거하고 싶다면 trimStart(), trimEnd() 를 사용하면 된다.
4. includes 활용
includes() 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 true나 false를 반환한다.
즉, 어떤 배열에서 원하는 값이 있는지 판단하기 위해 사용되는 메서드라고 생각하면 된다.
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// Expected output: true
console.log(pets.includes('at'));
// Expected output: false
이때 주의할 점은 string의 경우 대/소문자를 구분하여야 하고 만약 확인하는 변수들의 타입을 잘 확인해서 변환을 해줘야한다.
5. set 활용
- Set 객체는 중복되지 않는 유일한 값들의 집합이다.
- 동일한 값을 중복하여 저장하지 않는다.
- 요소들의 순서에는 의미가 없다.
- Set은 인덱스를 통해 요소에 접근할 수 없다.
5-1. Set 객체 생성
const set = new Set();
console.log(set); // Set(0) {}
const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}
const set2 = new Set('hello');
console.log(set2); // Set(4) {"h", "e", "l", "o"}
따라서 Set 객체를 생성할 때, 배열에서 중복 요소를 제거하기 위해 사용할 수 있다.
// 배열의 중복 요소 제거
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]
// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]
5-2. Set 개수 확인
set 객체의 요소 개수를 확인하기 위해서는 .length가 아니라 .size 프로퍼티를 사용하여 확인할 수 있다.
const set = new Set([1, 2, 3]);
console.log(Object.getOwnPropertyDescriptor(Set.prototype, 'size'));
// {set: undefined, enumerable: false, configurable: true, get: ƒ}
set.size = 10; // 무시된다.
console.log(set.size); // 3
5-3. Set 요소 추가
set 객체에 새로운 요소를 추가할 때 .add() 메서드를 사용하여 추가하면 된다.
const set = new Set();
set.add(1).add(2).add(2); // 이렇게도 사용가능한데 중복된 값은 무시된다.
console.log(set); // Set(2) {1, 2}
5-3. Set 요소 존재 확인
set 객체에 원하는 요소가 있는지 확인하기 위해서는 .has() 메서드를 사용하면 된다.
const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false6. reduce 활용
reduce() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환한다.
보통 reduce() 메서드의 경우 누산기가 포함되어 있어, 배열의 각 요소에 대한 변환(함수 실행)을 하고 누적된 값을 출력할 때 사용한다.
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, idx) => { return acc += cur; }, 0);
console.log(result); // 15
const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
console.log(result2); // 25
위의 코드에서 맨 뒤에 오는 initialValue 값을 설정하여 반환값의 변화를 줄 수도 있다.
또 하나의 예제에서는 어떤 배열에서 음수와 양수의 개수를 구하여 출력하는 방법을 알아보자
const numbers = [2, -5, -123, 59, -5480, 24, 0, -69, 349, 3];
const result = numbers.reduce((acc, cur, idx) => {
if(cur < 0){
// 처리할 현재 요소가 음수일 경우
acc[0]++;
}
else if(cur > 0){
// 처리할 현재 요소가 양수일 경우
acc[1]++;
}
return acc;
}, [0,0]);
console.log(result); // [4, 5]
음수와 양수의 개수를 각각 카운트하기 위해 initialValue를 [0,0]로 설정했다. initialValue[0]에는 음수의 개수를, initialValue[1]에는 양수의 개수를 카운트한다고 하자.
첫 번째 호출 시, acc의 값은 initialValue의 값으로 설정되므로 초기 acc 값은 [0,0]이다.
배열 numbers의 모든 요소에 대해 reduce() 함수를 실행한 결과는 다음과 같다.
| idx | cur | acc |
| 0 | 2 | [0, 1] |
| 1 | -5 | [1, 1] |
| 2 | -123 | [2, 1] |
| 3 | 59 | [2, 2] |
| 4 | -5480 | [3, 2] |
| 5 | 24 | [3, 3] |
| 6 | 0 | [3, 3] |
| 7 | -69 | [4, 3] |
| 8 | 349 | [4, 4] |
| 9 | 3 | [4, 5] |
이런식으로 누산기의 사용이 가능하니 활용도가 무궁무진하다.
참조
map에서 undefined skip : https://jemerald.tistory.com/210
map tutorials : https://www.freecodecamp.org/korean/news/javascript-map-method/
filter 사용법 : https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95
trim MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trim
set 활용 : https://velog.io/@dolarge/Java-Script-Set-%EA%B3%BC-Map
set MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 기본, 심화 문법 및 엔진 동작 원리 (0) | 2024.02.05 |
|---|---|
| [JavaScript] 우테코 로또 게임 만들기 (0) | 2024.01.31 |
| [JavaScript] 호이스팅(Hoisting) (0) | 2024.01.24 |
| [JavaScript] 깊은 복사 / 얕은 복사 (1) | 2024.01.24 |
| [JavaScript/CSS] CSS Selector 정리 (1) | 2024.01.16 |
