javascript 팁이 있는 곳입니다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 109

0

조회 수 : 7585 신고 : 0

작성자 : 이병준
포인트 : 0 | 레벨 : 0
미리보기 :  
음.. 이번 탄의 희생양은 클로저였지만 구글을 검색해보니..
골때리는 자바스크립트의 본 목적에서 벗어나는 듯 해서 잠시 미루도록 하겠습니다.
원래 골때리는 자바스크립트의 목적은, 말 그대로 골때리는 팁을 알려드리기 위해서지..
자바스크립트의 가식적이고 진지 오래먹는 강좌는 아니거든요..
하지만, 골때리는 스코프나 클로저는 없지는 않으니까 정리를 한 후에
언제 팁으로 올라갈지는 저도 장담은 못하겠습니다.

오늘 이시간 골때리는 자바스크립트의 희생양은 배열이 되겠습니다.
우흐흐흐흐흐... 배열에 대한 한가지 진실을 알려드리죠.
자바스크립트를 작성하시는 분들에게는 꼭 알아둬야 할 골때리는 팁입니다.
또한 아시는 분이야 아시겠지만 이번에 소개될 함수는 정말 골때릴지도 모르겠죠.

1. 배열의 진실

일단 자바스크립트는 객체지향언어에 속합니다.
그것도 모자라 객체에 재대로 쏠린 언어죠.
하지만 그래도 그덕분에 MVC. 모델 뷰 컨트롤러를 탄생시킨 장본어이기도 합니다.
자바스크립트가 그냥 부가기능에 그쳤던 시대에서 하나의 프로그램 언어(?)로 인정한
이 위대한(??) 자바스크립트 사전에 없는 배열의 진실은 무엇일까요?

먼저 아래 코드를 보겠습니다.

arr[0][1]

자. 이건 분명 2차배열에 쓸법한 문법입니다. 딱 봐도 2차배열이겠죠.
분명 2차적인 배열에 값을 정의하면 나오겠죠?
그렇다면 다음 코드를 보겠습니다.

element['style']['display']=none;

음.. 배열에 이름을 달 수가 있었던가요? 거 참 신기하긴 하네요.
물론 프로토타입 라이브러리 쓴다면야 hash 기능을 이용하면 되겠지만..
이거 뭐.. 배열이라고 하기엔 애매하고 그렇다고 객체를 저따구로 쓰는것도 참..

자.. 이제 진실을 아시겠습니까?
음.. 감이 아직 잡히지 못한 분들께 힌트를 더 드리겠습니다.
먼저, 배열을 하나 만들겠습니다.

var arr=new Array();

그런 다음에 arr[0][1]='string' 이렇게 정의해 보세요.
만약 이게 가능하다면 이넘은 다차원 배열이고, 안된다면.. 병들의 신인거죠.

이제 감이 잡히셨습니까?
그렇습니다. 자바스크립트의 배열의 세계는 절대적인 1차 배열입니다.
2차..3차..다차원 배열 따위는 사전에 없다는 거죠.
하지만 실망하지 마세요. 우리에게는 객체가 있으니까요.
원하면은 배열을 하나 더 만들어내서 다차원 배열처럼 만들 수가 있지요.

arr[0]=new Array();
arr[0][1]='string'

옹홍.. 잘되는군요. 초보분들의 이해를 돕기 위해

var arr=[];

이건 잠시 접어두겠습니다. 물론 요것도 배열을 만드는 편법입니다. 알아두세요.

어쨌든, 자바스크립트에 다차원 객체는 있어도 다차원 배열 따위는 없습니다.
다음으로 넘어가죠.

2. Array.prototype.length의 진실

배열의 길이를 구해주는 고마운 속성 length.
하지만 이녀석이 하는짓이 얼마나 골때리는데요.
물론 배열의 길이를 구해주는 스크립트는

var arrlen=arr.length;

이지만, length에 대한 3가지 골때리는 진실을 알려드립니다.
먼저, length 속성이 읽기 전용일까요?
아닙니다. length는 읽고 쓸 수가 있습니다.
지금 arr.length=3; 작성해보세요. 만약에 읽기 전용이라면 값을 지정할 때 에러가 발생합니다. 하지만 멀쩡한 이 배열의 자태를 감상하세요.
그렇다면, 만약에 length를 통해 배열 길이를 정했을때, 없던 새로운 배열은 뭐로 채워지죠?
물론 null로 체워집니다.
아니 그러면, length를 5가 나왔는데 3으로 줄이면 어떤 현상이 나오는겁니까?
뒤에 있는 배열 2개는 영영 작별인사를 해야합니다. undefined로 변하는거죠.
그래서 배열 안에 있는 내용을 모조리 비우는 메소드를 이렇게 작성합니다.

Array.prototype.clear=function(){
      this.length=0;
}

어때요. 쉽죠?
마지막으로, 배열을 선언했습니다.

var arr=new Array();

그런 다음, 배열 아무자리에 값을 넣어보겠습니다.

arr[4]='arr4';

자, 이제 arr.length 값을 구해보겠습니다. 몇으로 나왔죠?
5로 나왔습니다. 엉ㅇㅇ어어엉ㅇㅇ어어어어어엉?
아니, 하나밖에 정의를 안했는데 어째서 길이가 순식간에 5로 뿔어날 수 있습니까?
먼저, 위의 코드를 한줄로 표현하면 다음과 같습니다.

arr=[null,null,null,null,'arr4'];

즉, 배열의 5번째 자리를 만들기 위해 앞자리를 null로 채우는거죠.
어느 언어나 배열의 법칙입니다. 규칙이 엄한 언어는 갑작스레 아무자리에 배열을 정의하면 에러가 납니다.
이 약속을 지키는것도 자바스크립트도 예외는 아니죠.
만약 여러분이 원하는대로 길이가 1이 나왔다면은,
과연 아무개가 정의한 배열의 위치를 알 수 있을까요?
당사자 아니고선 모릅니다. 이런 혼란을 막는 센스인 것이죠.

골때리지만 유용한 자바스크립트의 세계는 오늘은 여기까지입니다.
다음 희생양은, 또 함수입니다. 1탄에 이어 함수는 동네북입니다.
네. 자바스크립트의 동네북은 역시 함수입니다.
클로저와 스코프란 어려운 개념을 만든 쇼키가 바로 함수죠.
다음에는 이 또 골때리게 만드는 함수에 대한 다른 세계를 보여드리겠습니다.
그럼 즐코딩~

License : Public Domain
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
109 best of best 레이어를 이용한 움직이는 공지 title: [ani]깜빡이는 표정빽짱구 2004-03-08 34 6650
108 best of best 클릭하면 메뉴가 나타나고, 다시 클릭하면 닫히는 소스 [1] title: [ani]깜빡이는 표정빽짱구 2004-10-31 33 5887
107 hit best of best 이미지가 서서히 변하는 롤오버 효과 title: [ani]깜빡이는 표정빽짱구 2006-08-30 32 14362
106 best of best 제자리에서 페이딩되면서 바뀌며보여주는 뉴스티커 title: [ani]깜빡이는 표정빽짱구 2006-01-07 32 8458
105 best of best 원클릭으로 클립보드에 저장하기 title: [ani]깜빡이는 표정빽짱구 2004-10-27 30 7497
104 hit best of best 따라다니는 톱버튼 (파이어폭스,익스지원) title: [ani]깜빡이는 표정빽짱구 2006-03-30 29 12901
103 best of best 타이틀을 랜덤으로 바꾸기 title: [ani]깜빡이는 표정빽짱구 2006-03-28 29 9810
102 hit best of best 아이프레임 크기 자동조절 [1] title: [ani]깜빡이는 표정빽짱구 2006-05-02 28 12024
101 best of best 통통 티는 탑버튼 만들기 title: [ani]깜빡이는 표정빽짱구 2005-03-19 23 6047
100 hit best of best 자동으로 년도,월,일,요일,시간 나오게 하기 title: [ani]깜빡이는 표정빽짱구 2006-03-28 22 10948
99 best of best 텍스트 타이핑효과 title: [ani]깜빡이는 표정빽짱구 2004-04-22 22 5989
98 best of best 메트릭스 효과 문자 title: [ani]깜빡이는 표정빽짱구 2004-04-21 22 4921
97 best of best 스크롤되는 배너 title: [ani]깜빡이는 표정빽짱구 2005-03-26 21 9659
96 best of best 따라다니는 탑버튼 title: [ani]깜빡이는 표정빽짱구 2004-02-28 21 6185
95 best of best 위에서 아래로 떨어지는 메뉴 title: [ani]깜빡이는 표정빽짱구 2004-10-31 20 6103
94 best of best 출렁거리며 내려오는 공지창 title: [ani]깜빡이는 표정빽짱구 2004-04-19 20 5014
93 best of best 상태표시줄 바꿔보자2 title: [ani]깜빡이는 표정빽짱구 2004-02-07 20 4778
92 손님이 원하는색을 입력받아 배경화면으로 적용하기! title: [ani]깜빡이는 표정빽짱구 2004-02-29 19 4744
91 링크주소 가리기소스 title: [ani]깜빡이는 표정빽짱구 2004-07-21 18 7150
90 떨어지는 낙역또는 눈 title: [ani]깜빡이는 표정빽짱구 2005-11-28 17 5453