객체

객체

1. 여러 개의 값을 가지는 자료구조
2. 값은 이름 : 값 쌍으로 기록 => {key, property, name etc : value}
3. 일반적으로 const로 선언

정의

1. 객체 리터럴을 사용하여 정의
- const person = {firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"};
2. 공백, 줄바꿈 무관
3. 여러 줄에 걸쳐 객체 정의 가능
- const person = {
firstName : "John", 
lastName : "Doe", 
age : 50, 
eyeColor : "blue",
};

 

 

객체 생성자

1. 생성자 함수의 이름 첫 글자는 가급적 대문자 지정
(below the 'this' is to Person. The reason why put this bc if the Function's name has been changed. + 
The parameter be written by the Person's order. => 중간에 공백으로 채워서 넣을것)

function Person(first, last, age, eyes) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyes;
}

cost myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML = 
"My father is" + myFater.age +".";

 

 

 

 

속성

1. 이름:값의 쌍

 

 

속성 엑세스

2가지

1. objectName.propertyName
2. objectName.["propertyName"] (*반복문을 사용하려고 만들어진 방법)



2. 생성자 함수에 속성 추가
function Person(first, last, age, eyes, nationality) {
this.firstName = first,
this.Lastname = last,
this.age = age,
this.eyeColor = eyes,
this.nationality=nationality, ==> 생성자 추가
};

 

3. 프로토타입 상속

- Person.prototype.nationality = "English";
document.getElementById("demo").innerHTML =  "The nationality of my fater is " + myFather.nationality;

 

4. prototype 속성을 이용한 메서드 추가

Person.prototype.name = function( ) {
  return this. firstName + " " + this.lastName;
};

myFather.name( )

 

 

속성 추가

1. 단순히 값을 지정하여 기존 객체에 새 속성 추가

방식1) person.nationality = "English";

- const person = {
firstName : "John", 
lastName : "Doe", 
age : 50, 
eyeColor : "blue",
};

person.nationality = "English"
console.log(person);
=>  {
firstName : "John", 
lastName : "Doe", 
age : 50, 
eyeColor : "blue",
nationality = "English"
};

방식2) prototype

2-1) 직접 값 기입

Person.prototype.nationality = "English";
console.log(myFather.nationality);

2-2) function ( )도 추가 가능

Person.prototype.name = function( ) {
   return this.firstName + " " + this.lastName; ==> 필요할 때만(event가 발생할때만) return 할려면 function ( )으로 작성
(여기 'return'은 name으로 값을 반환 한다.)

 

 

속성 삭제

1. delete 키워드 : 속성과 값을 모두 삭제

const person = {
firstName : "John", 
lastName : "Doe", 
age : 50, 
eyeColor : "blue",
};


==> delete person.age;   or   delete person["age"]; >>> 속성 완전 삭제
==> person.firstName =""; >>>빈 값으로 return

 

 

중접 객체 엑세스

1. 객체의 값에 다른 객체 사용
my Obj = {
name : "John",
age : 50, 
cars:{
  car1 : "Ford",
  car2 : "BMW",
  car3 : "Benz"
  }
};

 

2. 점(.) 표기법 또는 대관호 표기법을 사용하여 중첩된 객체에 액세스

- myObj.cars.car2;
- myObj.cars["car2"];
- myObj.["cars"]["car2"];
- myObj["cars"].car2;
- let p1 = "cars";
  let p2 = "car2";
  myObj[p1][p2];

 

객체 메서드

1. 객체에 대해 수행할 수 있는 작업

2. 함수방식과 속성(접근자) 방식
fullName : function () {  }
- person.fullName( )  =>> 함수 방식

3. 메소드 방식(get, set)
 get fullName( ) { }
- person.fullName

 

person.fullName () => function ( )의 return 값 호출
person.fullName => 함수 공식이 호출

 

 

*객체 접근자

1. get:객체 속성값(value) 가져오기

- const person ={
firstName: "John",
lastName : "Doe",
age : 50,
get fullName( ){
  return this.firstName+ " " +this.lastName;
  } 
}

console.log(person.fullName);

 

 

2. set : 객체 속성값 변경(정의)하기

- const person ={
firstName: "John",
lastName : "Doe",
language: "";
set lang(lang){
  this.language = lang;
  } 
}

person.lang = "en";
document.getElementById("demo").innerHTML = person.language

 

속성 방식 vs  함수 방식

<함수 방식>

function (parameter) { 

 } 
=> ( parameter )에 값을 넣어서 변경

<속성 방식>

lang(lang)
person.language ="en";

 

 

 

객체의 반복

*객체 반복(for... in)

const myObj = {

fname : "john",

lname : "Doe",

age :30,

cars: {name :"Ford", models : "Fiesta", color : "green"}

}

 

1. x는 속성 반환

for ( let i in Obj.cars) {
 console.log(i);} => 키(key), 속성(property)

 

2. 속성값 반환 : 속성 반환 변수 [객체를 담은 변수]

for ( let i in Obj.cars) {
 console.log(Obj.cars[i]);} => 값(value)

 

 

 

const myObj = {
  fname : "john",
  lname : "Doe",
  age :30,
  cars:[
    {name :"Ford", models : ["Fiesta", "Forcus", "Mustang"]},
    {name :"BMW", models : ["320", "X3", "X5"]},
    {name :"Benz", models : ["E300", "S500"]},
  ]
}

 

 

for (let i in myObjc.cars) {
  x += myObjc.car[i].name; =>> cars'name 나열
  for( let j in myObj.car[i].models){
    x +=myObj.cars[i].models[j];  ==> model of car's name 나열  
  }
}

console.log(txt);

 

 

객체 반복(for ... in)

const myObj = {
  fname : "john",
  lname : "Doe",
  age :30,
 cars:[
  {name :"Ford", models : ["Fiesta", "Forcus", "Mustang"]},
  {name :"BMW", models : ["320", "X3", "X5"]},
  {name :"Benz", models : ["E300", "S500"]},
]

배열순서

 

각 배열 안 객체 정보

 

 

var t= "";

for (let i in myObj.cars) {

   t += myObj.cars[i].name;

   for( let j in myObj.cars[i].models){

    t +=myObj.cars[i].models[j];

   }

}