Rainbow
(객체)쓰기 와 읽기 본문
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
'web > javascript' 카테고리의 다른 글
라이브러리/프레임워크 차이점 (0) | 2023.12.16 |
---|---|
(객체) 객체 활용 (0) | 2023.12.01 |
객체 개념 (1) | 2023.11.23 |
함수 활용 (0) | 2023.11.22 |
!! 함수 (0) | 2023.11.20 |