map

signature: map(project: Function, thisArg: any): Observable

각각의 값에 넘겨받은 콜백을 적용합니다.

예시

예시 1: 각각의 숫자에 10을 더합니다

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

//(1,2,3,4,5) 발생시킵니다
const source = from([1, 2, 3, 4, 5]);
//각각의 값에 10을 더합니다
const example = source.pipe(map(val => val + 10));
//결과: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

예시 2: 단일 프로퍼티에 map사용하기

( StackBlitz | jsBin | jsFiddle )

// RxJS v6+
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

// ({name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}) 를 발생시킵니다
const source = from([
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 20 },
  { name: 'Ryan', age: 50 }
]);
//name값만 가지고옵니다. 이번 예시에서는 pluck을 사용해도 같은 결과를 만들어낼 수 있습니다.
const example = source.pipe(map(({ name }) => name));
//결과: "Joe","Frank","Ryan"
const subscribe = example.subscribe(val => console.log(val));

관련된 사용법

• Alphabet Invasion Game

• Battleship Game

• Catch The Dot Game

• Game Loop

• HTTP Polling

• Lockscreen

• Memory Game

• Mine Sweeper Game

• [Save Indicator]('../../recipes/save-indicator.md)

• Smart Counter

• Space Invaders Game

• Stop Watch

• Swipe To Refresh

• Tetris Game

• Type Ahead

추가 자료

• map :newspaper: - 공식 문서

• map vs flatMap

  :video_camera: - Ben Lesh

• Transformation operator: map and mapTo :video_camera: :dollar: - André Staltz

• Build your own map operator :video_camera: - Kwinten Pisman

:file_folder: Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts