[1]. 🔎자바스크립트 배열내장함수 정리 (1)

🔊 자바스크립트의 배열내장함수를 복습하고 정리하기 위한 글입니다.

💡1. length

length는 배열안에 '몇 개'가 들어있는지, 즉 배열의 길이를 반환합니다. 코드를 보며 이해를 하면 편합니다.

const fruits = [apple, banana, orange];

console.log(fruits.length);

결과 값 = 3

이러한 결과가 나옵니다. 여기서 중요한 점은 우리가 직접적인 값을 배열에서 추출할 때에 엔진은 apple이 저장된 곳을 1번이 아닌 0번으로 알고 있습니다. 예를 들면 우리가 'banana'를 콘솔에 출력하고 싶다면 다음과 같은 코드를 작성해야 합니다.

const fruits = [apple, banana, orange];

console.log(fruits[1]);

결과 값 = banana

즉, fruits.length는 배열의 길이를 반환합니다. 총 3개의 배열안의 원소가 포함되어 있기 때문에 3이 반환 되었습니다. 하지만 컴퓨터의 프로세스로 현재 배열의 순서를 따져보면 [ 0 (apple), 1(banana), 2(orange) ]로 기억되고 있는 것 입니다.

🙋‍♂️이 length 메소드를 어떻게 활용할 수 있을까?

우리는 과제를 받았습니다.어제 회원가입한 정보를 출력해야하는데, 현재 백엔드로 부터 받은 Api는 배열안에 저장된 object 형식이며 5번째 이상의 자료들은 오늘 저장된 내용이므로 그 부분을 제외하고 출력을 합니다.

//api 예시

const user = [
  {name:'jun', old:'24', phonenumber:'01000000000'},
  {name:'jin', old:'25', phonenumber:'01011111111'},
  {name:'lin', old:'30', phonenumber:'01022222222'},
  ...
  ]

이러한 Api를 받았다고 가정을 합니다. ... 이후로는 계속 다른 내용의 object들이 저장되어 있습니다. 그렇다면 우리는 이러한 코드로 5번째 까지의 object들을 추출할 수 있을 것 입니다.

if (user.length > 5) {
  user.length = 5;
  }

console.log(user);

그리고 그 중 2번째 유저의 정보를 불러오고 싶다면

console.log(user[1])

이렇게 하면 배열 중 5번 이전의 유저들의 정보와 그 중 2번째 순서에 해당되는 유저의 정보를 가져올 수 있을 것 입니다.

💡2. isArray

isArray는 객체가 배열인지 아닌지를 boolean형식으로 반환해 줍니다.
예를 들면 다음과 같습니다.

const numbers = [1,2,3,4,5]

const people = {'jun','jin','people}
                
console.log(Array.isArray(numbers))
console.log(Array.isArray(people))

결과 값 : true, false

이런 식으로 특정 object가 배열인지 아닌지 확인해주는 콜백함수 입니다.

💡3. concat

concat은 두 배열을 하나로 합쳐주는 내장함수 입니다. 배열1과 배열2를 concat하면 둘이 합쳐진 배열이 되는 것 입니다.

선언 방식은 Arr1.concat(Arr2) 이런 식으로 배열1의 뒤에 concat함수를 불러와 인자로 Arr2를 뒤로 붙히는 형식입니다. 다양하게 활용할 수 있습니다.
배열로 만들어진 객체가 아닌 것이 들어와도 자동으로 그 객체의 인자로써 들어가게 됩니다.

코드로 예를 들어 봅니다.

const number = [1, 2, 3];
const people = ['철수', '영희', '훈이']

console.log(number.concat(people))

결과 값: [1, 2, 3,'철수','영희','훈이']

concat은 얕은 복사입니다. 따라서 number.concat(people) 를 하여도 원본은 변함이 없습니다.

💡4. fill

배열 안의 원소를 하나의 정적인 값으로 채웁니다. 첫 번째 매개변수는 채울 값, 그 다음은 어디서 부터 채울 것인지 그 다음은 마무리를 어디서 할 것인지를 정합니다.

const numbers = [1, 2, 3, 4]

console.log(numbers.fill(5,1)
console.log(numbers.fill(5,2,7)

결과 값: [ 1, 5, 5, 5 ], [ 1, 2, 5 ,5]

만약 마무리 매개변수가 선언된 배열의 크기보다 크다면 원래 선언된 배열으 크기까지만 출력됩니다.

💡5. fillter

filter는 보통 사이트에 흔히 있는 '검색'등의 기능에 활용됩니다. filter내장함수는 말 그대로 배열에서 특정 값을 걸러내는 함수입니다.

각 요소를 시험할 함수를 콜백함수로 받고, 그 함수에 true를 반환하는 값들을 담고 false를 반환하는 값들을 걸러냅니다.

다음 코드로 살펴봅니다.

const words = ['hello', 'bye', 'people', 'monkey', 'computer']

const lowWords = words.filter(word => word.length < 5);

console.log(lowWords);

결과 값: ["bye"]

배열 내에서 콜백함수는 요소 word를 인자로 받고 word의 길이는 5보다 작습니다. 따라서 true를 반환하는 요소는 bye밖에 없기 때문에 bye만 콘솔에 출력되게 됩니다.

다음으로는 특정 문자열을 포함하는 값만 반환하는 '검색'함수를 작성해 봅니다.

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

//검색 조건에 따른 필터링
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); 
console.log(filterItems('an')); 

결과 값1 : ['apple', grapes']
결과 값2: ['mango', 'banana']

이렇게 필터함수는 특정 배열에서 걸러내고싶은 작업을 할 때 사용이 됩니다.

다양한 배열내장함수가 있습니다. 이러한 배열내장함수는 쓸 일이 많을 것 같고 실제로 많이 사용되고 있다고 하니 복습하면서 정리를 하면 분명 쓸 일이 많을 것이라고 생각합니다. 모든 자바스크립트 배열내장함수를 시리즈로 계속 연재할 계획입니다.

📃 참고문헌

Mozilla MDN