[JS] Object 객체

 

 

Object

 

 

 

{ key : value ,    <------ property  속성

 key : value ,

 key : value , }

 

key = property name, stirng(문자열)

value = property value , 모든 자료형(문자열, 숫자, 불린, null, 객체안에 객체도 가능)

 

 

 

> property name 주의사항

   1. 첫 글자는 반드시 문자, 밑줄(_), 달러$중 하나로 시작

   2. 띄어쓰기 금지

   3. 하이픈(-) 금지

     > 쓰고싶으면  ' ' 따옴표로 감싸줌 ( 'brand name' , 'born-Year' )

 

 

 

> 객체에서 property 값 접근

//객체 (Object)
let Object = {
  name : '객체',
  language : 'javascript',
  'born Year' : 2021,
  cats : '냥이'
  33 : '숫자'
}

let name = 'cats'


*/ 점 표기법 Dot Notation */
console.log(Object.name)   //객체   (key의 name을 인식)


*/ 대괄호 표기법  Bracket notation */
console.log(Object['born Year'])    //2021
console.log(Object[name])    //출력> 냥이  (변수name을 인식)
console.log(Object['33'])    // 숫자는 무조건 대괄호만 가능

> 점표기법은 따옴표 생략할수 없는 프로퍼티 네임 불가. (born Year띄어쓰기 있어서 점으로 접근불가)

> 존재하지않는 key 접근하려고하면 에러나는게 아니라 undefined값 출력

> 괄호표기법은 변수로 먼저 인식 / 점표기법은 변수를 사용할 수 없음(key를 인식)

 

 

// objData 라는 객체안에 name , address , books 라는 property
let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

/* HTML Guide 접근원할 때 > let bookName = objData.books.info[1].name;
console.log(bookName); */

//객체 프로퍼티에 함수
let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

//getprice 함수 호출
const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);

 

 

 

 

---

 

 

This

 > 객체 내부에서 해당 객체의 프로퍼티 접근

 > 기본값은 window

 > allow function 에서 this사용하면 window나옴

 

//this
function getName () {
 return `${user.firstName} ${user.lastName}`;
}

const user = {
 firstName : 'kim',
 lastName : 'manon',
 getName : getName,
};

const admin = {
 firstName : 'hong',
 lastName : 'kildong',
 getName : getName,
};

console.log(user.getName());   //kim manon
console.log(admin.getName());   //kim manon



//this로 수정
function getName () {
 return `${this.firstName} ${this.lastName}`;
}


console.log(user.getName());   //kim manon
console.log(admin.getName());   //hong kildong

 

 

 

---

 

 

 

인스턴스 (instance) > class통해 생성된 객체

const morning = new Car('Morning', 2000000);

 

 

class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

 

> Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요

   new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 return

 

 

 

---

 

객체 값 수정

console.log ( Object.name);    ---------'객체'  기존

Object.name = '이름'

console.log ( Object.name);    ---------'이름'  변경

 

객체 값 추가

console.log ( Object.ceo);    ---------'undefined'  기존

Object.ceo = 'manon'

console.log ( Object.ceo);    ---------'manon'  추가

 

객체 값 삭제

console.log ( Object.ceo);    ---------'manon'  기존

delete Object.ceo ;

console.log ( Object.ceo);    ---------'undefined'  변경

 

객체 값 확인

console.log ( 'ceo' in Object);

console.log ( '찾을값' in 객체명);

>불린 형태로 값 리턴 (true or false)

 

> console창에서 객체이름 Object 입력하면 객체 확인가능

 

---

 

 

 

Method 메소드

: 객체에 저장된 값이 함수인 것.

  객체의 프로퍼티는 어떤 자료형이든 저장가능하므로 프로퍼티 값으로 함수넣어줌. 

   > 이런함수를 객체의 메소드라고 부름

 

//greetings라는 객체의 세 가지 메소드 정의

let greetings = {
  sayHello : function (name) {
    console.log(`hello ${name}`);
  },
  sayHi : function() {
    console.log('Hi');
  }
};

greetings.sayHello('manon');

//출력
hello manon

> 함수이름은 생략, 프로퍼티 네임이 대신함.

 

 

 

 

메소드 사용 이유?

*/ 
그냥 함수가 아닌 메소드 사용이유? 
 > 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있음.
/*

let rectAagle = {
  width: 30,
  height: 50;
  getArea : function () {
    return rectAagle.width * rectAagle.height;
  }
}

let triAngle = {
  width: 15,
  height: 40;
  getArea : function () {
    return triAngle.width * triAngle.height /2;
  }
}

> 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있음.

   위의 예시에서 삼각형, 사각형 서로 넓이 구하는 방식다름, 똑같이 넓이 구하는 getArea함수지만

   어떤 객체의 메소드인지따라서 그 객체에 맞는 동작을 할 때 메소드 사용.

   다른 함수의 이름 중복을 피할 수도있고, 좀 더 이 객체에 집중해서 함수의 동작부분 작성가능.

   사용 시 이 객체의 고유한 동작으로 구분가능

 

// math class 생성하여 num1, num2로 매서드 생성

class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber(num1,num2) {
    return [this.num1, this.num2];
  }
  add (num1,num2) {
    return this.num1 + this.num2;
  }
}

 

 

 

 

---

 

 

for...in 반복문

for ( 변수 in 객체) {
 동작부분
}

//예시
let Object = {
  name : '객체',
  language : 'javascript',
  'born Year' : 2021
}

for (let k in Object) {
  console.log(k);
  console.log(Object[k]);
}

//출력
name
객체
language
javascript
born Year
2021

 

 

 

 

---

 

 

 

날짜 / 시간 객체

Date 생성자

 : 컴퓨터 언어에서는 GMT기준(Greenwich Mean Time)으로 시간 알려줌

   GMT+0900 (한국 표준시)

let rightNow = new Date();
console.log(rightNow);


let year = rightNow.getFullYear();      //yyyy년
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

 

 

> getTime 메서드

 : 날짜의 밀리초 표현을 반환

  반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단( 값 작으면 과거)

 

let rightNow = new Date();
let time = rightNow.getTime();