Javascript Array method(배열 메소드) map 복습

Javascript Array method(배열 메소드) map 복습

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **

 

Photo by  Luca Bravo  on  Unsplash

 

요새는 평일에 맥북을 켜고 앉을 시간이 없다.

매월 수걍료를 지불하며 시간과 비용을 허투루 쓸 수 없기에

주말에는 꼭 오피스 아워에 출석해서 한 주 간의 고민에 대한

힌트를 받아오려고 열심인데, 그것도 내 마음대로는 되지 않는다.

몇 시간씩 한 자리에 앉아 집중할 시간이 부족한 나는,

오늘도 이렇게 복습을 핑계로 공부는 뒤로하고 블로그에 포스팅을 하고 있...

 

---

 

기본이 중요하다는 것은 잘 알고 있지만, 어떻게 머리에 담아두어야 할까? 라는

생각을 해 보면 아직도 좀 막막하다. 아마, 체계적인 나만의 학습방법이 없어서 일 것이다.

 

이렇게 블로깅을 통해서라도 모르면 내 포스팅을 사전삼아 볼 수 있게

최대한 친절하고(?) 꼼꼼한(?) 내용을 담아 볼 것이다.

 

오늘은 배열 메소드 "map" 을 복습하였다.

배열 메소드는 참 중요하다. javascript를 공부하는 동안에는 여러가지 메소드를

두고두고 잘 사용할 수 있도록 자주 생각하고 간단한 내용을 코드로 만들어보는 습관을 가져야겠다.

 

 

map 메소드는,

 

"기존의 배열을 바꾸지 않으면서(immutable),

          사용자가 지정하는 조건에 맞추어 새로운 배열을 출력하는 기능" 을 수행한다.

 

한국말도 참 어렵다. 한 가지 예를 들어 살펴보자.

 

숫자를 요소로 갖는 배열이 있고, 이 요소들을 3으로 나눈 나머지 값을 포함하는

새로운 배열을 map 메소드를 통해 만들것이다.

 

 

우선 map 메소드가 동작할 때, 반복적으로 실행하게 될 함수를 하나 작성하겠다.

 

 

let original = [2, 3, 9, 24, 38]; // 활용대상이 될 배열을 먼저 선언한다.

function restValue(element){  // 함수 이름은 적당히 '남는 값'을 콩글리시로. 
    return element%3;         // 나머지를 구하는 코드를 %를 사용하여 입력하였다.
}

 

 

다음은, map 메소드가 등장할 차례.

 

 

let original = [2, 3, 9, 24, 38]; // 활용대상이 될 배열을 먼저 선언한다.

function restValue(element){  // 함수 이름은 적당히 '남는 값'을 콩글리시로. 
    return element%3;         // 나머지를 구하는 코드를 %를 사용하여 입력하였다.
}

function divided (arr){        // map 메소드를 활용할 함수를 작성하고,
    return arr.map(restValue); 
    // 리턴할 때, map 메소드를 활용하며, 
    // 참고할 인자로는 앞서 선언한 3으로 나눈 나머지를 구하는 함수를 대입.
}

 

 

이제, divided 함수에 미리 선언한 original 배열을 대입한 후에

map 메소드를 통해 출력되는 새로운 배열을 확인 해 보자.

 

 

let original = [2, 3, 9, 24, 38]; // 활용대상이 될 배열을 먼저 선언한다.

function restValue(element){  // 함수 이름은 적당히 '남는 값'을 콩글리시로. 
    return element%3;         // 나머지를 구하는 코드를 %를 사용하여 입력하였다.
}

function divided (arr){        // map 메소드를 활용할 함수를 작성하고,
    return arr.map(restValue); 
    // 리턴할 때, map 메소드를 활용하며, 
    // 참고할 인자로는 앞서 선언한 3으로 나눈 나머지를 구하는 함수를 대입.
}

console.log(divided(original));
[2, 0, 0, 0, 2]

 

실제, 구글크롬 콘솔창에서 실행해 본 결과.

 

 

기본 활용은 복습도 참 쉽다.

하지만, 국민학교(초등학교) 때부터 4지선다형, 5지선다형 문제에만 익숙해진

게다가 나처럼 공부가 싫었고 응용력 낮은 사람에게 주어진 문제해결을 위한

기본기의 활용은 아직도 머나먼 고지로밖에 보이지 않는다.

 

그래도, 한 발 한 발 올라가다보면 비슷한 흉내정도는 낼 수 있지 않을까 하는 희망으로

오늘도 복습포스팅!

 

복습 막 끝났을땐, 뿌듯하겠지만..

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **