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가지의 데이터를 다룰 대는 객체로 생각하면된다.

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

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

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

Published by pluginn

답글 남기기 응답 취소

Our Visitor