[Javascript] 배열(Array) 활용하기

 이번엔 Array를 자세히 다뤄볼까 합니다.

 

  Array 만들기

// 방법1. 빈 array 만들기1
var arr = [];

// 방법2. 빈 array 만들기2
var arr = new Array();

// 방법3. String array 만들기
var arr = ['가', '나', '다', '라'];

// 방법4. int array 만들기
var arr = [1, 2, 3, 4, 5];

 방법 1과 방법 2는 비어있는 배열을 만드는 방법이고, 방법 3은 처음에 String Array를 생성하는 방법입니다. 입맛에 맞게 활용 가능합니다. string이니 int니 하는 건 제가 임의로 나눈 것일 뿐 실제로 Javascript에서 한 가지 형태로만 입력이 가능한 것은 아닙니다.

 

  ex. var arr = ['가', 1, '나', 2, '다'];  // 해당 방법도 가능

 

  Array의 길이

 배열의 길이는 length를 사용하여 가져올 수 있습니다.

 

length를 활용한 예

 

해당 소스에 대한 결과

 

  Array의 값 가져오기

 Array의 특정 데이터를 추출하기 위해서는 아래와 같이 괄호 사이에 해당 인덱스(배열의 순번)를 입력해서 가져올 수 있습니다. 주의할 점은 인덱스는 0부터 시작이라는 점입니다. 첫 번째 항목이 0, 두 번째 항목이 1의 순입니다.

 

Array[인덱스] : 해당 인덱스 위치의 값을 가져옵니다.

Array.indexOf(값) : 해당 값과 일치하는 인덱스 번호를 가져옵니다.

 

인덱스를 활용한 예

 

해당 소스에 대한 결과

 

  Array의 값을 순차적으로 처리하기

 보통 두 가지 방식으로 값을 처리 가능합니다.

 

순차적으로 값을 불러오는 예

 

해당 소스에 대한 결과

 

  Array에 값 추가하기

Array.unshift(값) : 앞에 값 추가

Array.push(값) : 뒤에 값 추가

 

Array에 값을 추가한 예

 

해당 소스에 대한 결과

 

다은과 같이 unshift 한 값인 '시작'이 맨 처음 그리고 push 한 값인 '마'가 맨 뒤에 추가되어있음을 확인하실 수 있습니다.

 

  Array에 값 삭제하기

 

삭제 방법에는 여러 가지가 있는데 일단 천천히 하나씩 확인해보면

 

Array.shift() : 앞에 값 삭제

Array.pop() : 뒤에 값 삭제

Array.splice(인덱스, 인덱스로부터 수량) : 지정 인덱스부터 입력된 수량만큼 삭제

delete Array(인덱스) : 지정 인덱스의 값만 삭제

 

Array의 값을 삭제한 예

 

해당 소스에 대한 결과

 

주의할 점은 delete의 경우 array의 수량이 줄어드는 게 아니라 해당 값이 undefined가 되었음을 주의해야 합니다.

 

  Array 복사

 

slice : 해당 Array를 복사합니다.

 

slice를 활용한 예

 

해당 소스에 대한 결과

 

 결과 화면에서 보이듯 arr을 조작해도 newArr은 변경이 없었음을 확인하실 수 있습니다.