Javascript: Array[3] - Array 함수 사용 연습

 

 

[ Array를 String으로 변환 ]

Array를 String으로 변환하는 함수는 2가지가 있다. 

- toString()

- join(separator?: string)

 

둘 다 Return 값으로 String을 반환한다. 

 

여기서 큰 차이점이라면,

toString()은 무조건 ' , ' (콤마)로 배열의 값을 구분해준다는 것이고, 

join()은 내가 적어주는 구분자로 배열의 값을 구분해준다는 것이다.

만약 join()에 아무것도 입력하지 않는다면 자동으로 ' , '(콤마)로 구분해준다. 이때 결괏값은 toString()과 같다. 

{"originWidth":495,"originHeight":166,"style":"alignLeft","caption":"join 안에

이런식으로 이상한 구분자를 써도 적용이 된다.

 

 

---

 

[ String을 Array로 변환 ]

Array를 String으로 변환하는 함수는 2가지가 있다.

- from()

- split(separator: string | RegExp, limit?: number)

 

둘 다 Return 값으로 Object를 반환한다. 

 

Array.from()은 헷갈려서 MDN을 찾아봤다. 

다양한 매개변수가 들어가는데, 우선은 필요한 것만 확인해보자. 

위와 같이 Array.from()에 String 값을 넣어 배열로 반환할 수 있다.

여기서 문제는, 아래와 같이 문자열에 공백이나 구분자가 들어가 있는 경우, 이를 모두!! 배열 인덱스 안에 하나하나 담아준다는 것이다. 

이를 주의해서 사용해야한다. 

아이콘 뿐만 아니라, ' , ' (콤마)와 ' '(공백)도 출력된 것을 확인할 수 있다. 

 

 

split()은 내가 문자에서 구분하고자 하는 구분자를 지정해줄 수 있다. 

' , ' (콤마)로 구분되는 문자를 순차적으로 배열에 저장

또한 아래와 같이 정규표현식을 넣어서도 원하는 문자를 구분해 배열에 넣어줄 수 있다. 

' , ' (콤마) 와 ' ' (공백) 으로 구분되는 문자를 순차적으로 배열에 저장

*중요!* 만약 구분자를 전달하지 않으면, 문자열이 그냥 통째로 배열의 0번 인덱스에 저장된다! 

그러니 split() 함수는 무조건 구분자를 전달해야한다! 

 

 

---

 

[ Array의 순서를 반전 ]

배열의 순서를 거꾸로 만들 때, 

- reverse() 

를 이용하면 쉽다!

 

여기서 조심해야 할 점은, array.reverse()를 해주면 동시에 array 자체의 내용이 변경된다는 것이다. 

그래서 reverse() 함수로 배열을 변환하려면 꼭 원본을 따로 복사한 뒤 사용해주는 것이 좋다...! 

 

 

---

 

[ 원하는 만큼 배열을 잘라서 새로운 배열을 만들어주기 ]

배열을 자르는 함수는 

- slice(start?: number, end?: number)

- splice(start: number, deleteCount?: number)

두 가지가 있다. 여기서 중요한 건, Array 자체를 변형해주느냐/아니냐 이다.

 

 

splice()의 경우 배열을 자르고 남은 값을 출력할 수 있지만, '자르고자 하는 배열의 내용을 완전 삭제하고 변경'해버린다는 문제가 있다. 

return값 역시 자신이 삭제한 배열의 인덱스 정보를 가지고 있다. 

 

 

반면에 slice()는 자르고자 하는 배열을 변경하지 않고 새로운 배열을 생성해준다. 

여기서 주의해야 할 점은, splice(start: number, deleteCount?: number) 에서

deleteCount에 적힌 마지막 인덱스가 결과에서 배제된다는 것이다. 

 

그래서 array의 2번, 3번, 4번 인덱스를 결과로 받아오고 싶다면,

array.slice(2, 4) 가 아닌 array.slice(2, 5)를 해줘야 한다. 

 

 

splice()는 배열 자체를 수정하고 싶을 때, 
slice()는 배열에서 원하는 부분만 Return 해서 받아오고 싶을 때 사용하면 된다. 

 

 

 

 

[ 참고 ]

이 글은 유튜버 드림코딩 by 엘리 님의 https://www.youtube.com/watch?v=3CUjtKJ7PJg
자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6) 영상을 보고 정리한 내용입니다. 
혹시 문제가 된다면 댓글 남겨주세요. 감사합니다.