RxJS 배우기
  • 소개
  • RxJS 배우기
    • 연산자
      • Combination
        • combineAll
        • combineLatest
        • concat
        • concatAll
        • endWith
        • forkJoin
        • merge
        • mergeAll
        • pairwise
        • race
        • startWith
        • withLatestFrom
        • zip
      • Conditional
        • defaultIfEmpty
        • every
        • iif
        • sequenceEqual
      • Creation
        • ajax
        • create
        • defer
        • empty
        • from
        • fromEvent
        • generate
        • interval
        • of
        • range
        • throw
        • timer
      • Error Handling
        • catch / catchError
        • retry
        • retryWhen
      • Multicasting
        • publish
        • multicast
        • share
        • shareReplay
      • Filtering
        • audit
        • auditTime
        • debounce
        • debounceTime
        • distinct
        • distinctUntilChanged
        • distinctUntilKeyChanged
        • filter
        • find
        • first
        • ignoreElements
        • last
        • sample
        • single
        • skip
        • skipUntil
        • skipWhile
        • take
        • takeLast
        • takeUntil
        • takeWhile
        • throttle
        • throttleTime
      • Transformation
        • buffer
        • bufferCount
        • bufferTime
        • bufferToggle
        • bufferWhen
        • concatMap
        • concatMapTo
        • exhaustMap
        • expand
        • groupBy
        • map
        • mapTo
        • mergeMap / flatMap
        • mergeScan
        • partition
        • pluck
        • reduce
        • scan
        • switchMap
        • switchMapTo
        • toArray
        • window
        • windowCount
        • windowTime
        • windowToggle
        • windowWhen
      • Utility
        • tap / do
        • delay
        • delayWhen
        • dematerialize
        • finalize / finally
        • let
        • repeat
        • timeInterval
        • timeout
        • timeoutWith
        • toPromise
      • 전체 목록
    • Subjects
      • AsyncSubject
      • BehaviorSubject
      • ReplaySubject
      • Subject
    • 사용예시
      • Alphabet Invasion Game
      • Battleship Game
      • Breakout Game
      • Car Racing Game
      • Catch The Dot Game
      • Click Ninja Game
      • Flappy Bird Game
      • Game Loop
      • Horizontal Scroll Indicator
      • Http Polling
      • Lockscreen
      • Matrix Digital Rain
      • Memory Game
      • Mine Sweeper Game
      • Platform Jumper Game
      • Progress Bar
      • Save Indicator
      • Smart Counter
      • Space Invaders Game
      • Stop Watch
      • Swipe To Refresh
      • Tank Battle Game
      • Tetris Game
      • Type Ahead
      • Uncover Image Game
    • 개념
      • RxJS 입문서
      • RxJS v5 -> v6 업그레이드
      • 시간 기반의 연산자 비교
      • 연산자 imports의 이해
Powered by GitBook
On this page
  • 각각의 값에 넘겨받은 콜백을 적용합니다.
  • 예시
  • 관련된 사용법
  • 추가 자료

Was this helpful?

  1. RxJS 배우기
  2. 연산자
  3. Transformation

map

PreviousgroupByNextmapTo

Last updated 5 years ago

Was this helpful?

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

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

예시

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

( | | )

// 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사용하기

( | | )

// 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));

관련된 사용법

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

추가 자료

  • :video_camera: - Ben Lesh

:newspaper: - 공식 문서

:video_camera: :dollar: - André Staltz

:video_camera: - Kwinten Pisman

:file_folder: Source Code:

StackBlitz
jsBin
jsFiddle
StackBlitz
jsBin
jsFiddle
Alphabet Invasion Game
Battleship Game
Catch The Dot Game
Game Loop
HTTP Polling
Lockscreen
Memory Game
Mine Sweeper Game
Smart Counter
Space Invaders Game
Stop Watch
Swipe To Refresh
Tetris Game
Type Ahead
map
map vs flatMap
Transformation operator: map and mapTo
Build your own map operator
https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/map.ts