내일배움캠프 동영상 강의/내배캠_ JavaScript 문법 종합반

객체

콛 다이어리 2024. 8. 28. 01:48

객체를 생성하는 방법

let 변수 = {

    키: "문자열인 값",

    키: 숫자,

    키: true 나 false

    키: 함수,

    키: 배열

    키: 객체

};

 

let eundong = {

// 문자열

     name: "은동",

// 숫자

     age: 5,

// 불리언

     large: false,

// 함수

     function ( ) { },

};

 

// 객체(에 객체 추가)

let myDog = {

     name : "은동이",

     gender : "female",

    birthday: "180830",

    color: "white",

    white : {

    pink : "first favorite",

    purple: "second favorite"

 },

};

 

// 객체에 함수 추가

const Dongee = {

    name: "은동",

    sound: "왈왈",

   say: function say( ) {

      console.log(this.sound);

    },

  };

const cat = {

    name: "애옹이",

    sound: "애옹",

 };

 

cat.say = dog.say;

cat.say( );

 

 

생성자 함수를 이용한

객체를 생성하는 방법

function 변수 (키값1, 키값2, 키값3) {

// 함수 생성 방법과 동일

// 객체 생성

this. 키값1 = 키값1;

this. 키값2 = 키값2;

this. 키값3 = 키값3;

 

function Eundong(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let past = new Eundong("미소", 0, "who");
let now = new Eundong("은동", 6, "she");

 

console.log(past.name);

// 미소
console.log(past.age);

// 0
console.log(past.gender);

// who
console.log(now.name);

// 은동
console.log(now.age);

// 6
console.log(now.gender);

// she

 

객체 + 함수를 이용했을 때

장점

많은 객체를

한 번에 여러개 생성할 수 있음

 

객체 속성값에 접근하는 방법

변수명.키

 

메소드

객체가 가진 여러가지 기능

object.keys( )

key를 가져오는 메소드

 

let keys = Object.keys(eundong);

console.log("key=>", keys);

// [ 'name', 'age', 'color', 'male', 'function' ]

 

object.values( )

value만 뽑아서 배열로 반환하는 메서드

 

let values = Object.values(eundong);
console.log("value=>", values);
// [ '은동', 5, 'white', false, [Function: function] ]

 

object.assign( )

key와 value모두 출력하는 메서드

let newEundong = { };
Object.assign(newEundong, eundong);
console.log("newDog=>", newEundong);
// [ name: '은동', age: 5, color: 'white', large: false,

someFunction: [Function: someFunction] ]

 

 

let ifnt01 = {
  debutYear: "2010년",
  debutDate: "6월9일",
  color: "metalgolden",
  age: 14,
};
let ifnt02 = {
  debutYear: "2010년",
  debutDate: "6월9일",
  color: "metalgolden",
  age: 14,
};
console.log("answer=>", ifnt01 === ifnt02);
// false

str = "aaa";
strr = "aaa";
console.log(str === str02);
// true

 

같은 객체는 false인데 문자열은 true인 이유:

객체는 크기가 상당히 크기 때문에

메모리에 저장할 때 별도의 공간에 저장한다.

그래서

ifnt01가 가지고 있는 값은

별도 공간에 있는 주소를 저장한다.

그러면

ifnt02가 가지고 있는 값도

별도 공간에 있는 주소라는 것이다.

즉,

  debutYear: "2010년",
  debutDate: "6월9일",
  color: "metalgolden",
  age: 14

에 대한 직접적인 값을

가지고 있는 것이 아닌

저장할 때의

그 주소를 가지고 있는 것이고

ifnt02도 같은 값을 저장할 때의

주소를 가지고 있는 것이라

각 주소는 서로 다르다.

하지만,

str과 strr은 값이 별로 크지않아

직접 값을 저장하기 때문에

같다고 나오는 것이다.

 

stringify

객체를 문자열화 시키는 것

{debutYear: "2010년",
  debutDate: "6월9일",
  color: "metalgolden",
  age: 14}

이렇게 주소값으로 되어있던 것을

문자열화 시킨다는 것

console.log

(JSON.stringify(ifnt) === JSON.stringify(ifnt2));
// true

 

객체 병합(spread operator)

...배열

 

let ifnt03 = {
  debutYear: "2010년",
  age: 14,
};
let ifnt04 = {
  debutDate: "6월9일",
  color: "metalgolden",
};

let perfectIfnt = { ...ifnt03, ...ifnt04 };
console.log(perfectIfnt);
// { debutYear: ' 2010년 ', age: 14,

debutDate: '6월9일', color: 'metalgolden' }