[JavaScript] 15. 자바스크립트 배열의 내장함수 02

# filter

filter는 주어진 함수를 통과하는 모든 요소를 모아 새로운 배열을 반환합니다.

아래와 같이 여러 과일이 담겨 있는 배열이 있습니다. 첫번째 filter조건은 각 요소의 길이가 6보다 큰 경우를 만족하는 요소를 모아 새로운 배열을 반환해줍니다. 두번째 filter조건은 요소의 길이가 6보다 작은 경우를 만족하는 요소들을 모아 출력해줍니다.

const fruits = ["banana","apple","strawberry", "orange"];

console.log(fruits.filter(fruits => fruits.length > 6)); // ['strawberry']
console.log(fruits.filter(fruits => fruits.length < 6)); // ['apple'] 

 

# splice

splice는 배열의 기존 요소를 삭제하거나 교체하는데 사용합니다. 또한, 새 요소를 추가하여 배열의 내용을 변경합니다.

splice의 첫번째 인자에는 배열의 변경이 시작되는 부분, 두번째 인자는 제거될 요소의 수를 의미합니다.

const fruits = ["banana","apple","strawberry", "orange"];

console.log(fruits.splice(0,2)); // ['banana','apple']

 

# slice

slice는 원본 배열을 건드리지 않고, 배열을 잘라내는데 사용합니다.

slice의 첫번째 인자는 추출할 시작점, 두번째 인자는 추출을 종료할 기준 인덱스를 의미합니다.

아래에 코드에서는 첫번째를 시작으로 2번째요소까지 값을 가져옵니다.

const fruits = ["banana","apple","strawberry", "orange"];
const result = fruits.slice(1,3); 
console.log(result); // [ 'apple', 'strawberry' ]

 

하나의 인자값을 넣어주면 n번째부터 배열의 요소 끝까지 값을 반환합니다. 인자에 -n을 넣어주면 뒤에서부터 값을 가져옵니다.

const fruits = ["banana","apple","strawberry", "orange"];
const result = fruits.slice(1); 
const result2= fruits.slice(-2); 
console.log(result); // [ 'apple','strawberry', 'orange' ]
console.log(result2); // [ 'strawberry', 'orange' ]

 

# concat

concat는 인자로 주어진 배열이나 값에 대한 변경 없이 기존 배열에 연결해주는 역할을 합니다.

const fruits01 = ["banana","apple"];
const fruits02 = ["strawberry", "orange"];

console.log(fruits01.concat(fruits02)); // [ 'banana', 'apple', 'strawberry', 'orange' ]
console.log(fruits02.concat(fruits01)); // [ 'strawberry', 'orange', 'banana', 'apple' ]

 

++ 배열을 합치는 경우, spread를 이용하면 좀 더 간단하게 합칠 수 있어요!

const fruits01 = ["banana","apple"];
const fruits02 = ["strawberry", "orange"];

console.log([...fruits01, ...fruits02]); // [ 'banana', 'apple', 'strawberry', 'orange' ]

 

# join

join은 배열의 모든 요소를 합쳐서 하나의 문자열로 반환해줍니다. join의 인자값으로 구분할 문자열을 넘겨줍니다. 

const fruits = ["banana", "apple", "strawberry", "orange"];

console.log(fruits.join("-")); // banana-apple-strawberry-orange

 

구분자를 지정해주지 않으면, 디폴트로 ,(쉼표)로 설정되어 문자열을 연결해줍니다.

const fruits = ["banana", "apple", "strawberry", "orange"];

console.log(fruits.join()); // banana,apple,strawberry,orange

 

 

 

 

 

 

그 외 배열의 내장함수는 아래 사이트를 참고하면 좋을 것 같습니다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#