[javaScript] Array(배열) 객체 내장 함수의 종류와 사용법

언어/JAVASCRIPT

[javaScript] Array(배열) 객체 내장 함수의 종류와 사용법

seongEun95 2022. 10. 6. 21:14

본 글은 Array(배열) 객체에서 사용할 수 있는 내장 함수의 종류와 사용법에 대해서 알아보고자 합니다.

서버에서 데이터를 클라이언트로 전송 받고 이 데이터를 통해 화면에 구현하는 경우가 많이 발생 합니다.

array 객체 내장 함수들을 알고 있다면 데이터를 적절하게 가공하여 화면에 나타낼 수 있습니다.

- 목차 -

가. Array(배열)의 의미

나. Array(배열) 객체 내장 함수

1. toString() 함수

2. join() 함수

3. pop() 함수

4. push() 함수

5. shift() 함수

6. unshift() 함수

7. splice() 함수

8. concat() 함수

9. slice() 함수

10. sort() 함수

11. filter() 함수

12. map() 함수

13. reduce() 함수

다. 참고자료

가. Array(배열)의 의미

배열 객체의 내장함수를 알아보기 전에 배열의 의미와 특징을 간단하게 알아봅시다.

배열은 하나 이상의 데이터를 담을 수 있으며 해당 데이터는 어떤 데이터 타입도 할당할 수 있습니다.

const array = [12, "abc", true, false, [], {}, undefined, null, Symbol]

배열의 각 요소에는 순서가 있어서 데이터에 접근하고 수정할 수 있습니다.

배열의 순서는 0부터 시작합니다. 위의 사진에서도 0번 째 요소는 12를 명시하고 있습니다.

const array = [12, "abc", true, false, [], {}, undefined, null, Symbol]
console.log(array[2]) // true

위의 코드와 같이 배열에서 요소를 가져올 때는 배열 변수명에 대괄호를 사용합니다.

그리고 대괄호 안에 가져올 요소의 순번을 작성합니다.

배열 요소의 순서는 0부터 시작하므로 array[2]인 경우 true가 콘솔에 표시됩니다.

나. Array(배열) 객체 내장 함수

내장 함수는 자바스크립트에서 기본적으로 제공하는 함수를 의미합니다.

그렇기에 내장 함수를 잘 알고 있다면 이미 있는 기능을 활용하여 코딩할 수 있게 됩니다.

아래 글 부터 배열에서 사용할 수 있는 내장 함수에 대해서 알아봅시다.

1. toString() 함수

- 배열의 각 요소를 하나의 문자열로 반환하며 이때 각 요소는 ,(콤마)로 구분됩니다.

// toString() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.toString()) // apple,banana,pear,orange,melon

2. join() 함수

- 첫 번째 파라미터로 전달된 문자가 각 요소 사이의 구분자로 사용됩니다.

- toString() 함수의 경우 ,(콤마)만 구분자로 사용되지만 join() 함수는 어떤 문자든 사용할 수 있습니다.

// join() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.join(" & ")) // apple & banana & pear & orange & melon
console.log(fruits.join("")) // applebananapearorangemelon

* join() 함수의 활용법

let drinkList = [ // 서버에서 전달받은 데이터로 가정
      {name: "콜라", price: 1400},
      {name: "칠성사이다", price: 1300},
      {name: "아메리카노", price: 1200},
      {name: "바나나우유", price: 1500},
      {name: "초코우유", price: 1000}
    ]

    const trElem = [] // 빈 배열 생성
    drinkList.forEach(function (drink) { // forEach 함수로 배열 순회
      trElem.push("<tr>") 
      trElem.push("<td>" + drink.name + "</td>")
      trElem.push("<td>" + drink.price + "</td>")
      trElem.push("</tr>") // push() 함수로 빈 배열에 요소 추가
    })

    document.getElementById('tbody_elem').innerHTML = trElem.join("")
    // 배열 join()함수를 통해 html 요소에 삽입

서버에서 전달 받은 데이터를 html 요소에 삽입할 경우

복합 할당 연산자인 +=로 태그들을 빈 문자열에 넣어 html에 넣는 방법이 있습니다.

하지만 위에 코드에서 push() 함수로 빈 배열을 채운 다음

마지막에 join()함수로 배열을 하나의 문자열로 만들어 html에 넣는 방법도 있습니다.

3. pop() 함수

- 배열의 마지막 요소를 제거하고, 해당 마지막 요소를 반환합니다.

// 3. pop() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.pop()) // melon
console.log(fruits) // ['apple', 'banana', 'pear', 'orange']

위 배열의 마지막 요소가 melon 이므로 fruits.pop()의 반환 값은 melon이 됩니다.

pop()함수로 인해 배열은 마지막 요소인 melon이 제거된 배열이 됩니다.

4. push() 함수

- 배열 끝에 새로운 요소를 추가하고, 배열의 길이를 반환합니다.

// 4. push() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
fruits.push("grape") // grape 추가
console.log(fruits) // ['apple', 'banana', 'pear', 'orange', 'melon', 'grape']

위 배열에서 push() 함수로 grape를 추가하여 총 요소가 6개인 배열이 됩니다.

5. shift() 함수

- 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.

// 5. shift() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.shift()) // apple 반환
console.log(fruits) // ['banana', 'pear', 'orange', 'melon']

shift() 함수를 통해 fruits 배열의 첫 번째 요소인 "apple"이 제거되었고 콘솔에는 apple이 반환되었습니다.

따라서 fruits 배열에는 "apple"요소를 제외한 나머지 요소들로 구성됩니다.

6. unshift() 함수

- 배열 맨 앞에 요소를 추가하고, 배열의 길이를 반환합니다.

// 6. unshift() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.unshift("grape")) // 배열의 길이인 6 반환
console.log(fruits) // ['grape', 'apple', 'banana', 'pear', 'orange', 'melon']

unshift()로 fruits 배열 맨 앞에 "grape"가 추가되었고, 반환값은 배열의 길이인 6이 반환됩니다.

fruits 배열은 "grape"가 추가되어 총 길이가 6인 배열이 됩니다.

7. splice() 함수

- 배열 특정 위치에 새로운 요소를 추가하거나 요소를 제거하면서 추가할 수도 있습니다. 제거된 요소가 반환됩니다.

- 첫 번째 파라미터 : 새로운 요소를 추가할 인덱스 번호

- 두 번째 파라미터 : 요소를 추가하기전에 삭제할 요소 수 (없으면 첫 번째 파라미터 인덱스 번호부터 끝까지 삭제됩니다)

- 나머지 파라미터 : 추가할 요소 (없으면 요소를 추가하지 않습니다)

* 두번째 파라미터부터 필수값이 아닙니다.

// 7. splice() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.splice(2, 2, "grape")) // pear, orange 반환
console.log(fruits) // ['apple', 'banana', 'grape', 'melon']

splice() 함수로 첫 번째 파라미터 2는 인덱스 번호로 pear요소이며, 두 번째 파라미터 2는 2개를 삭제하므로 pear, orange 요소를 삭제하게 됩니다. 마지막 파라미터인 "grape"는 첫 번째 파라미터인 2번 인덱스 위치에 추가됩니다.

8. concat()

- 2개 이상의 배열을 하나의 배열로 결합합니다.

- ,(콤마)를 통해 배열을 계속 결합이 가능합니다. (ex. arr01.concat(arr02, arr03, ...))

// 8. concat() 함수
const fruits01 = ["apple", "banana"]
const fruits02 = ["pear", "orange", "melon"]
console.log(fruits01.concat(fruits02)) // ['apple', 'banana', 'pear', 'orange', 'melon']

fruits01 배열과 fruits02 배열을 결합하여 총 5개 요소를 가진 배열이 반환됩니다.

* Spread Operator로도 배열 결합이 가능합니다.

const fruits01 = ["apple", "banana"]
const fruits02 = ["pear", "orange", "melon"]
console.log([...fruits01, ...fruits02]) // ['apple', 'banana', 'pear', 'orange', 'melon']

배열 변수명 앞에 ... 을 붙이면 개별요소로 분해합니다. 이것을 배열로 만들면 concat() 함수와 동일한 값이 반환됩니다.

9. slice() 함수

- 배열의 요소를 잘라내서 새 배열을 반환합니다.

- 첫 번째 파라미터 : 시작 인덱스

- 두 번째 파라미터 : 종료 인덱스 (없으면 시작인덱스부터 끝까지 잘라냅니다)

// 9. slice() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.slice(2, 4)) // pear, orange 반환
console.log(fruits) // ['apple', 'banana', 'pear', 'orange', 'melon']

slice() 함수의 시작인덱스가 2이므로 pear부터, 종료인덱스 4의 경우 자신은 포함하지 않고 바로 앞까지 범위가 지정되어 orange요소까지 잘라냅니다. 따라서 pear, orange를 반환합니다.

원본배열은 수정되지 않습니다.

10. sort() 함수

- 배열 요소를 정렬합니다.

- 원본 배열이 정렬되는 것을 인식하고 있어야 합니다.

// 10. sort() 함수
const fruits = ["apple", "banana", "pear", "orange", "melon"]
console.log(fruits.sort()) // ['apple', 'banana', 'melon', 'orange', 'pear']

배열에 sort() 함수를 사용하면 오름차순으로 정렬 됩니다.

* 숫자 정렬

const num = [9, 2, 100, 250, 50, 80, 31]
console.log(num.sort()) // [100, 2, 250, 31, 50, 80, 9]

위의 숫자 배열을 sort()함수로 정렬 시 문자열로 비교하게 되어 원하는 정렬을 얻지 못합니다.

* 정렬순서에 대한 함수를 sort()함수의 파라미터로 정의하면 원하는 정렬을 반환할 수 있습니다.

const num = [9, 2, 100, 250, 50, 80, 31]

    num.sort(function (a, b) {
      if (a > b) return 1;
      if (a < b) return -1;
      if (a === 0) return 0;
      
      // a = 9, b = 2 / a > b이므로 9와 2는 교체
      // [2, 9, 100, 250, 50, 80, 31]
      
      // a = 9, b = 100 / a < b이므로 그대로 유지
      // [2, 9, 100, 250, 50, 80, 31]
      
      // a = 100, b = 250 / a < b이므로 그대로 유지
      .
      .
      .
      // [2, 9, 31, 50, 80, 100, 250] 최종적으로 오름차순 배열 형태로 정렬
    })
    console.log(num) // [2, 9, 31, 50, 80, 100, 250]

파라미터 a와 b에 배열 요소가 순차적으로 들어가고 그 둘을 비교합니다.

a와 b를 비교해서 리턴값이 양수이면 a와 b의 자리를 교체합니다.

a와 b를 비교해서 리턴값이 음수이면 a와 b의 자리를 교체하지 않습니다.

더 이상 a와 b의 자리가 교체되지 않을 때까지 진행되면 원하는 정렬을 얻게 됩니다.

따라서 양수인지 음수인지를 확인하므로 숫자 정렬의 경우 아래와 같이 축약할 수 있습니다.

const num = [9, 2, 100, 250, 50, 80, 31]
num.sort(function (a, b) { return a - b })
console.log(num) // [2, 9, 31, 50, 80, 100, 250]

내림차순의 경우 아래와 같이 작성할 수 있습니다.

const num = [9, 2, 100, 250, 50, 80, 31]
num.sort(function (a, b) { return b - a })
console.log(num) // [250, 100, 80, 50, 31, 9, 2]

오름차순을 a - b로 비교했다면 내림차순은 b - a로 하여 정렬할 수 있습니다.

* 객체 정렬 & 문자 정렬

let drinkList = [
      {name: "콜라", price: 1400},
      {name: "칠성사이다", price: 1300},
      {name: "아메리카노", price: 1200},
      {name: "바나나우유", price: 1500},
      {name: "초코우유", price: 1000}
    ]

    drinkList.sort(function (a, b) {
      if (a.name > b.name) return 1; // 양수 : 자리교체
      if (a.name < b.name) return -1; // 음수 : 자레교체 안함
      if (a.name === b.name) return 0; // 0 : 다음 순서 진행
    })

    console.log(drinkList)

객체에 접근하여 문자를 정렬할 경우 숫자 정렬할 때의 a - b로 정렬되지 않고 if 문을 사용하여 정렬할 수 있습니다.

11. filter() 함수

- 배열에서 특정 조건에 맞는 요소만 모아 새 배열로 반환됩니다.

- filter() 함수의 파라미터로 함수가 사용되며 그 함수의 파라미터에는 배열의 요소가 포함됩니다.

- 원본 배열은 변경되지 않습니다.

 const drinkList = [
      { name: "콜라", price: 1400 },
      { name: "칠성사이다", price: 1300 },
      { name: "아메리카노", price: 1200 },
      { name: "바나나우유", price: 1500 },
      { name: "초코우유", price: 1000 }
    ]

    const drinkListFilter = drinkList.filter(function (drink) {
      return drink.price > 1200; // 조건이 true 인 요소로 새로운 배열이 반환됩니다.
    })
    console.log(drinkListFilter)

filter() 함수는 for 반복문을 사용한 것처럼 배열을 순회하고 함수 안에 조건이 true인 요소만 새로운 배열로 반환됩니다.

위 코드에서는 price가 1200 이상인 요소들만 true가 되므로 name 값이 콜라, 칠성사이다, 바나나우유인 요소로 새로운 배열이 반환됩니다.

12. map() 함수

- 배열이 가지고 있는 요소가 객체인 경우, 객체가 가지고 있는 key - value 쌍을 새로운 객체 형태로 변경하여 새 배열을 반환합니다.

- map() 함수의 파라미터로 함수가 사용되며 그 함수의 파라미터에는 배열의 요소가 포함됩니다.

- 배열 안의 객체들을 재정의 합니다.

- 서버에서 필요한 정보만 재정의하여 클라이언트로 데이터를 전달하는 경우도 있습니다.

- 원본 배열은 변경되지 않습니다.

const products = [
      {size: "big", name: "radio", price: 30000},
      {size: "small", name: "computer", price: 40000},
      {size: "medium", name: "phone", price: 50000}
    ]
    const productMap = products.map(function (prod) {
      return { // 배열 요소의 객체를 재정의 합니다.
        sizeProduct: prod.size + " " + prod.name,
        price: prod.price
      }
    })
    console.log(productMap)

위 코드에서 객체의 키 명인 size와 name이 있었으나 map() 함수를 통해 sizeProduct 라는 키로 합치게 되어 새 객체로 재정의 됩니다.

13. reduce() 함수

- reduce() 함수의 파라미터로 함수가 사용되며 그 함수의 파라미터는 아래와 같습니다.

- 첫 번째 파라미터 : accumulator - 누적값

- 두 번째 파라미터 : currentValue - 현재 배열 요소

- 세 번째 파라미터 : currentIndex - 현재 배열 인덱스 번호 (생략 가능)

- 네 번째 파라미터 : array - 전체 배열 (생략 가능)

- 원본배열은 변경되지 않습니다.

// 13 reduce()
const num = [9, 2, 100, 250, 50, 80, 31]
let sum = num.reduce(function (accumulator, currentValue, currentIndex, array) {
     return accumulator + currentValue;
}, 0) // 0은 초기화 값, accumulator(누적값) 초기값 : 0
console.log(sum) // 522

reduce함수는 배열의 개별 요소를 currentValue에 넣고 accumulator에 값이 누적됩니다.

아래는 reduce()함수 작동 순서를 알아보기 위한 코드 입니다.

// 13 reduce()
    const num = [9, 2, 100, 250, 50, 80, 31]
    let sum = num.reduce(function (accumulator, currentValue, currentIndex, array) {
      console.log(currentIndex + 1 + "번째 진행")
      console.log(accumulator + " - 누적 값")
      console.log(currentValue + " - 현재 값")
      console.log(accumulator + " + " + currentValue + " - 누적값 + 현재 값")
      console.log("")
      return accumulator + currentValue;
    }, 0) // 초기화 값 0
    console.log("총 누적 값 : " + sum) // 522

1번째 진행

reduce() 함수의 두 번째 파라미터를 0으로 할 시 처음 accumulator 초기값은 0입니다.

currentValue에는 num의 첫 번째 요소인 9가 들어가고 누적 값과 더해집니다.

2번째 진행

num의 9와 합하여 누적 값은 9입니다.

currentValue에는 num의 두 번째 요소인 2가 들어가고 누적 값인 9와 더해집니다.

이런 식으로 배열 요소의 갯수 만큼 반복되고 총 합계인 522가 반환됩니다.

* 조건식에서 사용되는 reduce() 함수

const drinkList = [
      { name: "콜라", price: 1400 },
      { name: "칠성사이다", price: 1300 },
      { name: "아메리카노", price: 1200 },
      { name: "바나나우유", price: 1500 },
      { name: "초코우유", price: 1000 }
    ]

    const price = drinkList.reduce(function (acc, cur) {
      if (cur.price > 1200) { // price가 1200 초과
        acc.push(cur) // 누적값의 초기값을 배열로 설정하여 누적값 배열에 push()함수로 현재 요소 넣기
      }
      return acc; // 누적값 반환
    }, []) // 초기값 배열로 설정
    
    console.log(price)

위 코드는 숫자 누적 합이 아닌 if 조건문을 이용하여 조건에 맞는 값만 반환하는 코드 입니다.

누적값의 초기값을 배열로 설정하고 현재 요소(cur)를 push()함수로 넣어 누적값을 반환합니다.

price값이 1200 초과인 배열요소, 즉 name 값이 콜라, 칠성사이다, 바나나우유인 요소가 반환됩니다.

여기까지 array(배열) 객체 내장 함수들을 알아보았습니다.

내장 함수들을 학습해 놓는다면 배열을 합치거나 요소를 정렬하는 등의 함수를 별도로 만들지 않더라도 구현할 수 있게 됩니다.

여기까지 저의 글을 읽어주셔서 감사합니다.

다. 참고자료

1. https://www.youtube.com/c/개발자의품격 / 부트캠프 中 - array 객체 내장 함수

2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString - MDN, toString()

3. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter - MDN, filter()

4. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce - MDN, reduce()