Javascript: Array[3] - Array 함수 사용 연습
[ Array를 String으로 변환 ]
Array를 String으로 변환하는 함수는 2가지가 있다.
- toString()
- join(separator?: string)
둘 다 Return 값으로 String을 반환한다.
여기서 큰 차이점이라면,
toString()은 무조건 ' , ' (콤마)로 배열의 값을 구분해준다는 것이고,
join()은 내가 적어주는 구분자로 배열의 값을 구분해준다는 것이다.
만약 join()에 아무것도 입력하지 않는다면 자동으로 ' , '(콤마)로 구분해준다. 이때 결괏값은 toString()과 같다.
[ 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) 영상을 보고 정리한 내용입니다.
혹시 문제가 된다면 댓글 남겨주세요. 감사합니다.