무지개 곰
무지개곰의 성장이야기
무지개 곰
250x250
  • 분류 전체보기
    • 블록체인 공부
      • BlockChain
      • Ethereum
    • IT공부
      • Java
      • JavaScript
      • HTML + CSS
      • React
      • 프로그래머스 (TypeScript)
    • 독서
    • 영어 공부
      • 1일 1 작문
      • 영어 짧은 글
    • 홍보
hELLO · Designed By 정상우.
무지개 곰

무지개곰의 성장이야기

[JS] 배열의 메서드 map 이해하기
IT공부/JavaScript

[JS] 배열의 메서드 map 이해하기

2022. 10. 7. 13:00
728x90

map 이해하기

  • map이란?
  • 순서도(플로우 차트)
  • 예시

map이란?

map은 '지도'라는 영어 표현으로 익숙하지만 '발견하다.'라는 표현도 있습니다. 여기에서는 '지도'보다는 '발견하다.'라는 뜻에 가깝습니다. 특정한 값을 입력하여 배열에 지정한 값과 같은 값을 가지고 있으면 true로 아니라면 false로 변환된 모습의 배열을 결과로 반환해줍니다. 입력한 값을 배열에서 발견하는 작업이라고 볼 수 있습니다.

배열 명.map((매개변수)=>{
    실행하 내용;
    retrurn 출력할 내용;
});

1. 배열의 첫 번째 요소를 매개변수로 입력해줍니다.

2. 실행할 내용을 실행합니다.

3. 출력할 내용을 저장합니다.

4. 배열의 다음 요소를 매개변수로 입력합니다.

5. 배열의 다음 요소가 없을 때까지 2~4를 반복합니다.

6. 배열의 다음 요소가 없다면 저장한 요소들을 배열로 반환합니다.


순서도(플로우 차트)

map 순서도 (플로우 차트)


예시

let arr = [“a”, “b”, “c”, “d”];
let result = arr.map((item)=>{
	console.log(item);
	return item==“b”;
});
console.log(result);

1. arr의 배열 요소로 "a", "b", "c", "d"를 선언한다.

2. result의 값으로 arr.filter메서드의 결괏값을 선언한다.

3. map메서드를 실행한다.

4. arr배열의 첫 번째 요소인 "a"를 매개변수로 입력한다.

5. console.log를 실행한다.

6. return의 조건인 item [0] =="b" 인지 확인한다

7. 조건이 참이라면 result에 ture를 저장해둔다.

8. 배열의 모든 요소를 4~7까지 반복한다.

9. console.log를 이용하여 result를 출력한다.

 

결과 :

a

b

c

d

[false, true, false, false]

 

배열에 조건을 만족하는 값이 있는지 확인할 때 도움을 주는 메서드입니다. map을 이용하여  조건을 만족하는 값이 있다면 true가 나오기 때문에 true, false를 이용하여 작업을 하면 조건에 맞는 값인 경우 true로 다른 작업을 실행하게 해 줄 수 있습니다.

 

배열의 매서드 filter 이해하러 가기

배열의 메서드 findIndex 이해하러 가기

배열의 메서드 find 이해하러 가기

728x90
저작자표시 비영리 변경금지 (새창열림)
    'IT공부/JavaScript' 카테고리의 다른 글
    • [JS] 배열의 메서드 filter 이해하기
    • [JS] 배열의 메서드 findIndex 이해하기
    • [JS] 배열의 메서드 find 이해하기
    • [JS] 배열의 매서드 forEach 이해하기
    무지개 곰
    무지개 곰
    java solidity react javascript등 프로그래밍 공부 기록

    티스토리툴바