JS 14 object

23 Mar 2022

Object(객체)

demo19.html

array item은 아이템에 대한 식별자로 숫자를 사용함

data가 추가되면 배열 전체에서 중복되지 않는 index가

자동으로 만들어져 추가된 data에대한 식별자가 됨

만약 이 index로 문자를 사용하고 싶다면 객체를 사용해야 함

다른언어의 assoiative array, map, dictionary 가 객체에 해당함

object 생성

문자는 key , 숫자는 value

• key부분이 array에서 index역할

const grades = {'dotoli':10, 'zzphoo':6. 'toltol':80};

const grades = new object();
grades["dotoli"] = 10;
grades["zzphoo"] = 6;
grades["toltol"] = 80;

object 추출

const grades = { dotoli: 10, zzphoo: 6, toltol: 80 };
alert(grades["dotoli"]);
alert(grades.dotoli);
//inline code자동완성이 변수에 넣은 객체의 따옴표를 자동으로 삭제함
//코드작동은 이상없이 됨

object 추출 반복

for문사용

for (key in name)

const grades = { dotoli: 10, zzphoo: 6, toltol: 80 };
for (key in grades) {
  document.write("key: " + key + "<br>" + " value : " + grades[key] + "<br>");
}

for (const 변수 in name)

const grades = { dotoli: 10, zzphoo: 6, toltol: 80 };
for (const i in grades) {
  document.write("key 값 :" + i + " value 값 :" + grades[i] + "<br>");
}

• key값에 변수를 부여하는게 깔끔한듯

안에 함수를 담아서 추출

const grades = {
  list: { dotoli: 10, zzphoo: 6, toltol: 80 },
  //list라는 객체를 담아놓고
  //show안에 함수를 담아서 또 넣음
  show: function () {
    alert("hello world");
  },
};

grades["show"]();
//show를 호출함
//: hello world

this: 약속되어있는 변수
‘this’
가 속해있는 ‘함수’
가 속해있는 ‘객체’
를 가리키는 약속된 변수

const grades = {
  list: { dotoli: 10, zzphoo: 6, toltol: 80 },
  show: function () {
    console.log(this.list);
  },
};

grades["show"]();
//: {dotoli: 10, zzphoo: 6, toltol: 80}
// this.list가 제대로 object를 가리키고 있음 확인

this가 제대로 list를 가리키고 있는걸 확인했으니

for문으로 출력해봄

const grades = {
  list: { dotoli: 10, zzphoo: 6, toltol: 80 },
  show: function () {
    for (const name in this.list) {
      console.log(name, this.list[name]);
      //console.log안에 콤마를 통해서 여러개의 값을 출력
    }
  },
};

grades["show"]();
grades.show();

// dotoli 10
// zzphoo 6
// toltol 80

cosole대신 write로 출력해봄

const grades = {
  list: { dotoli: 10, zzphoo: 6, toltol: 80 },
  show: function () {
    for (const name in this.list) {
      document.write(name + " : " + this.list[name] + "<br>");
    }
  },
};
/*  */
grades.show();
//dotoli : 10
//zzphoo : 6
//toltol : 80

grades 라고하는 object는
list라는 data와 show라는 function을
하나의 객체안에 그룹핑,카테고라이징 한 그릇임
(list와 show는 서로 관련성이 있어야함)

이것을 ‘객체지향 프로그래밍’이라고 함
서로 연관되어있는 data와 연관되어있는 처리를
하나의 그릇안에 모아서 그룹핑 해놓은 프로그래밍 스타일 기법