jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편

배열(ARRAY)은 프로그램을 배우기 시작하는 분들을 좌절시키는 첫판왕정도 되는 것 같습니다. "프로그램 별거 아니네"라고 방심하고 있다간 크리티컬 데미지 맞고 피 채울 시간도 없을지 모릅니다 ^^.

반 농담이구요. 배열을 만나면서 for Loop 도 의미있게 사용하게 되고 메모리에 대한 내용도 같이 엮여서 복잡해 지기 시작하죠. 그냥 그렇다구요 ^^;.

 

자 이번에는 JavaScript 의 Array 에 대해서 보도록 하겠습니다.

ARRAY : 배열

자바스크립트의 배열은 몇 가지 내장 함수를 가진 변경 가능한 리스트(mutable lists) 입니다. 요 부분은 string 편에서 말씀드린 immutable 과 비교하시면서 보시면 될 거 같습니다. 자바스크립트의 배열 선언은 아래와 같이 합니다.

var x = [];
var y = [1, 2, 3];

배열의 타입은 "object" 입니다.

console.log(typeof []); // "object"
console.log(typeof [1, 2, 3]); // "object"

읽고 쓰는 방법은 배열 인덱스로 각 요소로 접근 할 수 있습니다.

x[0] = 1;
console.log(y[2]); // 3

 

Iteration

배열의 속성인 length 를 이용해서 for Loop 를 사용할 수 있습니다. 아래 예제는 JavaScript 의 기본적인 사용방법입니다.

 for (var i = 0; i < a.length; i++) {
   // Do something with a[i]
 }

jQuery 에서는 each() 함수를 제공합니다. 사용법을 보시죠.

var x = [1, 2, 3];
jQuery.each(x, function(index, value) {
	console.log("index", index, "value", value);
});

그냥 문법이니 참고해 두셨다가 사용만 하시면 될 것 같습니다. "왜 이렇게 쓰는거냐" 라고 물으시면 저 jQuery 코어 다 분석해야 합니다. ^^;;

배열의 내장함수들은 의외로 쓸만합니다. 아래 예제들을 보시면서 한번 경험해 보시기 바랍니다.

2011.07.15 추가 : 댓글 중 semi님의 고민의 결과로 인해 혼선이 있을 거 같아 추가합니다. 아래 결과값은 함수의 실행값이 아닌 함수가 실행된 후 x 변수의 값입니다. 그 내용을 알기쉽게 수정합니다.

var x = [0, 3, 1, 2];
console.log(x.reverse()); // x = [2, 1, 3, 0] 
console.log(x.join(" – ")); // x = "2 - 1 - 3 - 0"
console.log(x.pop()); // x = [2, 1, 3]
console.log(x.unshift(-1)); // x = [-1, 2, 1, 3]
console.log(x.shift()); // x = [2, 1, 3]
console.log(x.sort()); // x = [1, 2, 3]
console.log(x.splice(1, 2)); // x = [2, 3]

위에 쓰인 함수의 설명입니다.

reverse() : 배열 순서를 뒤집기
join('key') : key 값으로 배열요소를 문자열로 만들어줌
pop() : 배열의 맨 마지막 요소를 삭제하고 삭제된 해당 값을 반환함
unshift(값) : 값을 배열의 0번째 요소에 삽입하고 이전 요소를 하나씩 뒤로 밀어낸 후, 배열의 길이를 반환함(ie는 undefined를 반환함)
shift() : 배열의 맨 처음 요소를 삭제하고 삭제된 해당 값을 반환함
splice(index, 몇개) : index위치 부터 몇개를 삭제한 후 삭제된 요소들을 반환해 줍니다.

아주 유용한 함수들이 많이 있습니다. 그런데 저는 많이 쓰게 되지는 않더군요. 한번씩 보고 가셔서 나중에 쓸일이 생기면 기억하셨으면 좋겠습니다. 이 배열 내장함수들은 JavaScript 가 지원하는 함수들입니다.

배열에 대해 좀 더 확인하시고 싶으신 분들을 위해 링크를 하나 드립니다. 영문이지만 아주 간단한 수준이기 때문에 별 어려움 없으실 거예요. 제가 자주 애용하는 w3c School 입니다.
배열에 대해 더 보기 http://www.w3schools.com/jsref/jsref_obj_array.asp

저 같은 경우는 배열을 사용해 보면서 "워~ 프로그램 재밌네" 했었습니다. 진짜 옛날이네요. 마치 프로그래머가 된 듯했던 기분이란. ㅎㅎ;; 지금 생각하면 참 우스운 얘기인거 같습니다.

생각보다 내용이 길지 않네요. 음~ 길고 지루한 내용이 다음번으로 끝일 거 같습니다. 일단 함수(FUNCTION)에 대한 개론이 남았습니다. 그 담부터 좀 재미있는 것들이 나왔으면 좋겠네요.

그럼 즐프하세요.