Prototype.js 4) 자바스크립트와 배열 형태들

자바스크립트에서 배열은 나열이며, 이를 연결하는것이다. 자바스크립트의 배열은 크기가 정해져 있지않고, 정의된배열을 크기를 마음대로 늘리거나 줄일 수있다. 배열에 문자열을 넣을수 있고, 오브젝트, 함수, 메서드, 클래스, 또 다른 배열을 넣을수 있다. 기존의 객체지향적인 언어에서는 생각할수없는 부분이 아닐까싶다.

-_-소스를 볼때마다 당황스럽다고 할까.

 

Array 클래스 배열

 

자바스크립트에서 배열을 나타내는 대표적인 클래스이다.

배열의 인덱스를 숫자값이 아닌 문자열을 사용할 수도 있다.

 

 var SportArray = new Array(2);  //배열을 생성 SportArray[2]= '농구';
 SportArray[7]= '마라톤';
 SportArray[11]= '수영';
           
  $('show1').innerHTML = SportArray.toString();

 

엘리먼트가 3개인 배열을 생성하였으나, SportArray[7], SportArray[11]같은 예외가 발생해도

 에러가 나지 않는다. 자바스크립트의 배열은 특별한 조치를 하지 않아도 엘리먼트를 추가하면

 자동으로 배열이 늘어난다.

 

Object 클래스 배열

 

 var Sport = new Object(); //배열 생성
new 연산자를 사용하여 Object 클래스의 Object() 메서드를 호출하면 var로 선언한 이름의 오브젝트가 생성된다.

  Sport[0]= '농구';
  Sport[1]= '마라 톤';

 

Sport['swimt']= '수영';
 배열의 인덱스가 문자열이다. 문자열을 사용한다면  이해하기 쉽도록 의미를 부여할수 있다. 하지만 문자열의 인덱스로 사용할 경우 반복문을 통해서 처리를 할 수 없다.

$('show3').innerHTML = Sport['swimt'];
 $('show4').innerHTML = Sport['notDefine'];

 

 

프로퍼티 형태의 배열 

 

프로퍼티는 멤버 변수라고도 하며, 오브젝트에 연결되어 있는 변수를 의미한다. 즉 오브젝트를 보조하는 역할을 한다. 자바스크립트에서 프로퍼티는 매우 다양한 모습을 갖는다. 오브젝트의 속성을 나타내기도 하고, 오브젝트에 포함된 메서드를 지칭하기도 한다. 또 오브젝트 안에서 값을 갖는 변수를 지칭하는 경우도 있다.

 

var Sport와 같이 독립적으로 선언하면 용도와 위치에 따라 변수도 될 수 있으며, 오브젝트도 될 수 있다.

 

...

 

             var sport = new Object();

             sport['12'] = '수영';
          
           $('show1').innerHTML = sport[12];
           sport[0.77] = '마라톤';
           $('show2').innerHTML = sport[0.77];
           sport['swim'] ='스윔';
           $('show3').innerHTML = sport['swim'];
           sport.swim = '수영';
           $('show4').innerHTML = sport.swim;

            ....

앞의 Object()배열과 예제 자체는 별차이점이 없는거 같다 -_-근데 왜이렇게 장황하게 설명해났는지 헷갈렸다.

           sport.swim = '수영';
           $('show4').innerHTML = sport.swim;

swim은 프로퍼티이라고 본다. sport['swim']은 형태보단 앞의 형태를 더 많이 사용된다다.

 

 

Hash 타입 배열

Hash 타입 배열은 key(이름)와 value(값) 형태의 배열이다. 배열이름으로 이름으로 접근하여 값을 추출할 수 있다.

Hash 배열의 특징은 유일한 이름을 부여하지 않아도 되며, 값에 일반적인 값을 지정 할 수 있을 뿐만 아니라 메서드, 함수, 오브젝트 등을 지정할 수 있다.

 

var LikeSport = {
        basket: '농구',
        soccer: '축구'
        }
     
      var LikeFood = {
        korean: function() {
         $('show3').innerHTML = '김치';
         },
         chinese: function() {
         $('show4').innerHTML = '자장면';
        
         }
      }
     
      var Show = {
     
      Click: function(event) {
      $('show1').innerHTML = LikeSport.basket;
      $('show2').innerHTML = LikeSport.soccer;
     
      LikeFood.korean();
      LikeFood.chinese(); 
                }
     }

 

LikeSport가 오브젝트이고, basketball은 이름이며 농구는 값이다. 이름과 값은 : 로 구분한다.

Hash배열은 LikeSport.basketball과 같이 오브젝트와 프로퍼티 형태로 접근하여 값을 추출할 수 있다.