본문 바로가기

WebApp/JavaScript

JavaScript의 이해 - object(객체)

 

 

1.object(객체)

함수나 변수가 많아지면 복잡해진다

그렇기에 서로 연관된 함수나 여관된 변수를 잘 그룹핑해서 정리정돈하기 위한 수납상자 같은 도구를

객체라고 함

배열이라는것은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다

그렇다면 순서없이 정보를 저장하는 것도 있지 않을까? 그게 바로 객체이다

객체란 이름이 있는 정리정돈 상자이다

변수에 객체를 담고싶다 객체를 만들떄 사용하는기호 오브젝트리터럴은 중괄호

{};이건 비어있는 객체

객체 안에다 정보를 넣고 싶다

대신 그냥 넣으면 안되고 넣고싶음 정보에 대한 이름이 있어야함

그러면 coworkers라는 객체에 egoing이라는 정보를 programmer라는 딱지를 붙여서 저장한 것

var coworkers = {

'programmer':'egoing'

}

 // 여기서 'programmer':'egoing'는 property(속성) 이라고 하며 programmer를 key(키) egoing을   value(값)이라고 부른다*보통 키값 이라고 부르는 것은 key를 부르는 말이다

 

정보를 꺼내올떄는 coworkers.programer 여기서 .는 오브젝트엑세스오퍼레이트 즉 .앞의 객체에 접근하는 오퍼레이터

객체에 접근하는 방법 2가지

1. coworkers.programmer

2. coworkers['programmer'] //이 경우는 속성의 키가 띄어쓰기가 들어가 있을때 사용

 

 

이미 객체가 만들어진 후 정보를 추가하려면 

coworkers.bookkeper = 'duru'

coworsers['bookkeper'] = 'duru'

 

참고) 객체의 이해

https://www.zerocho.com/category/JavaScript/post/572c6f759a5f1c4db2481ee3

 

 

2.객체의 데이터를 순회하는 방법

목표: coworkers라는 변수가 가르키는객체의 속성(키+값)들을 전부다 가져오고 싶다

for(var XX in coworkers){

XX

}

하면 coworkers라는 객체에 있는 데이터의 수 만큼{}안의 코드가 실행됨 그리고
실행될때마다 키값(programmer등)들이 하나하나 변수(XX)로 설정되는 것이다

 

coworkers[XX]를 하면 위에서 배열의 형식으로 값을 가져오는 것과 같은 방법

*모든 데이터를 순회하면서 우리가 필요한 데이터가 있는 지 없는지 확인 하는 활용으로도 쓰임

 

 

3.method(메소드)

객체의 값에는 배열 숫자 함수도 담을 수 있는데 함수를 담는 경우 함수를 method라고 부른다

 

*coworkers라는 객체이름이 바뀔경우를 대비해서

showAll이라는 함수 안에서 이 함수가 소속되어 있는 객체를 가르키는 약속된기호 this를 쓴다

즉 최종완성은 

coworkers.showAll = function(){

 for(var keygg in this){

   document.write(keygg+':'+this[keygg]+'<br>');

  }

}

이경우 showAll함수 조차도 coworkers에 소속된 데이터라서 출력이 되는데 

이것을 제거하라면 if문으로 가능하다