[JavaScript] Object

Object vs Array

//Array
var members = ['kbs','k0214','1999k'];
console.log(members[1]);    //How to get information

//Object
var roles = {
    'programmer' : 'kbs',
    'designer' : 'k0214',
    'manager' : '1999k'
}
console.log(roles.designer);    How to get information

Array : 각각의 정보를 순서에 따라 정리 (각각의 정보는 고유한 식별자가 존재)

Object : 순서가 없는 정보 저장 (식별자가 숫자가 아닌 이름으로 존재)

	순서	식별자	literal
Array	O	숫자	[ ]
Object	X	이름	{ }

 

object 정의하는 방법 

var 객체이름 = { key : value }

 

Object 에서 key에 대한 value 값을 가져오는 방법

객체이름.key

객체이름[key]

 

loop for Object and Array

//Array
var members = ['kbs','k0214','1999k'];
var i = 0;
while(i<members.length){
    console.log('array loop',members[i]);
    i=i+1;
}

//Object
var roles = {
    'programmer' : 'kbs',
    'designer' : 'k0214',
    'manager' : '1999k'
}
for(var name in roles){
    console.log('object => ', name,'value => ', roles[name]);
}

name : object의 식별자 key 가 들어오도록 약속되어있음

 

Object Oriented Programming (OOP)

 

Programming을 한다는 것은 크게 두가지로 분류 

1. data

2. data를 처리하는 것 

data를 사용하기 좋게 정리하는 도구 : Array, Object 

처리하는 코드가 많아지면 서로 연관되는 것들 grouping하여 구분 : function

 

javascript에서의 function : 처리해야될 일에 대한 정보를 담고 있는 statement + 변수에 넣을 수 있는 value 

var f = function(){
	console.log(1+1);	//statement
}
console.log(f);	//value

 

배열의 원소로서 function 존재 가능

var f = function(){
	console.log(1+1);	//statement
}
console.log(f);	//value
var a =[f];
a[0]();

 

배열과 객체는 모두 서로 연관된 data를 담는 그릇인데, javacript에서는 처리 방법을 grouping하는 함수 조차도 data이기 때문에 배열과 객체에 담을 수 있음 

var f = function(){
	console.log(1+1);
}

var o = {
    func:f
}
o.func();

 

※ function을 배열보다는 객체에 담는 경우가 많음

 

function을 객체에 담을 때

var o = {
    v1 : 'v1',
    v2 : 'v2',
    f1 : function f1(){
    console.log(o.v1);
    },
    f2 : function f2(){
    console.log(o.v2);
    }
}

o.f1();
o.f2();

 

위 코드의 경우, 객체의 이름을 바꾸어보면 함수 안의 내용까지도 바꿔야함을 알 수 있음 

따라서 함수가 객체 안에서 사용될 때, 함수가 자신이 속해있는 객체를 참조할 수 있는 특수한 약속이 필요함

-> this 이용

var o = {
    v1 : 'v1',
    v2 : 'v2',
    f1 : function f1(){
    console.log(this.v1);
    },
    f2 : function f2(){
    console.log(this.v2);
    }
}

o.f1();
o.f2();