xtmci.com

자바스크립트에서 배열을 다루는 방법을 알아보자.

1. 배열의 생성

배열은 2가지 방법으로 만들 수 있다. 하나는 배열 리터럴 (literal) 을 이용한 방법이고 다른 하나는 new 키워드를 이용한 방법이다.

배열 리터럴로 배열을 생성한다.

var numberArray = [10, 20, 30, 40, 50];

new 키워드로 배열을 생성한다.

var numberArray = new Array(10, 20, 30, 40, 50);

2. 배열 요소에 접근하는 방법

배열 요소를 지정할 때는 배열 인덱스를 사용한다. 배열 인덱스는 1이 아니라 0부터 시작한다.

document.write(numberArray[0]);    // 10 을 출력한다.
document.write(numberArray[2]);    // 30 을 출력한다.
document.write(numberArray[4]);    // 50 을 출력한다.

3. 배열의 길이 구하기

배열의 길이는 배열 요소의 개수를 의미한다.

length 프로퍼티로 배열의 길이를 구해 보자.

document.write(numberArray.length);    // 5를 출력한다.

4. 배열 요소 추가하기

배열 요소를 추가할 때는 push() 메소드를 쓴다.

var numberArray = [10, 20, 30];
numberArray.push(40, 50);    // 40 과 50 을 추가한다.
ducument.write(numberArray);    // 10,20,30,40,50 을 출력한다.

5. 배열 요소 삭제하기

배열 요소를 삭제할 때는 pop() 메소드를 쓴다.

var numberArray = [10, 20, 30, 40, 50];
var lastElement = numberArray.pop();    // 마지막 배열 요소를 배열에서 삭제하고 변수에 저장한다.
ducument.write(numberArray);    // 10,20,30,40 을 출력한다.
ducument.write(lastElement);    // 50 을 출력한다.

6. 배열 요소 검색하기

배열 요소를 검색하여 인덱스를 구할 때는 indexOf 메소드를 쓴다.

var numberArray = [10, 20, 30, 40, 50];
ducument.write(numberArray.indexOf(30));    // 2 를 출력한다.
ducument.write(numberArray.indexOf(10));    // 0 을 출력한다.
ducument.write(numberArray.indexOf(80));    // -1 을 출력한다.

indexOf() 메소드는 배열 요소의 검색에 실패할 때 -1 을 리턴한다.

1. setTimeout() 함수

setTimeout() 함수는 일정한 시간이 경과한 후 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

테스트를 위한 함수를 작성한다.

function testFunc() {
  alert('testing...');
}

1초 후에 testFunc() 함수가 실행되도록 세팅한다.

setTimeout(testFunc, 1000);

함수에 매개변수가 있는 경우를 살펴 보자.

function add(a, b) {
  sum = a + b;
  alert(a + ' + ' + b + ' = ' + sum);
}

1초 후에 add() 함수가 실행되도록 세팅한다.

setTimeout(add, 1000, 99, 88);

setTimeout() 함수의 세번째 인자와 네번째 인자가 add() 함수에 전달된다.

함수 대신 코드가 실행되도록 해 보자.

setTimeout() 함수의 첫번째 인자로 실행할 코드를 지정한다. 코드의 자료형은 문자열이다.

setTimeout(“alert(‘testing…’)”, 1000);

2. setInterval() 함수

setInterval() 함수는 일정한 시간마다 주기적으로 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

testFunc() 함수가 3초에 한번씩 반복해서 실행되도록 해 보자.

setInterval(testFunc, 3000);

3. clearTimeout() 함수와 clearInterval() 함수

clearTimeout() 함수는 setTimeout() 함수의 작동을 중단시킨다.

clearInterval() 함수는 setInterval() 함수의 작동을 중단시킨다.

setInterval() 함수의 작동을 중단시켜 보자.

setInterval() 함수를 실행할 때 해당 함수의 ID 를 변수에 저장한다.

var intervalId = setInterval(testFunc, 3000);

30초 후에 setInterval() 함수가 중단되도록 세팅한다.

setTimeout(“clearInterval(intervalId)”, 30000);

clearInverval() 함수의 인자로 intervalId 변수가 사용되었다.