(객체)쓰기 와 읽기

그림 객체 생성/접근/추가하기

그림 결과

1. 객체 생성 하기

coworkers = {
"programmer" : "egoing",
"designer" : "leezhe"
};

- coworkers 라고 하는 객체안에 중괄호에 "egoing" 데이터 앞에 "programmer" 이름을 붙여

다음과 같이 출력한다 " programmer" : "egoing"

 

2. 객체 접근하기

document.write("programmer : " + coworkers.programmer + "<br>");

- 객체의 담긴 데이터 이름을 가져온다

- "  programmer : egoing / designer : leezche " 이름이 출력된다

 

3. 객체 추가하기

coworkers.bookkpper = "duru";
document.write("bookkpper : " + coworkers.bookkpper + "<br>");

- coworkers 객체에 "duru" 데이터를 bookkpper에 추가한다 bookkpper : duru이름이 출력된다

 

coworkers ["data scientist"] = "taeho";
document.write("data scientist :" + coworkers ["data scientist"] + "<br>");

- coworkers ["data scientist"] 객체에 배열 형식[ ]을 써서 데이터를 가져온다

- data scientist :taeho 띄어쓰기를 포함해서 이름이 출력된다

 

4. 객체와 반복문

그림 객체 와 반복문

그림 결과

1. 객체 순회

for (var key in coworkers){
document.write(key + '<br>');
};

 

-  key를 꺼내서 coworkers객체 전체를 가져온다

-  programmer designer bookkpper data scientist 내용이 출력된다

 

2. 객체의 데이터 순회
for(var key in coworkers){
document.write(coworkers [key] + '<br>'
};

- coworkers객체에 있는 데이터의 수만큼 중괄호 코드가 실행된다

- egoing, leezche, duru, taeho 출력된다

 

for (var key in coworkers) {
            document.write(key + ':' + coworkers [key] + "<br>");
        }

- coworkers 객체에 (name1 : ) key값에 일치하는 데이터를 전부 가져온다

- programmer:egoing, designer:leezche, bookkpper:duru,  data scientist:taeho 이름과 데이터가  출력된다

 

5  프로퍼티 와 메소드

 

객체에 소속된 변수: property
객체에 소속된 함수:method

객체 안 메서드 정의
coworkers.showall = function(){
for(var key in this){ //this는 해당 객체를 지정 but showall내용까지 포함
document.write(key+ ' : ' +this [key]+ '<br>');
}
}

후에 coworkers.showAll();이라는 함수 실행 가능

 

- for(var key in 객체이름)-> 객체 안의 값을 모두 가져오고 싶을 때 쓰는 반복문,

- ex) for(var key in coworkers) coworkers라는 변수 안에 있는 모든 key 값을 가져오게 만드는 반복문.

- key값은 우리가 가져오고자 하는 정보에 도달할 수 있게끔 도와주는 값임

 

최종 정리

 

배열은 [ 0 ] 객체는 { }를 사용한다

배열에는 배열명[0]부터 내용물이 순서대로 인덱스가 매겨지는데,
객체에는 객체명[키값]에 따라 내용물에 접근할 수 있다

 

배열의 생성법

- arry [ ] = [ '대괄호 사용', '중괄호', '소괄호']

 

객체의 생성법

- objects = { "curly brackets" : "중괄호 사용", "example" : "예제"}

 

객체의 접근

- document.write(objects.example);
"예제" // 출력

 

// 변수는 띄어쓰기가 안되므로 이렇게 호출

document.write(objects. ["curly brackets"]);

//여기서 객체 내부 저장 사이의 점을 object access operator(객체접근자?)라고 부른다

객체의 추가

objects.parenthesis = "소괄호";
objects. ["square bracket"] = "대괄호";

- 객체의 생성, 접근, 추가까지 살펴봤다

- 띄어쓰기가 있는 경우 배열처럼 대괄호로 묶어주면 된다

 

앞에서 배운 배열은 while 반복문으로 값을 모두 가져왔다

객체는 배열과 조금 다르다

 interate = 순회한다 + 반복적으로 가져온다는 뜻이다

for in을 쓰면 된다

for( var key in objects ) {
document.write( key + ' : ' + objects [key] + '<br>');
}

 

객체 for과 배열 while의 차이점

 

- while은 초기값을 i = 0으로 준다 그리고 i = i + 1을 반복문 내부에 넣어서 실행될 때마다  i값이 1씩 증가한다

- for문은 반복 횟수는 objects(객체)의 개수만큼 반복한다

- key는 i처럼 임의로 놓은 변수이며, 다른 변수를 넣어도 동작한다

- while과 다르게 i값의 초기값이나 변화를 따로 줄 필요가 없다.

- 배열이 index인 0, 1, 2, 3 ~ 에 값이 매칭돼 있는 데이터구조

  객체는 key값에 매칭되어 있는 데이터 구조라고 볼 수 있다.

- 순서는 보장되지 않는다.

 

객체를 순회하는 방법을 알아봤다

- 객체는 어떤 데이터도 담을 수 있다

- 숫자, 문자열, 배열, 함수까지 담을 수 있다

 

객체의 함수 추가하기

objects.showAll = function() {
for( var key in objects ) {
document.write( key + ' : ' + objects [key] + '<br>');
}
}

함수 선언방식은

- function showAll() {... } 함수를 정의하는 것 과 같은 방식이다.

- 함수는 객체 내의 값이기 때문에, 객체 내부의 함수에서 객체를 가리키는 방법이 있다.

- this, 이걸로 바꿔주어 객체명이 바뀌더라도 정상적으로 화면상에 출력된다

함수를 써보자!!

objects.showAll();

- 객체의 소속된 함수이기에 함수자체도 출력한다

 

용어 정의 - 객체의 소속된 변수의 값들로 함수를 지정할 수 있다 이는 곧 객체에 소속된 함수(메소드)를 만든다

객체에 소속된 변수: property

객체에 소속된 함수:method