.map() :: 변경하기

• 기존 배열에 특정한 규칙을 적용시켜 새로운 배열을 리턴하는 메서드.

var array = [1.1, 2.1, 3.1, 4.1, 5.1, 6.1, 7.1, 8.1, 9.1, 10.1];

// 일반함수로 map 메서드 표현
var array10 = array.map(function (elements){
  return elements * 10;
});

console.log(array10);
// [11, 21, 31, 41, 51, 61, 71, 81, 91, 101]

// 화살표함수로 map 메서드 표현
var array20 = array.map((el) => el*10);

console.log(array20);
// [11, 21, 31, 41, 51, 61, 71, 81, 91, 101]

• 📚 자료 출처

  https://lee-mandu.tistory.com/9

.filter() :: 걸러내기

• 배열을 순회하며 요소마다 조건 확인 후, 조건을 만족하는 원소들로 구성된 새로운 배열을 리턴하는 메서드.
• 배열에 조건을 주어, 조건에 만족하지 않는 요소를 걸러낸다.
• 조건에 부합되는 요소가 없다면 빈 배열을 반환한다.

let newArr = arr.filter(callback(currentValue[element, index, [array]]) {
}[, thisArg]);

• callback : 3개의 인자 (element, index, array) 를 가지는 조건값에 대한 함수
• element : 처리할 현재 요소
• index : 현재 인덱스
• array : filter를 호출한 배열
• thisArg : callback을 생행 할 때 this로 사용하는 값

let numbers = [10, 4, 32, 17, 5, 2];

let result = numbers.filter((value)=> value > 10); // 10보다 큰 원소만 골라서 새로운 배열을 리턴

console.log(result); // [32, 17]

💡 .filter()안에 들어간 변수명(value)은 내가 아무렇게나 지어도 되는 건가..?
-> 임의의 변수명으로 지어도 됨

.includes()를 활용한 .filter 콜백함수 예제

// 'ap'가 들어간 원소 찾기

let Arr = ['apple', 'banana', 'orange', 'grapes'];

function arrFunction(value) {          // 2 - Arr 배열의 복제본이 함수에 전달
	let value2 = value.includes('ap');   // 3 - 복제본의 원소들 중 'ap'가 포함된 문자열 검색하여 새로운 변수 value2에 담는다
	return value2;                       // 4 - 새로운 변수 value2 리턴
}

let result = Arr.filter(arrFunction);  // 1 - filter()를 이용하여 콜백함수 호출 -> 리턴된 value2 값을 새로운 변수 result에 담는다

console.log(result);                   // 5 - result값 반환

// name 중 '홍'이 들어간 원소 찾기

let Arr = [
	{ id: 'abc', name: '홍길동', number:10 },
	{ id: 'def', name: '홍순이', number:40 },
	{ id: 'fff', name: '미요나', number:70 },
];

function arrFunction(value) {
	let value2 = value.name.includes('홍');
	return value2;                  
}

let result = Arr.filter(arrFunction); 

console.log(result);

💡 개인적으로 궁금한 점

includes의 반환값은 true나 false이다. 그래서 arrFunction 함수 안의 value2 변수의 값은 true이고, Arr.filter() 값에도 true가 Input값으로 들어왔을 테다. 그런데 filter()이 어떻게 '홍' 문자열이 포함되어 있는지를 어떻게 알고, 그 해당하는 요소들만 걸러서 배열을 만들어 주지? true 값 안에 '홍' 문자열이 포함되어 있다는 정보도 함께 전달되나..?

-> 기존 배열의 원소들을 하나씩 접근하며 조건에 맞는 원소는 true, 조건에 맞지 않는 원소는 false로 판단하여 true값인 원소만 반환해 준다.

map과 filter의 공통점은 기존 배열은 건드리지 않고 요소들을 순회한 후 새로운 배열을 리턴하는 메서드이고, 차이점은 map은 콜백 함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다.

.includes()

• 배열 속 해당 요소가 있으면 true, 없으면 false를 반환하는 메서드.

배열.includes(찾고 싶은 요소값);

var a = [1, 2, 3, 4, 5, 1, 2, 3];

var b = a.includes(3); // 배열 a에 3이 있는지 T/F
console.log(b);        // true

var c = a.includes(6); // 배열 a에 6이 있는지 T/F
console.log(c);        // false

var a = ['안녕', '하세요', '반가', '워요'];

var b = a.includes('하세요'); // 배열 a에 '하세요'가 있는지 T/F
console.log(b);             // true

var c = a.includes('습니다'); // 배열 a에 '습니다'가 있는지 T/F
console.log(c);             // false

.indexOf()

• 찾은 값의 첫 번째 원소의 위치(=인덱스)를 반환하는 메서드.
• 중복된 값이 뒤에 있어도, 무조건 첫 번째 원소의 인덱스를 반환한다.
• 찾고 싶은 값이 그 배열에 없다면 -1을 반환

배열.indexOf(찾고 싶은 요소값)

var a = [1,2,3,4,5,1,2,3];

var b = a.indexOf(3);   // 요소 3의 첫 번째 위치(=인덱스)는 어디에 있는가?
console.log(b);         // 2

var c = a.indexOf(6);   // 요소 6의 위치는 어디에 있는가?
console.log(c);         // -1 (=없다)

var a = ['안녕', '하세요', '반가', '워요'];

var b = a.indexOf('워요');   // '워요'는 몇 번째 위치(=인덱스)에 있는가?
console.log(b);             // 3

var c = a.indexOf('습니다');  // '습니다'는 몇 번째 위치(=인덱스)에 있는가?
console.log(c);             // -1 (=없다)