[Javascript] 7장. 배열을 쉽게 다루자! Array 객체 (1, 2)

여러 개의 항목을 하나의 변수에 저장해야 할 때 -> 배열 (array) 를 사용한다. 

 

07-1. 객체란?

 Array 객체로 배열 만들기

- 리터럴 표기법으로 객체 만들기 / 객체의 인스턴스를 이용해 배열 만들기 2가지 방법이 있다.

- 전자는 3장에서 다루었으므로, 후자에 대해서 서술한다. 

Array(); 객체가 만들어져 있으므로 그냥 인스턴스를 선언하면 된다. 예약어는 마찬가지로 new 사용

> var myArray = new Array();

배열의 크기 지정 시 괄호 안에 숫자 쓰기

숫자 쓰지 않을 경우, 얼마든지 많은 자료 표기 가능

 

-초기값이 있을 경우

> var numbers = ["one", "two", "three", "four"]; // 리터럴 표기법
> var numbers = new Array("one", "two", "three", "four"); // 인스턴스

 

 

 배열에서 for문 사용하기

array객체의 속성을 사용하면 길이을 알 수 있다. 이를 이용해 배열의 요소에 접근한다. 

var seasons = new Array("봄", "여름", "가을", "겨울");
undefined
for(var i=0; i<seasons.length; i++){
    console.log(seasons[i]);
}
봄
여름
가을
겨울
undefined

 

07-2. Array 객체의 함수 알아보기

1. concat() 함수: 둘 이상의 배열 연결

배열 1, 배열 2가 있을 때

배열1.concat(배열2); 를 실행하면 두 배열을 배열1+배열2 형태로 합칠 수 있다.

var nums = new Array("1", "2", "3");
var chars = new Array("a", "b", "c", "d");
nums.concat(chars);
(7) ['1', '2', '3', 'a', 'b', 'c', 'd']

 

배열2.concat(배열1) 할 경우, 순서가 달라진다. 

chars.concat(nums);
(7) ['a', 'b', 'c', 'd', '1', '2', '3']

이 함수는 기존의 배열에는 영향을 주지 않는다. 

 

2. join() 함수: 배열의 요소 간을 연결해주어 출력

이 함수는 각 요소 사이의 연결자를 지정해 배열의 요소를 연결할 수 있다. 

nums.join("/");
'1/2/3'
nums.join("-");
'1-2-3'

지정하지 않으면 자동으로 "," 으로 연결된다. 

 

3. push(), unshift(): 새로운 요소를 추가 (push -> 맨 끝에, unshift -> 맨 앞에 추가)

반환값은 추가된 후 배열의 총 길이이다. 

nums.push("4", "5");
5
nums
(5) ['1', '2', '3', '4', '5']
nums.unshift("6");
6
nums
(6) ['6', '1', '2', '3', '4', '5']

이는 기존의 배열에 추가된 것이다. 

 

4. pop(), shift(): 배열에서 요소를 추출한다. (pop -> 맨 끝, shift -> 맨 앞)

이것도 마찬가지로 기존의 배열에 영향을 미친다. 

var book = ["javascript", "python", "C"];
book.pop();
'C'
book
(2) ['javascript', 'python']

 

5. splice(): 원하는 위치의 요소를 삭제, 추가할 수 있다. 

인수가 하나일 경우 -> 해당 인덱스부터 끝까지 삭제

인수가 두 개일 경우 -> 해당 인덱스부터 두 번째 숫자만큼의 요소 삭제

 ex) splice(2) -> 2부터 뒤 모두 삭제, splice(2, 1) -> 2부터 하나 삭제

var num = ["1", "2", "3", "4", "5", "6"];
undefined
num.splice(2);
(4) ['3', '4', '5', '6']
num
(2) ['1', '2']
var num = ["1", "2", "3", "4", "5", "6"];
undefined
num.splice(2, 1);
['3']
num
(5) ['1', '2', '4', '5', '6']

인수가 3개 이상일 경우, 첫 번째 두 개는 앞서 두 개일 때와 동일하고 마지막 인수는 삭제한 위치에 새로 추가되는 요소를 말한다. 

var num = ["1", "2", "3", "4", "5", "6"];
undefined
num.splice(2, 1, "7");
['3']
num
(6) ['1', '2', '7', '4', '5', '6']

삭제 없이 추가만 원할 경우, 두 번째 인수를 0으로 지정하면 된다. 

 

 

6. slice(): 원하는 위치의 요소들을 추출한다. 

요소가 삭제되는 것이 아니라 원하는 위치가 추출된다. 

인수가 하나일 때 -> 그 자리의 요소 추출

인수가 두 개일 때 -> 첫 번째 인덱스부터 두 번째 인덱스 직전까지의 요소가 추출된다.