배열과 메서드

배열과 메서드

배열은 다양한 메서드 제공

• 요소 추가/제거

  • 기존의 배열을 수정

    • 맨 앞 요소 수정

      arr.unshift() : 맨 앞 요소 추가

      arr.shift() : 맨 앞 요소 제거

    • 맨 뒤 요소 수정

      arr.push() : 맨 뒤 요소 추가

      arr.pop() : 맨 뒤 요소 제거

    • splice

      • 배열 역시 객체형에 속하므로 delete 연산자 사용 가능 하지만 빈 공간을 나머지 요소가 자동으로 채우지 않아(index 안 건드림) 배열 길이 변화 없음

      배열에서 요소 추가, 삭제, 교체

      첫 번째 매개변수는 조작 가할 첫번째 요소의 인덱스, 두번째는 deleteCount, 그 다음부터는 배열에 추가할 요소

      deleteCount 0 으로 설정해서 요소 제거하지 않고 새로운 요소 추가 가능

      서브 문자열 반환

      • 음수 인덱스도 사용 가능.

        끝에서부터 카운트

  • 기존의 배열에서 새로운 배열 반환

    • slice

      첫번째 인수 인덱스부터 두번째 인수(두번째 인덱스는 제외)까지의 요소 복사한 배열 반환

      인수 두개 다 음수 가능

      인수 하나도 넘기지 않고 복사본 만들기 가능

      서브 배열 반환

    • concat

      기존 배열 요소 사용해 새로운 배열 만들거나 기존 배열에 요소 추가할 때 사용

      인수엔 배열이나 값 올 수 있고 개수 제한 없음

      인수가 배열일 경우 배열 모든 요소 복사 그렇지 않을 경우 신수 그대로 복사

      객체가 인자로 넘어오면 분해되지 않고 통으로 복사되어 더 해짐

      객체에 Symbol.isConcatSpreadable 이 있으면 concat은 객체를 배열처럼 취급하고 객체 전체가 아닌 프로퍼티 값으로 더해짐

• forEach 로 반복 작업

  주어진 함수를 배열 요소 각각에 실행할 수 있게 해줌

  인수로 넘겨준 함수의 반환값은 무시.

• 배열 탐색하기

  • indexOf, lastIndexOf, includes

    문자열 메서드와 문법 동일

    연산 대상이 문자열이 아닌 배열 요소라는 점 제외하면 하는 일 같음

    요소 찾을 때 완전 항등 연산자 === 사용함

    includes 는 NaN 도 제대로 처리함에 있어서 다른 두 함수와 차이 있음

  • find와 findIndex

    특정 조건에 부합하는 객체찾을때 사용

    • find(fn)

      요소 전체를 대상으로 함수가 순차적으로 호출

      함수가 참을 반환할 시 탐색 중단하고 해당 요소 반환

      원하는 요소 찾지 못했을 시 undefined 반환

      실무에서는 함수 인자 첫번째만 자주 사용

      • 함수 인자

        1. item : 함수 호출할 요소

        2. index : 요소의 인덱스

        3. array : 배열 자기 자신

    • findIndex

  • filter

    함수의 반환값을 true로 만드는 여러 개 요소 찾음

    배열로 반환

• 배열 변형하기

  • map

    배열 요소 전체를 대상으로 함수 호출

    결과 배열로 반환

  • sort(fn)

    배열 요소 정렬해서 배열 자체 변경

    요소는 문자열로 취급되어 재 정렬

    문자열 비교는 사전 편집 순으로 진행

    새로운 정렬 기준 만들고 싶을 시 인수에 함수 작성

    정렬 알고리즘은 퀵 소트 사용

    • 정렬 함수는 어떤 숫자든 반환 가능

      정렬 함수 반환값엔 제약 없음

      양수 반환 시 첫 번째 인수가 두 번째 인수보다 ‘크다’ 나타내고 음수 반환 시 첫 번째 인수가 두 번째 인수보다 ‘작다’ 나타내면 됨.

    • 화살표 함수 사용

      정렬 함수 깔끔하게 만들기 가능

    • 문자열엔 localeCompare 사용

      여러 분자가 있는 언어에 대응하려면 localeCompare tkdydgo qlry gksmsrp whgdma

  • reverse

    요소 역순으로 정렬시켜줌

    반환 값은 재정렬된 배열

  • split 과 join

    • split

      인수의 구분자 기준으로 문자열 쪼개 줌

      두 번째 인수로 숫자 받아서 길이 제한해줌

      인수에 빈 문자열 지정 시 글자 단위로 분리 가능

    • join

      split 과 반대

      배열 요소 모두 합친 후 하나의 문자열로 만들어 줌

      두 번째 인수는 요소 사이값 (option)

  • reduce 와 reduceRight

    배열을 기반으로 하나 값 도출할 때 사용

    • reduce

      인수로 넘겨주는 함수는 배열 모든 요소를 대상으로 차례로 적용

      적용 결과는 다음 함수 호출 시 사용

      빈 배열일 시 에러 발생

      • 함수 인수

        1. accumulator : 이전 함수 호출 결과. 결과가 누적되어 저장됨. 마지막 함수까지 호출되면 이 값은 반환값 됨

        2. item : 현재 배열 요소

        3. index : 요소 위치

        4. array : 배열

        5. initial : 함수 최초 호출 시 사용되는 초깃값. 생략 시 첫 번째 요소 초깃값으로 지정

    • reduceRight

      reduce 와 동일한 기능 하지만 배열의 오른쪽부터 연산 수행

• ‘Array.isArray’ 로 배열 여부 알아내기

  typeof 로 일반 객체와 배열 구분할 수 없음

  배열 구분 할 시 사용

  인자가 배열일 시 true, 아닐 시 false

• 배열 메서드와 ‘thisArg’

  sort 재외하고 대부분 배열 메서드에 thisArg 라는 매개변수 옵션으로 받을 수 있음

  인자내 함수의 this 가 됨

  thisArg 는 함수의 컨텍스트 정보 넘겨줌

  사용하지 않을 시 인자내 함수는 단독 함수처럼 취급되고 에러 발생할 수 있음

  요약

  • 배열은 다양한 메서드 가짐

  • 요소 추가 제거는 기존의 배열 수정 시 unshift,shift,push,pop,splice 사용

  • 기존 배열 수정 후 새로운 배열 반환 시 slice, concat 사용

  • 배열 탐색은 문자열 메서드에 있는 indexOf, lastIndex, includes 사용 가능하며 find, findIndex,filter 도 가능

  • 배열 변형은 map, sort, reverse, split, join, reduce, reduceRigth

  • ‘Array.isArray’ 로 배열 여부 알기 가능

  • ‘thisArg’ 로 배열 메서드 인자 내 함수 this 부여 가능