[JavaScript] 자바스크립트 배열 (Array )과 배열을 다루는 메소드

JAVASCRIPT / ARRAY

JavaScript에서 배열 사용

 

배열은 기본적으로 Object Type이다.
자바스크립트에서 배열을 생성하는 방법은 두 가지가 있다.

1. [] 를 사용
2.  Array() 생성자를 사용

---

배열 선언하기 예제

1. [] 로 생성하는 방법 

  // 1 배열 생성후 값 할당
  var arr = [];
  
  arr[0] = '0';
  arr[1] = '1';
  arr[2] = '2';
  
  // 2 초기값 할당
  var arr = ['0','1','2'];
  
  // 3 배열 크기 지정(쉼표 갯수만큼)
  var arr =[,,,]

2. Array() 생성자로 생성하는 방법

  // 1 배열 생성후 값 할당
  var arr2 = new Array();

  arr[0] = '0';
  arr[1] = '1';
  arr[2] = '2';

  // 2 초기값 할당
  var arr2 = new Array('0','1','2');

  // 3 배열 크기 지정 (숫자만큼)
  var arr2 = new Array(3);

---

배열 값 출력하기 예제

  console.log(arr[1]); 
  
  console.log(arr2[2]);  
  
  for(i = 0; i < arr.length; i++){
    console.log(arr[i]);
  }

배열에 값이 들어있지 않은 상태면 undefined가 출력 된다.

---

배열을 다루는 메소드

자바스크립트에서 배열의 값을 좀 더 편하게 수정,추가,삭제 등을 할 수 있도록 해주는 메소드들이 있다.

메소드	기능
arr.toString()	배열 구조를 문자열로 반환
arr.join(separator)	원하는 구분자로 이어붙혀 문자열로 반환
arr.pop()	맨 뒤의 값을 제거하면서 반환한다.
arr.shift()	맨 앞의 값을 제거하면서 반환한다.
arr.push()	맨 뒤에 값을 추가
arr.unshift()	맨 앞에 값을 추가
arr.concat(arr)	배열끼리 이어 붙힌다
slice()	배열을  자른다.
splice()	배열을 자르면서 원하는 값을 넣을 수 있다.
sort()	배열을 정렬한다(기본적으로 문자열기준 정렬)
reverse()	배열의 순서를 거꾸로 바꾼다 (정렬기능 X)

---

예제

const coffees = ['아메리카노', '라떼', '모카', '마끼아또', '그린티'];
const snacks = ['초코쿠키', '민초쿠키', '호두파이'];

 

join()

arr.join('str')

      console.log(coffees.join("/"));   // 아메리카노/라떼/모카/마끼아또/그린티
      console.log(typeof coffees.join("/")); // String

원하는 구분자로 이어 붙혀 문자열로 반환한다. 배열의 형태가 Object -> String으로 바뀐다.

 

pop()

arr.pop()

      console.log(coffees.pop());
      console.log(coffees);  //  ["아메리카노", "라떼", "모카", "마끼아또"]

맨 뒤의 값을 제거하면서 반환한다 (제거된 요소 반환)
 ["아메리카노", "라떼", "모카", "마끼아또", "그린티"] -> ["아메리카노", "라떼", "모카", "마끼아또"]

 

shift()

arr.shift()

      console.log(coffees.shift());
      console.log(coffees);  // ["라떼", "모카", "마끼아또"]

맨 앞의 값을 제거하면서 반환한다.
["아메리카노", "라떼", "모카", "마끼아또"] -> ["라떼", "모카", "마끼아또"]

push()

arr.push(value)

      // coffees.pop() = 마끼아또  ( 꺼내면서 추가했기 때문에 값의 변화는 없다.)
      coffees.push(coffees.pop());
      console.log(coffees);

맨 뒤에 값을 추가한다.
["라떼", "모카", "마끼아또"] -> ["라떼", "모카", "마끼아또"] 
(마끼아또를 pop()으로 꺼낸뒤 push())

unshift()

arr.unshift()

console.log('아아를 추가한 뒤 coffees의 length : ', 
	coffees.unshift('아이스아메리카노'));   // 4

맨 앞에 값을 추가하고 추가된 배열의 길이를 반환한다.
["라떼", "모카", "마끼아또"] -> ["아이스아메리카노", "라떼", "모카", "마끼아또"] 

concat()

arr.concat(arr2)

const menu = coffees.concat(snacks);
console.log(menu);  // ["아이스아메리카노", "라떼", "모카", "마끼아또", "초코쿠키", "민초쿠키", "호두파이"]

배열끼리 이어 붙힌다. 
["아이스아메리카노", "라떼", "모카", "마끼아또"]  +  ["초코쿠키", "민초쿠키", "호두파이"]

 

slice()

arr.slice(start_idx, end_idx)

      console.log(menu.slice(5));   // ["민초쿠키", "호두파이"]
      console.log(menu.slice(2,5)); // ["모카", "마끼아또", "초코쿠키"]

 

원하는 시작인덱스부터 끝인덱스 -1 까지 배열을 자른다.  
끝인덱스를 생략하면 끝까지 자른다.

1. ["아이스아메리카노", "라떼", "모카", "마끼아또", "초코쿠키", "민초쿠키", "호두파이"] 
      -> ["민초쿠키", "호두파이"]

2. ["아이스아메리카노", "라떼", "모카", "마끼아또", "초코쿠키", "민초쿠키", "호두파이"] 
      -> ["모카", "마끼아또", "초코쿠키"]

 

splice()

splice(index_to_add, num_of_remove, 넣고싶은 값들 . .)

console.log(menu); 
//["아이스아메리카노", "라떼", "모카", "마끼아또", "초코쿠키", "민초쿠키", "호두파이"]

menu.splice(2, 2, "키위","오렌지"); 

console.log(menu);
//["아이스아메리카노", "라떼", "키위", "오렌지", "초코쿠키", "민초쿠키", "호두파이"]

splice(2, 2, "키위", "오렌지")   ->  idx 2부터 2개의 요소를 제거한 뒤 키위,오렌지를 추가한다

["아이스아메리카노", "라떼", "모카", "마끼아또", "초코쿠키", "민초쿠키", "호두파이"]
     -> ["아이스아메리카노", "라떼", "키위", "오렌지", "초코쿠키", "민초쿠키", "호두파이"]

 

sort()

arr.sort()

menu.sort();
console.log(menu);
//["라떼", "민초쿠키", "아이스아메리카노", "오렌지", "초코쿠키", "키위", "호두파이"]

기본적으로 문자열 기준 오름차순 정렬을 한다. (JS의 Comparator가 기본 문자열 기준)
ex > 나 가 다 -> 가 나 다

숫자를 정렬할 경우 문자열과 동일한 방법으로 정렬한다. 
ex > 1, 3 , 23, 10   -> 1 , 10, 23, 3   

숫자를 정렬 할 경우 숫자타입 Comparator를 정의해야 한다.

// 오름차순 
const numbers = [100, 21, 25, 1, 3, 88, 91];  
      numbers.sort() // 1, 100, 21, 25, 3, 88, 91

      numbers.sort(function (a, b) {
        return a - b;
      });
      
// 내림차순  
const numbers = [100, 21, 25, 1, 3, 88, 91];  
      numbers.sort() // 1, 100, 21, 25, 3, 88, 91

      numbers.sort(function (a, b) {
        return a - b;
      });

sort()의 매개변수로 Comparator기능을 하는 함수를 생성하서 전달한다. 

오름 -> 내림, 내림 -> 오름으로 정렬하고 싶은 경우 새로운 Comparator를 정의하지 않고 
현재 기준 reverse()를 하면 된다.

 

reverse()

arr.reverse()

menu.reverse(); 
console.log(menu);
// ["호두파이", "키위", "초코쿠키", "오렌지", "아이스아메리카노", "민초쿠키", "라떼"]

존재하는 배열의 순서만 거꾸로 바꾼다 (정렬기능 X)

 

delete

delete arr[idx]

delete coffees[2];
// ["아이스아메리카노", "라떼", empty, "마끼아또"]

["아이스아메리카노", "라떼", "모카", "마끼아또"]  -> ["아이스아메리카노", "라떼", empty, "마끼아또"]
배열의 요소를 삭제한다. 삭제된 요소의 index까지 삭제되는게 아니라 empty로 공백을 남겨두고 자리는 차지한다.