JavaScript를 공부해보면서 많은 배열들을 접해봤지만, 이때까지는 접근하기 쉽고, 다루기 쉬운 형태의 배열만 봤기때문에 딱히 어려움이 없었다. 하지만, 공부를 하면 할수록 Object와 배열에 접근할 일이 많아졌고, 더 공부해보기로 했다.
사실 그전에 학습할때는 배열을 사용할 일이 있을까? 라는 생각이 들었었는데, 생각해보니 나는 이때까지 데이터를 백엔드로부터 받아와 작업해본적도 없었고, 그냥 순수 타이핑으로 웹페이지를 구성했었던걸 깨달았다. 나중에 페이지를 제작한다면 객체형태, 혹은 배열형태, 혹은 둘이 혼합된 형태의 정보를 받아서 원하는 정보들을 페이지에 보여줘야 한다.

Array

const milk = '우유';
const cola = '콜라';
const water = '물';
.
.
.

만약 음료들을 사용해야 돼서 음료의 종류들을 일일이 변수로 지정한다고 하면 매우 번거로울것이다. 하지만, 이런 경우에 배열을 사용하여 "음료(drinks)"라는 집단으로 한방에 묶을 수 있다.

const drinks = ['우유', '콜라', '물' . . .];

이러한 drinks라는 배열에 들어있는 하나하나의 음료를 각각 요소(element)라고 한다. 그리고 배열은 순서가 있기 때문에 이 drinks라는 집단으로 구성된 배열에서 원하는 음료를 고르고 싶으면 drinks[자릿수]을 통해 개별적으로 불러올 수 있다. 그리고 이 자릿수를 index라고 한다.

console.log(drinks[0]);  --> "우유"
console.log(drinks[1]);  --> "콜라"
console.log(drinks[2]);  --> "물"

배열 내부에는 값이 중복되어도 되고, 아무 값이 없는 배열도 되고, 각종 다양한 Data Type도 들어갈 수 있다.

const dataType = ['콜라', 3, undefined, true, null];
const empty = [];
const duplicated = ['중복', '중복', '중복', 3, 3, 3] 

Array Methods

Array.length

배열 이름 뒤에 .length를 붙이면 길이(요소의 개수)를 반환해준다. 값을 반환해주는 함수가 뒤에 붙었는데 이처럼 객체 뒤에 붙은 함수를 메서드라고 한다. Array에는 다양한 메서드들이 존재하는데 대표적인것들만 정리해보았다.

(1). Array.push()

const drinks = ['우유', '콜라', '물' ];
const push = drinks.push('사이다');
console.log(push);              --> 4
console.log(drinks);            --> [ '우유', '콜라', '물', '사이다' ]

push()는 배열의 끝에 새로운 요소를 추가해준다. 물론, 한개만 되는것은 아니고 여러개도 추가 가능하다. 다만, 앞선 글에서도 적었듯이 "배열의 길이"를 반환하기 때문에 return값에 배열을 넣어주어야 한다.

(2). Array.pop() , Array.shift(), Array.unshift()

const drinks = ['우유', '콜라', '물' ];
console.log(drinks.pop());         --> '물'
console.log(drinks.shift());       --> '우유'
drinks.unshift('녹차');             --> 제일 앞부분에 '녹차'요소 추가
console.log(drinks);               --> [ '녹차', '콜라' ]

pop()은 배열의 마지막 요소를 제거하여 그 요소를 반환하고, shift()는 첫번째 요소를 제거하여 그 요소를 반환한다. 그리고 unshift()는 배열의 맨 앞부분에 요소를 추가해준다.

+ 만약 배열의 인덱스를 통해 접근해 undefined 혹은 빈 값을 준다면?

const drinks = ['우유', '콜라', '물' ];
drinks[drinks.length - 1] = undefined;  
console.log(drinks);       --> [ '우유', '콜라', undefined ]

or

const drinks = ['우유', '콜라', '물' ];
drinks[drinks.length - 1] = '';  
console.log(drinks);        -->[ '우유', '콜라', '' ]
console.log(drinks.length);   -->3

요소에 직접 접근하여 값을 undefined나 빈값, 혹은 null을 주어도 이 값들은 전부 배열에 담기게 된다.

(3). Array.splice()

배열에서의 중간 요소를 삭제 또는 교체하거나 추가하고 싶다면 splice()를 사용할 수 있다. 사용법은 아래와 같다.

array.splice(변경시작할 인덱스, 제거할 요소 갯수, 추가할 요소)

const number = [ 1, 2, 3, 4, 5, 6, 7 ];

console.log(number.splice(2, 2));  --> [ 3, 4 ]
console.log(number) --> [ 1, 2, 5, 6, 7 ]

console.log(number.splice(1));     --> [ 2, 3, 4, 5, 6, 7 ]
console.log(number) --> [ 1 ]

console.log(number.splice(0));     --> [ 1, 2, 3, 4, 5, 6, 7]
console.log(number) --> []

console.log(number.splice(1,2, '추', '가'));  --> [ 2, 3 ]
console.log(number) --> [ 1, '추', '가', 4, 5, 6, 7 ]

console.log(number.splice(1, 0, '추', '가'));  --> []
console.log(number) --> [ 1, '추', '가', 2, 3, 4, 5, 6, 7 ]

총 5개의 예시가 있는데 기본적으로 Array.splice()는 제거한 요소들을 반환하고, 꼭 삭제를 하지 않더라도 요소를 추가해줄 수도 있다.

(4). Array.includes(), Array.indexOf()

includes()는 특정 요소가 있는지 찾아보고 있으면 true, 없으면 false를 반환한다. 따라서, 조건문에서도 사용가능하다.

const drinks = ['우유', '콜라', '물' ];
drinks.includes('우유')  -->true

indexOf()와 lastIndexOf()는 특정요소가 정확히 어디에 있는지 알 수 있다.

const drinks = ['우유', '콜라', '물' ];
drinks.indexOf('우유');      --> 0
drinks.indexOf('주스');      --> -1

(5). Array.map()

let Arr = [1, 2, 3];
let newArr = Arr.map(function(a){
  return( a * 10)
});

or

let Arr = [1, 2, 3];
let newArr = Arr.map((a) => (a * 10));


--> newArr = [10, 20, 30]

map()은 소괄호 안에 콜백함수를 넣어, 각각의 요소들을 함수의 반환값으로 모아 새로운 배열을 만들어 준다.

+ 배열속 객체 재구성하기

만약 데이터를 배열로 받았는데 그 안에 들어있는 객체를 재구성해야된다면 어떻게 해야될까. 예를 들어 key값이 평점이고 value가 나이대인 데이터를 받고, 이를 단순하게 {평점:나이대}로 재구성해야된다고 하면 map()을 사용한뒤, 새로운 객체에 담아 반환할 수 있다.

let rating =  [{평점:5, 나이대:10},
               {평점:4, 나이대:20},
               {평점:2, 나이대:30}];
               
let simpleRating = rating.map( el => {
   let object = {};
   object[el.평점] = el.value;
   return object;
});

simpleRating = [ { 5 : 10 }, { 4 : 20 }, { 2 : 30 } ]