Javascript 배열(Array)과 객체(Object)- 생성 방법의 갈등 1/3

Javascript – 배열 Array(Object,Literal)
(new Array , Literal [ ] , { } 로 배열 및 객체 클래스 생성하기)
ㆍ배열 생성하기
javascript 에서 배열을 생성하는 방법이 크게는, 배열 생성자로 생성하는 방법과 리터럴로 생성하는 2가지 방법이있고,리터럴은 다시 [ ] , { } 2가지 방법으로 나눌수있다. 좀 더 정확하게 분류 하자면,
new Array() , [ ] 배열생성에 쓰인다면
{ } 는 key:value 타입의 객체(Dictionary) 와 그 타입을 갖는 클래스를 만들때 사용한다.
배열객체는 push , pop , shift , unshift , splice , slice 등의 배열 관련 메서드를 사용할수있다.

var myArray = new Array();// 배열 생성자(클래스) – ECMA 비추천 X
var myArray = [ ]; // [ ] 리터럴(literal) – 배열 생성시 사용 
var myArray = { };// { } 리터럴(literal) – 객체( 클래스) 생성시 사용

위에 만들어진 배열은 모두 객체(Object) 만들어지고 모두 같다. 차이점은 new Array() 아래와 같이 3가지로 생성 가능하다 → [ ]  와 다르게 갯수지정이 가능
일반적으로 new Array() 방식은 추천하지 않는데, 아마도 new Array(5) 여기서 오는 모호함 때문인것 같다.(5입력된 1개 배열 인지 5개 빈배열인지)
var myArray = new Array(); // 빈 배열 객체로생성
var myArray = new Array(5)// 갯수로 : 5개(0~4) index를 가지는 배열 생성
var myArray = new Array(1, 2, “test”, “C”);//1, 2,”test” ,”C” 로 초기화 배열 생성
리터럴 생성시 , 빈 배열 또는 초기화 2가지만 가능하며(배열 요소갯수 지정불가),
key , value 초기화는 { } 리터럴만 가능하다. → new Array 와 다르게 갯수지정이 불가능하다.
배열은 각기 다른 타입의 Value 를 포함할 수 있지만, 추천하지않는다.
[ ] 는 배열생성용  ,  { } 는 객체  or Dictionary  생성용
var myArray = [ ]; // 빈 배열 선언
var myArray = [1,2,3]// 1,2,3 으로 초기화된 배열생성


var myArray = [ ];  // 빈 배열 생성후  key value 식도 접근가능

myArray = [1,2,3,4,5]; //  빈 배열 생성 후 도 가능 { } 는 오류남
myArray[0] = 1;
myArray[1] = “A”
myArray[“name”] = “test”;  //  myArray.name = “test” 도  같음


var myArray = {}; // 빈 배열,인스턴스 객체로생성

var myArray = {1,2,3} // 오류  초기화는 반드시 key:value 로만 생성가능


var myArray = {};  // 빈 객체 생성후 배열식도 접근가능(★하지만 배열은 아니다.)
// 단 myArray = {1,2,3,4} 이런식의 배열식 접근은 오류
myArray[0] = 1;
myArray[1] = “A”;

myArray[“name”] = “test”;  //  myArray.name = “test” 도  같음


이렇게 생성된 빈 배열로 생성된 객체는 index 배열식 접근과 key : value 쌍 객체로의 접근이 가능하다( Dictionary  타입과 Array 형식 동시 사용도 가능)
var myArray = new Array(); // 또는 myArray = []; 또는 myArray = { }


myArray[“name”] =”test”;
// key:name value:”test”
myArray[0] = 100;
myArray[1] = 101;// 배열  – 인덱스 0,1 에 각각 값   배열 객체
console.log(myArray)  // [ 100, 101 ] 구조를 가짐 아래 객체와비교할것
var myArray = [];
myArray[“name”] =”test”;// key:name value:”test”
myArray[0] = 100;
myArray[1] = 101;// 배열  – 인덱스 0,1 에 각각 값   배열 객체
console.log(myArray)  // [ 100, 101 ] 구조를 가짐 아래 객체와비교할것

var myArray = {};

myArray[“name”] =”test”;// key:name value:”test”
myArray[0] = 100;      // 0 : 100 구조를 가지는 명확한 key:value 타입
myArray[1] = 101;      // 1 : 101 구조를 가지는 명확한 key:value 타입

console.log(myArray) // { 0:100 , 1:101}을 가지는 객체타입

하지만, key:value 타입의 객체 “초기화” 는 오직 { } 만 가능하다.
위에서 언급했듯 new Array , [ ] , { } 모두 생성한 후에는, [“key”] = “value” 로
모두 접근이 가능해진다.
var myArray = new Array(“name”:”test” , “job”:”driver”)// 오류 Unexpected token ‘:’
var myArray = [“name”:”test” , “job”:”driver”]// 오류 Unexpected token ‘:’
var myArray = {“name”:”test” , “job”:”driver”}// 정상적으로 생성됨
이번에는 Depth를 가지는 key,value 객체를 생성해 보자 (new Array() ECMA 에서 권고하지않으니 사용하지 않기로한다. ) 일반적으로 배열은 [ ] 리터럴을 객체는 { } 를 사용하기로 하자.

var myArray = {}; //  var myArray = [ ]; 로 작성해도 같은 결과를 얻을 수 있다.

myArray[“member”] = {}; //  var myArray = [ ]; 로 작성해도 같은 결과를 얻을 수 있다.
myArray[“member”][“name”] = “myname”;

myArray[“member”][“job”] = [];// push , pop , shift , unshift 는 배열만 가능하므로
myArray[“member”][“job”].push(“driver”);
myArray[“member”][“job”].push(“saler”)
myArray[“member”][“job”].push(“CEO”)

이번에는 리터럴  { } 로 객체를 생성해보자

ㆍmyObject  선언과 동시에 초기화

  var myObject = {    //  var myObject = [  ~ ]  는 오류가 발생 , 선언과 동시에 생성은 { } 만 가능

   “name” : “my object” ,  //  객체선언시 각 속성사이는 콤마 , 로 구분해야함
   “job” : “engineer”,
   “getName” : function() { return this.name};

}


ㆍmyObject  선언 후 속성 및 함수 정의

var myObject = {}
  // var myObject = [ ]  선언해도 같은 작동을 한다.

myObject.name = “test”; // name 속성추가
myObject.job = “test”;  // job 속성추가
myObject.getName = function() { return this.name}  // 함수생성
// myObject[“getName”] = function() { return this.name} 도 같다

 

console.log(myArray.getName())

이번에는 리터럴  { } 로 같은 인스턴스를 만들수 있는 클래스를 만들어보자
ㆍ빈 클래스 생성 후 속성 및 함수 추가
class myClass  {  //  빈 클래스 만들기
    }
    var o = new myClass();  // 인스턴스 생성
    o.name = “test”;             //  인스턴스 생성후 name , tel 속성 생성 및 할당,,,
    o.tel = “010-0000-0000”;
    o.getName = function() { return this.name }  //  심지어 함수까지 인스턴스 생성 후 추가..
    console.log(o.getName())

ㆍ생성자 있는 클래스 제대로 만들어보기

class myClass  {

name;
tel;

        constructor(a , b)
        {
            this.name = a;
            this.tel = b;
        }
        getName () {  return this.name   }
        getTel()  {   return this.tel;   }
    }

    var myObj = new myClass();  //  파라미터 2개를 받는 생성자인데, 무시해도 오류는 안남
    myObj.name=”my name is “;
    myObj.tel = “111”;
    console.log(myObj.getName());
    console.log(myObj.getTel());
    var myObj = new myClass(“test”,”010″);
    console.log(myObj.getName());
    console.log(myObj.getTel());
정리

1. var  myArray = new Array()  형식은 추천하지 않는다.
  new Array(5)
1) 5개의 요소를 같은 배열을 생성하지만, 5 값을가지는 1개 요소배열인지 의 모호성
2) 최근 트렌드가 코드를 단축화 하여 코딩하는경우가 많으므로  [ ] 방식을 좀 더 추천

2.  배열을 만들때는  [ ]  ,   객체(Dictionary or 클래스)로 생성할때는  { }
   리터럴 [ ] 로 생성된 객체도 { } 와 마찬가지로 Dictionary 타입으로 생성이 가능하다.
(하지만 [ ] 는 배열로만 사용하자)
 – 배열 메소드(push , pop등등) 사용가능(O) //  배열 메소드를 사용할경우 반드시 [ ]로!
– 단, 생성시 초기화(사전형식)는 안됨(X)  //  { } 리터럴만 가능. 단 ,배열초기화는 됨
– 클래스 및 객체 생성도 안됨(X)  // { } 리터럴만 가능

3. 리터럴 { }  객체(Dictionary) 사용시 주의사항
–  객체(Dictionary) , 클래스 모두 사용가능(O)
–  배열이 아니기때문에 배열식 초기화는 당연히 안됨(X)
      //  a = {1,2,3}
      //  a[0] = “test” , a[1] =1; 요소식 접근 생성은 가능하나 배열은 아님
//  { 0 : “test” , 1:1 } key:value 구조의객체 타입

– 배열 메소드를 사용 안됨 (당연함 객체니까) (X)  //  [ ] 리터럴만만 가능


4. 배열과 객체의 사용
기본적으로  배열은 같은 데이터 타입을 여러개 다룰 때 사용한다면,
객체는 너의 다양한 속성을 가진 1개의 타입을 가진다.

우리가 데이터를 다루는데 있어, 1 가지 타입을 여러개 다룰때는 배열
여러가지 속성(과 메서드) 을 가진 1가지의 데이터를 다룰 대는 객체로 생각하면된다.

그래서 ,  그런 객체 여러개를 한번에 다룰때 배열에 넣고 사용하면
효과적으로 데이터를 다룰 수 있다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다