해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 9강을 보고 작성한 글입니다.

9강은 배열 APIs 에 대해서 배운다.

Array APIs 총정리

Q1. 주어진 배열 요소들을 string 으로 만드시오.

배열 세 칸에 담겨있는 배열 요소 3개를 문자열 하나로 묶어내라는 문제이다.

1. join

join 은 배열에 있는 모든 요소들을 더해서 string 으로 리턴한다.

모든 요소들을 괄호안에 인자로 들어가는 구분자를 넣어줘서 각각을 합쳐 string 으로 만든다.

(sperator?) → ? 가 있으니 인자로 전달해도 되고, 안해도 된다.

배열 안에 있는 join 이라는 API 는 sperator 라는 문자(구분자) 를 받기도 하고, 안받기도 하는 데 결국에는 배열에 있는 모든 item 들을 string 으로 만들어준다.

• 구분자가 없을 때
  구분자를 넣지 않아도 자동적으로 콤마(,) 가 들어가면서 string 으로 변환된다.

• 구분자가 있을 때

  구분자를 넣으면 배열 item 사이에 구분자가 함께 넣어진 후 합쳐져 하나의 string 으로 반환된다.

  

Q2. 주어진 string 으로 배열을 만드시오.

주어진 string 은 콤마로 구분되어 있는데, 이 string 을 배열로 변환하라는 문제이다.

2. split

split 은 인자로 구분자와 limit 을 전달받는다.

split 은 string 을 전달된 sperator 를 받아와서 여러가지 문자열(substrings) 로 잘게 나눠준다.

sperator 는 타입이 string 이거나 정규표현식 이다.

limit? → 우리가 리턴받을 배열의 사이즈를 지정하는 것이 가능하다.

우리는 문자열을 콤마 단위로 나눌 것이라 split(”,”) 로 설정한다.

옵션인 두번째 파라미터에 limit=2 를 정하면 크기가 2인 배열이 출력된다.

split의 첫번째 파라미터에 구분자를 정하지 않으면 결과가 배열 크기가 1인 요소로 출력된다.

그래서 split 에는 꼭 첫번째 파라미터에 구분자를 지정해줘야 한다.

Q3. 이 배열을 [5,4,3,2,1] 처럼 만드시오.

주어진 배열의 순서를 거꾸로 만드는 문제이다.

3. reverse

reverse 는 배열 안에 들어있는 item 의 순서를 거꾸로 만들어준다.

reverse 는 원본 배열인 array 자체의 item 순서도 거꾸로 만들어준다.

reverse 는 배열 자체를 변화시키고 리턴값도 변화된 배열 자체를 반환한다.

Q4. 배열에서 첫번째, 두번째 요소를 제외한 새 배열을 만드시오.

4. slice

splice 를 이용해 파라미터 조정 후 배열을 만들면 어떻게 되는지 확인해보자.

splice 의 구조는 상단 이미지에서 확인해볼 수 있다.

splice 는 어디서부터 몇개나 지울건지 설정하면 배열의 내용을 변경하며, 제거된 요소가 담긴 별도의 배열을 새로 반환한다.

splice 는 배열 자체에서 지정 부분을 삭제한다. → splice 는 원본 배열을 수정해 item 을 삭제한다.

splice 를 통해 삭제된 1,2 가 result 배열에 담겼고, 원본 배열은 1,2 가 삭제되어 3,4,5 만 남아있다.

⇒ 문제에서 새로운 배열을 만들라고 했으니, 원본 배열을 수정하는 splice 는 사용할 수 없다.

slice 를 사용하면 된다.

slice 는 배열의 특정한 부분을 리턴하는 API 이다.

slice 는 배열의 특정한 부분(범위)를 복사해 새로운 배열을 생성한다.

특정한 부분은 파라미터에 있는 start, end 로 지정할 수 있다.

start 는 배열의 시작하는 인덱스, end 는 끝 인덱스인데 이 때 주의할 점은 ( start 부터 end-1 ) 까지 범위가 설정된다는 것이다.

slice 를 통해 idx=2인 3 부터, idx=5 를 설정해 idx=4인 5 까지 범위를 설정한 후 복사해 새로운 배열을 만든다.

3,4,5 가 item 인 새 배열 result 를 생성하고, 원본 배열은 그대로인 것을 확인할 수 있다.

slice 는 배열에서 원하는 부분만 받아서 반환하고 싶을 때 사용하면 된다.