[자바스크립트 기초-7] Array의 기본 메소드
개발을 하다보면 반드시 사용하게 될 Array (배열). 이번 포스팅에서는 기본적으로 사용할 수 있는 array의 메소드들에 대해 알아보도록 하겠습니다. 이런게 가능하구나 정도로만 알고 있으면, 나중에 개발할 때 솔루션을 생각할 때 도움이 됩니다.
#Array의 기초
자바스크립트에서 array는 []로 표현합니다.
var arr = [];
// 아이템이 없는 빈 array
var arr = ["Hello", "Bye", "World", "Good", 100, true]
// 아이템이 있는 array
console.log(arr[0]);
// 결과 -> Hello
array안의 특정 위치에 있는 값을 가져올 때 역시 위 예제처럼 []를 사용합니다. 위치는 가장 첫번째가 1이 아닌 0부터 시작된다는 것을 기억해야합니다.
array안에는 모든 데이터타입의 데이터를 담을 수 있습니다. String, Number, Boolean, Object 등 자바스크립트 데이터타입에 속하는 것은 담을 수 있습니다.
#Array의 아이템들을 하나의 문자열로 변환
Array안에 따로 저장되어있는 아이템들을 하나의 문자열로 변환하고 싶은 경우가 있을 수 있습니다. 우선 가장 기본적인 toString() 메소드부터 알아봅니다.
var arr = ["Hello", "World"];
var arr_str = arr.toString();
console.log(arr_str);
// 결과 -> Hello,World
위 결과에서 알 수 있듯이 toString()은 아이템의 값을 콤마(,)로 이어서 하나의 문자열로 변환해줍니다.
콤마가 아니고 본인이 지정한 문자 (혹은 스페이스)로 문자열로 변환하고 싶은 경우에는 join() 메소드를 사용하면 됩니다.
var arr = ["Hello", "World"];
var arr_str = arr.join(' ');
console.log(arr_str);
// 결과 -> Hello World
var arr_str2 = arr.join('#');
console.log(arr_str2);
// 결과 -> Hello#World
위 결과처럼 join에 스페이스 한칸을 지정해주면 Array의 아이템들이 한칸씩 스페이스를 두고 하나의 문자열로 합쳐집니다. 마찬가지로 '#'를 지정해주면 아이템 사이에 #를 두고 문자열로 합쳐지는 걸 확인할 수 있습니다.
#Array에 아이템 추가/제거
아이템을 추가하는 방법은 두가지 메소드가 있습니다. push()와 unshift() 입니다.
var arr = ["Hello", "World", "Bye"];
arr.push("Morning");
console.log(arr);
// 결과 -> ["Hello", "World", "Bye", "Morning"];
arr.unshift("Night");
console.log(arr);
// 결과 -> ["Night", "Hello", "World", "Bye", "Morning"];
위 결과에서 볼 수 있듯이 push()는 array의 마지막에 새로운 아이템을 추가하고, unshift()는 array의 처음에 새로운 아이템을 추가한다는 차이가 있다는 걸 알 수 있습니다.
반대로 아이템을 제거하는 메소드는 pop()과 shift()가 있습니다.
var arr = ["Night", "Hello", "World", "Bye", "Morning"];
arr.pop();
console.log(arr);
// 결과 -> ["Night", "Hello", "World", "Bye"];
arr.shift();
// 결과 -> ["Hello", "World", "Bye"];
pop()은 array의 마지막에 있는 아이템을 제거하고, shift()는 array의 처음에 있는 아이템을 제거합니다.
#특정 포지션의 아이템 바꾸기
Array안의 특정 포지션에 위치한 아이템의 값을 바꾸고 싶을 땐 직접적으로 그 포지션을 지정하고 바꿔주면 됩니다.
var arr = ["Night", "Hello", "World", "Bye", "Morning"];
arr[0] = "Apple";
console.log(arr);
// 결과 -> ["Apple", "Hello", "World", "Bye", "Morning"]
포지션은 0부터 시작됩니다. 그렇기 때문에 위 예제에서는 가장 첫번째에 있는 아이템의 값이 바뀌었습니다. 위 예제에서 마지막 포지션은 4인데, 그렇다면 5번째 포지션을 지정하면 어떻게 될까요?
var arr = ["Night", "Hello", "World", "Bye", "Morning"];
arr[5] = "Banana";
console.log(arr);
// 결과 -> ["Night", "Hello", "World", "Bye", "Morning", "Banana"];
5번째 포지션 (위 예제의 array에서는 가장 마지막 포지션)에 새로운 아이템이 추가 됩니다. 그렇다면 마지막 포지션이 4일때, 5를 건너 뛰고 6에 새로운 아이템을 추가하면 어떻게 될까요?
var arr = ["Night", "Hello", "World", "Bye", "Morning"];
arr[6] = "Mango";
console.log(arr);
// 결과 -> ["Night", "Hello", "World", "Bye", "Morning", empty, "Mango"]
5번째 포지션엔 "empty" 즉 빈공간이 자동으로 생성된 것을 알 수 있습니다. empty는 아무것도 지정되지 않았다는 뜻의 "undefined"나 값이 없다는 뜻의 "null"과는 다른 개념이라는 것만 우선 알아두시면 됩니다.
특정 포지션에 있는 아이템을 삭제 할 땐 delete와 splice()가 있습니다.
var arr = ["Hello", "World", "Bye"];
delete arr[0];
console.log(arr);
// 결과 -> [empty, "World", "Bye"]
우선 delete를 사용하여 아이템을 삭제해봤는데요, 결과에서 볼 수 있듯이 해당 포지션에 있던 아이템이 "empty"로 바뀐 것을 알 수 있습니다. 만약 이런식으로 빈 공간을 남기고 싶지 않다면 splice()를 사용하면 됩니다.
var arr = ["Hello", "World", "Bye"];
arr.splice(0,1);
console.log(arr);
// 결과 -> ["World", "Bye"];
splice()에서 첫번째 인풋은 포지션의 위치, 그리고 두번째 인풋은 해당 포지션에서부터 몇개의 아이템을 삭제할 것인지 지정해줍니다. 위 예제에서 splice(0,3)을 실행해주면 모든 아이템이 삭제됩니다.
이처럼 삭제할 때도 사용할 수 있지만, splice()는 특정 포지션에 새로운 아이템을 추가할 때도 사용할 수 있습니다. 3가지 아이템이 있는 array에 두번째 포지션에 새로운 아이템을 추가하고 싶은 경우는 다음과 같이 하면 됩니다.
var arr = ["Hello", "World", "Bye"];
arr.splice(1,0,"Morning");
console.log(arr);
// 결과 -> ["Hello", "Morning", "World", "Bye"];
첫번째 인풋인 1은 array의 두번째 포지션을 지정해주는 것이고, 두번째 인풋인 0은 아무런 아이템도 삭제하지 않는다는 뜻이 됩니다. 그 다음 세번째로 지정해준 "Morning"이라는 값이 array의 두번째 포지션에 새롭게 추가되게 되는 것입니다. 여러가지 아이템을 차례로 추가하고 싶을 경우엔 계속 콤마로 나눠서 인풋을 추가해주면 됩니다.
arr.splice(1,0, "Morning", "Night", "Afternoon");
이런식입니다.
#서로 다른 array 합치기
여러개의 array를 하나로 합치고 싶을 땐 concat()을 사용합니다.
var arr = ["Hello", "World"];
var arr2 = ["Morning", "Night"];
var arr3 = arr.concat(arr2);
console.log(arr3);
// 결과 -> ["Hello", "World", "Morning", "Night"]
concat() 메소드를 실행한 array 뒤에 지정된 array의 아이템들이 추가됩니다.
#기존에 있는 array로 새로운 array 만들기
기존에 있는 array의 값들을 이용해서 새로운 array를 만들고 싶을 땐 slice() 메소드를 이용하면 됩니다. 기본적으로 두가지 인풋을 지정할 수 있는데, 첫번째는 기존 array의 어느 포지션의 아이템부터 선택할건지를 지정하는 인풋이고, 두번째는 몇개까지 선택할건지를 지정하는 인풋이 됩니다. 두번째 인풋을 지정해주지 않으면 자동으로 마지막 아이템까지 선택하게 됩니다. 두번째 인풋에 지정하는 숫자에 대해 유의해야 할 점은, 지정한 숫자만큼의 아이템보다 하나 적은 아이템까지 선택된다는 점입니다.
var arr = ["Hello", "World", "Morning", "Night"];
var arr2 = arr.slice(1);
console.log(arr2);
// 결과 -> ["World", "Morning", "Night"]
var arr3 = arr.slice(1,3);
console.log(arr3);
// 결과 -> ["World", "Morning"]
위 예제에서 보면 arr3의 값이 "World"와 "Morning" 두가지만 선택된 것을 알 수 있습니다. slice()의 첫번째 인풋인 1은 arr의 1번 포지션을 말하는 것이기 때문에 arr[1]에 있는 "World"라는 값부터 시작이 됩니다.
그리고 두번째 인풋인 3은 얼핏 생각하면 "World"를 첫번째로 시작해서 3개니까 "Night"까지 선택되어야 된다고 생각이 들 수 있지만 마지막 3번째는 포함하지 않습니다. 3번째 "이하"가 아니고 "미만" 이라는 인식이 되기 때문에, 이 점을 유의해야 합니다.
Array에 기본적으로 내제된 메소드들이 많기 때문에, 직접 새로운 코드를 짜지 않아도, 이것들을 활용하는 것만으로도 충분히 많은 일들을 할 수 있습니다.
다음 포스팅에는 또 다른 Array의 기본 메소들에 대해 계속 알아보도록 하겠습니다.