03. map / 진법 변환

📌 3-1 map이란?

✔ 배열.map(콜백함수(배열의 값, 배열의 인덱스, 배열), thisArg)
✔ 배열의 콜백함수 return의 결과에 대해 그 인자들을 모아서 반환한다.
✔ thisArg와 콜백함수를 인자로 하는방법은 02. filter 부분을 참고하시면 됩니다.
✔ 콜백함수의 return의 결과값을 모아서 새로운 배열을 반환하기 때문에 원본 배열은 변경되지 않는다.
✔ map함수의 특징은 원본배열과 map함수 반환배열의 길이 즉 배열의 길이는 같다.

📌 3-2 map 작동예제

map메서드는 배열의 모든 값들을 순회한다.

const arr = [1,2,3,4,5];
const map = arr.map((value, index, array) => {
    console.log(value, index, array);
})
console.log(map);
// 1번실행 1 0 [ 1, 2, 3, 4, 5 ]
// 2번살행 2 1 [ 1, 2, 3, 4, 5 ]
// 3번실행 3 2 [ 1, 2, 3, 4, 5 ]
// 4번실행 4 3 [ 1, 2, 3, 4, 5 ]
// 5번실행 5 4 [ 1, 2, 3, 4, 5 ]

💡 모든 값들을 순회하면서 명령문을 실행한다. filter와 작동방식은 똑같다.

📌 3-3 map 사용예제

map메서드는 배열의 모든 값들을 순회하면서 return의 결과값을 모아서 반환한다.

const arr = [1,2,3,4,5];
const map = arr.map((value) => {
    return value * 2; // value에 곱하기 2를 한 값을 모아서 새로운 배열로 반환한다.
})
console.log(map); // [2,4,6,8,10] 출력

만약 map함수안에 조건문을 걸어서 return 값을 지정하면 어떻게 되는지 알아보자.

const arr = [1,2,3,4,5];
const map = arr.map((value) => {
    if(value > 2) return value;
});
console.log(map); // [undefined,undefined,3,4,5] 출력
console.log(map.length); // 5 출력
console.log(arr.length); // 5 출력

💡 return 값을 명시하지 않으면 undefined로 반환된다.
💡 배열의 길이는 수정되지 않는다.
💡 사실 값을 위해서가 아니면 보통 forEach(), for in문 for of문 for문을 주로 사용한다.

📌 3-4 map 알고리즘 사용예제

배열의 값을 +를 사용하여 암묵적 숫자타입으로 반환한다.

const arr = ['1','2','3','4'];
const map = arr.map((value) => +value); // 암묵적 타입변환
console.log(map);

💡 자바스크립트의 특징을 이용한 타입변환이다.
💡 암묵적으로 사용하려면 문자형태인 숫자형에 (+)
💡 명시적으로 사용하려면 Number(), parseInt()를 사용한다.

✔✔ 진법변환

parseInt()와 명시적 타입변환을 보고 생각이 나서 조금 적어 보겠다. 누군가에게는 도움이 되었으면 좋겠다.

const decimal = 10;
// toString()안에 자신이 변경하고 싶은 진법으로 넣어주면 된다.
const binary = decimal.toString(2);
console.log(binary); // 1010 출력 (toString()을 사용하였으니 당연히 문자열로 나온다.)

Srting.prototype.toString(변경시켜줄 진법)으로 사용하면 됩니다.

const decimal = 10;
const binary = decimal.toString(2);
const decRollBack = parseInt(binary, 2); // parseInt(문자열, 해당 문자열 진법)
console.log(decRollBack); // 10 출력

parseInt(문자열, 해당 문자열 진법)으로 사용하면 됩니다.

출저
MDN = Array.prototype.filter()