Javascript 자바스크립트에서 배열사용하여 프로그램하기

Javascript 자바스크립트에서 배열사용하여 프로그램하기

 

개발환경 : window 7

 

이번에 활용도가 높은 배열에 관련된 내용을 정리해본다.

자주 쓰는 내용이라 정리한다고 생각만 하고 있었지 실천을 못하고 있었는데

이 참에 그 답답함을 싸그리 날려보내자.

 

1. 배열 생성

 

배열을 만들때는 각괄호를 사용한다. 다른 컴파일계열 프로그램처럼

메모리에 생성 선언을 하기 위해 new 를 쓰기도 하지만 주로 생략한다.

 

var arraySample = [‘1’, ‘2’, ‘3’, ‘ME’];

var arraySample = new Array[‘1’, ‘2’, ‘3’, ‘ME’]

 

2. 생성한 배열요소에 접근하기

 

배열의 각 원소의 인덱스는 처음부터 0 으로 시작해서 증가한다.

위의 예제에서 보자면 인덱스 0 은 ‘1’ 이 되고 1 이 ‘2’ 가 된다.

그래서 배열 변수에 var indexName = arraySample[0]; 하게 되면

indexName 에는 ‘1’ 이 반환하게 된다.

그리고 굳이 숫자를 넣지 않고 수에 해당하는 변수를 넣어도 된다.

Var indexName = arraySample[arraySample.lengeh - 1]; 처럼 하게

되면 indexName 에는 ‘ME’ 가 저장된다. arraySample.lengeh 는

배열의 크기를 나타내는데 4가 되므로 -1 을 해줘야 마지막 인덱스

값이 되는 것이다.

 

3. 배열 원소추가와 삭제하기

 

(1) 배열 앞부분에 추가하기

배열에 원소를 추가하기 위해서는 몇가지 방법이 있다. 배열에서 인덱스

마지막값을 주고 원하는 데이터를 넣으면 처음 선언했던 크기에 상관없이

하나 증가하게 된다.

arraySample[arraySample.length] = “YOU”;

하게 되면 아래와 같은 배열이 된다.

arraySample = [‘1’, ‘2’, ‘3’, ‘ME’, ’YOU’];

 

다른 방법은 배열의 함수를 쓰는 것인데 push() 가 배열요소의 마지막에

값을 추가할수 있도록 해주는 함수이다.

arraySample.push(‘YOU’);

 

그리고 하나만 추가 할수 있는 것이 아니고 push 의 파라미터 값을 여러 개

넘기면 한번에 추가 할수 있다.

arraySample.push(‘YOU’, ‘ALL’);

 

(2) 배열 뒷부분에 추가하기

그럼 마지막에 추가하는 함수가 push() 라면 앞부분에 추가하는것도 있을것이다.

그것은 unshift() 이다.

arraySample.unshift(‘YOU’);

arraySample.unshift(‘YOU’, ‘ALL’);

 

위에서 배열요소를 추가했으니 이제 삭제하는 내용을 알아보자.

삭제 함수는 추가와 같이 앞부분삭제 pop(), 뒷부분 삭제 shift() 가 있다.

그리고 이 두함수는 반환값으로 삭제후의 배열을 넘긴다.

var arraySample = [‘1’, ‘2’, ‘3’, ‘ME’];

Var deleteArray = arraySample.pop();

결과는 deleteArray = [‘1’, ‘2’, ‘3’] 이 된다.

 

4. 배열 시작과 끝이 아닌 중간에 원소를 제어하기

 

 (1) splice() 사용하여 추가하기

splice 함수의 파라미터 정의는 아래와 같다.

splice(삽입할 인덱스값, 옵션, 추가할 원소들….)

 

인덱스값은 중간에 끼어 들어갈 인덱스 값이 된다

옵션은 0 일때 어떤 원소도 삭제하지 않겠다면 의미이며 0 보다 큰값이 될때에는

새로운 원소로 대체할 숫자를 말하는데 이것은 아래 3번 원소교체하기를 참고한다.

추가할 원소들은 1개 이상넣으면 된다.

 

var arraySample = [‘1’, ‘2’, ‘3’, ‘ME’];// 기존 배열

arraySample.splice(3, 0, ‘4’, ‘5’);

결과값은 아래와 같다.

arraySample = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘ME’];//

 

(2) splice() 사용하여 삭제하기

삭제할때는 파라미터가 2가지이다. 첫번째는 시작인덱스, 두번째는 삭제갯수이다.

간단하니 아래 예제만 보면 알수 있을 것이다.

var arraySample = [‘1’, ‘2’, ‘3’, ‘ME’];// 기존 배열

arraySample.splice(1, 2);

결과값은 아래와 같다.

arraySample = [‘1’, ‘ME’];

 

(3) splice() 사용하여 기존값 대체하기

1번과 파라미터는 같지만 2번째 옵션값에서 0 이 아닌 그보다 큰수를

넘기게 되면 그 수만큼의 값이 3번째 파라미터 값인 추가할 원소들로

대체된다. 그러니까 추가할 원소가 3개인데 두번째 파라미터 값이 3이면

첫번째 인덱스값부터 3개의 값이 추가할 원소들로 대체 된다.

var arraySample = [‘1’, ‘2’, ‘3’, ‘ME’];// 기존 배열

arraySample.splice(1, 2, ‘4’, ‘5’);

결과값은 아래와 같다.

arraySample = [‘1’, ‘4’, ‘5’, ‘ME’];