FrontEnd_JavaScript

[JavaScript] 배열 내장함수(Array Methods)

wookjae 2021. 9. 29. 01:15

배열(Array) ? 

  • 배열은 하나의 변수에 하나의 값이아닌 여러개의 값을 저장하며 각 요소들은 순서를 가진다.
  • 자바스크립트 배열의 요소는 여러가지 타입선언(String, Number, Boolean, Object, Array..) 가능.
  • 자바스크립트 배열의 크기는 동적으로 변경될 수 있다. (가변적)
  • 자바스크립트 배열은 대괄호'[]' 또는 Array() 생성자함수를 사용하여 생성한다.

 

배열 내장함수(Array Mehods) ? 

1. forEach: 배열의 요소들을 순차적으로 불러와 이를 활용할 때 사용.

2. map: 기존의 배열 요소를, 특정한 로직에 의해 새로운 배열로 변환할 때 사용. 

3. reduce: 배열의 요소를 이용하여 특정 연산을 수행 할 때 사용. (평균 값, 합산, 특정조건 요소개수)

4. filter: 기존배열에서 특정 조건에 맞는 요소들을 추출하여 새로운 배열생성.

5. indexOf, findIndex, find

- indexOf, findIndex: 배열요소의 위치(Index) 확인.

- find: 조건에 맞는 배열요소를 자체를 반환.

6. splice, slice: 배열요소 일부를 잘라내며 splice는 기존배열 영향O, slice는 기존배열 영향X

7. shift, pop, unshift, concat, join 

- shift: 앞에서부터 요소추출(기존배열 영향O)

- pop: 뒤에서부터 요소추출(기존배열 영향O)

- unshift: 기존배열에 맨 앞에 원소를 추가 (기존배열 영향O)

- concat: 서로다른 두 배열을 하나의 배열로 결합 

- join: 배열요소를 문자열로 변환

 


(Array Methods) Exercise..

 

 

1. 배열내장함수(forEach) 사용 및 결과확인 

* 자바스크립트 내장함수::  forEach( CallBackFn( Parameters... ) )

* CallBackFn( Parameters... )

  - 첫번째 파라미터: 배열 각 요소 

  - 두번째 파라미터: 인덱스 번호 

  - 세번째 파라미터: 배열자체(전체배열)

 

 

 

2. 배열내장함수(map) 사용 및 결과확인 

 

 

3. 배열내장함수(reduce) 사용 및 결과확인 

* 자바스크립트 내장함수::  reduce( CallBackFn( Parameters... ) )

* reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 

  하나의 (계산된)결과값을 반환합니다. 기존 배열에 영향을 미치지X

 

/** 

    첫번째 파라미터 :: CallBackFn 

    --> CallBackFn 파라미터 (누적 값, 배열요소[순차적], 인덱스, 배열[전체]) 

    두번째 파라미터 :: 초기 값  

*/

 

 

 

4. 배열내장함수(filter) 사용 및 결과확인 

* 자바스크립트 내장함수::  filter( CallBackFn( Parameters... ) )

// 기존 배열에 영향을 미치지X

 

 

5. 배열내장함수(IndexOf, findIndex, find) 사용 및 결과확인

 

 

6. 배열내장함수(splice, slice) 사용 및 결과확인

// splice : 기존배열에 영향을 미침 

// slice  : 기존 배열에 영향을 미치지 않음

 

 

7. 배열내장함수(shift, pop, unshift, concat, join) 사용 및 결과확인

 

 

 

exit..