JavaScript 배열(4)

JavaScript 배열을 사용할 때 많이 쓰는 메서드

" shift(), unshift(), splice(), slice(), concat() "

(https://duyaan.tistory.com/47)

 

 

" sort(), reverse(), indexOf(), lastIndexOf(), includes(), find() "

(https://duyaan.tistory.com/48)

에 대해서 저번 페이지에서 알아봤다.

 

JavaScript 배열(3)으로 배열 관련 메서드 정리를 끝내려고 했으나,

알고리즘 스터디를 진행하면서 몰랐거나, 자주 나와서 꼭 알아둬야 하는 것들을 계속해서 작성하려고 한다.

 

이번에는

" filter(), join(), split(), map() "

에 대해서 알아볼 예정이다.

 

자바스크립트의 배열에 대해서 알고 싶으면 다음 링크로 가면 된다.

https://duyaan.tistory.com/46

JavaScript 배열

 

 

배열 검색 및 필터링

저번에 배열 검색 및 필터링에 관련된 메서드

indexOf(), lastIndexOf(), includes(), find()에 대해서 다루었다.

filter() 역시 배열 검색 및 필터링과 관련되어 있다.

filter()

배열에서 특정 조건을 만족하는 첫 번째 요소의 값 추출하는 메서드이다.

let arr = [1, 2, 3];
let result = arr.filter(filterNum);
console.log(result); // [2, 3]

function filterNum(element){
  return element > 1;
}

 

filter()에 인자로 들어가 있는 콜백 함수를 통해 원하는 요소를 추출할 수 있다.

 

find()와 마찬가지로 콜백 함수의 인자에는 element, index, array가 들어갈 수 있다.

element는 배열의 현재 요소를 뜻하고,

index는 배열의 현재 요소의 인덱스를 뜻하는데, 이 인자는 선택 사항이다.

array는 find()를 호출한 배열을 뜻하며, index와 마찬가지로 선택 사항이다.

 

콜백 함수의 반환값이 참이라면 해당 요소를 반환한다.

find()와는 다르게 반환값이 참이 되는 모든 요소를 반환하여 새로운 배열을 생성한다.

이때, 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다.

 

 

 

문자열 변형 및 조작 메서드

join()

배열의 모든 요소를 연결해 하나의 문자열로 만드는 메서드

let arr = ['Apple', 'Banana', 'Grapes'];

let result = arr.join();
console.log(result); // Apple,Banana,Grapes

let result2 = arr.join('');
console.log(result2); // AppleBananaGrapes

let result3 = arr.join('-');
console.log(result3); // Apple-Banana-Grapes

join()에 인자로 들어가 있는 구분자를 통해 배열의 모든 요소를 연결한다.

구분자를 생략하면 배열의 모든 요소가 ,(쉼표)로 구분되어 연결되며,

구분자가 빈 문자열이면 모든 요소가 구분 문자 없이 연속적으로 연결된다.

 

이때, 배열의 길이가 0이라면 빈 문자열을 반환한다.

 

split()

문자열을 나누어 배열로 저장하는 메서드이다.

사실 split()은 배열 관련 메서드가 아니라 문자열 관련 메서드이긴 하지만, join과 역할이 반대이기 때문에 여기에 작성했다.

let str = 'Apple Banana Grapes';

let result = str.split(' ');
console.log(result); // ['Apple', 'Banana', 'Grapes']

let result2 = str.split();
console.log(result); // ['Apple Banana Grapes']

let result2 = str.split(' ', 2);
console.log(result); // ['Apple', 'Banana']

split()에 첫 번째 인자로 들어가 있는 구분자로 문자열을 나누어 배열에 담는다.

구분자를 생략하면 문자열 그대로 배열에 담겨 길이가 1인 배열을 반환한다.

구분자가 빈 문자열이면 문자열의 모든 문자를 원소로 가지는 배열을 반환한다.

 

 split()의 두 번째 인자로 들어가 있는 limit으로 배열의 개수를 제한한다.

문자열을 나누어 배열에 담지만, 배열의 길이가 limit이 되면 즉시 중단하며, 남은 문자열은 배열에 포함되지 않는다.

limit을 생략하면 길이 제한 없이 배열이 생성된다.

 

이때, 빈 문자열이 주어졌을 경우 빈 배열을 반환하는 것이 아니라 빈 문자열을 원소로 가지는 배열을 반환한다.

 

 

 

배열 변형 및 조작 메서드

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.

let arr = [1, 2, 3, 4];

let result = arr.map(v => v * 2);
console.log(result); // [2, 4, 6, 8]

map()에 인자로 들어가 있는 콜백 함수를 통해 새로운 배열 요소를 생성할 수 있다.

 

콜백 함수의 인자에는 element, index, array가 들어갈 수 있다.

element는 배열의 현재 요소를 뜻하고,

index는 배열의 현재 요소의 인덱스를 뜻하는데, 이 인자는 선택 사항이다.

array는 find()를 호출한 배열을 뜻하며, index와 마찬가지로 선택 사항이다.

 

콜백 함수의 반환값으로 새로운 배열을 만든다.

즉, 콜백 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환값을 이용하는 것이다.

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)