[JavaScript] 객체

객체의 선언 및 호출

   : 중괄호 {}를 사용하여 객체를 생성하고, {} 안에 객체에서 필요로 하는 속성들을 정의한다.

  - 속성값에 모든 자료형들의 값을 담을 수 있다.

  - 속성: key와 value 형태로 정의한다.

  - Java의 HashMap과 유사하다.

var 변수명 = {
    속성명1:속성값1,
    속성명2:속성값2,
    ...
};

 

 

  - 객체 내부 속성에 직접적으로 접근하는 방법

   : 방법1. 객체명['속성명']

var product = {
    pName:"냉장고",
    pCompany:"LG",
    pColor:["silver", "white", "black"]
};

divE.innerHTML += product['pName'] + "<br>";  // 냉장고
divE.innerHTML += product['pCompany'] + "<br>";  // LG
divE.innerHTML += product['pColor'] + "<br>";  // silver,white,black

 

   : 방법2. 객체명.속성명

divE.innerHTML += product.pName + "<br>";  // 냉장고
divE.innerHTML += product.pCompany + "<br>";  // LG
divE.innerHTML += product.pColor + "<br>";  // silver,white,black

 

 

  - 객체 생성 시 특이 케이스

   : 속성명을 제시할 때 공백이나 특수문자가 포함될 경우에는 반드시 문자열 형태로 제시해야 한다.

var food = {
    "food name":"떡볶이",
    "price!":"3000"
};

divE.innerHTML = food["food name"] + "<br>";
divE.innerHTML += food["price!"] + "<br>";

 

 

 

 

객체에서의 반복문

   : 객체가 가진 모든 속성들에 순차적으로 접근할 땐 반복문을 제시한다. 

       단, for in문을 사용해야 한다.(단순 for loop문으로는 불가)

let product = {
    pName:"TV",
    pCompany:"LG",
    pInch:"64",
    isAS:"true"
};

for(let key in product){
    divE.innerHTML = product[key] + "<br>";
    // product.key로 작성하면 key라는 변수를 찾기 때문에 
    // product[key]라고 작성해야 product의 key의 value값을 반환한다.
}

 

 

 

 

객체의 메소드 속성

   : 객체의 속성 중 함수 자료형인 속성을 메소드라고 한다.

var name = "김아무개";
var cat = {
    name:"애옹이",
    kind:"코리안숏헤어",
    feed:function(food){
        divE.innerHTML = this.kind+"인 "+this.name+"가 "+food+"를 먹는다." 
        // 코리안숏헤어인 애옹이가 사료를 먹는다.
    }
};
cat.feed("사료");

 

 

 

 

in과 with 

  - in: 객체 내에 해당 속성이 있는지 확인한다. 속성이 존재하는 경우 true, 아니면 false로 반환된다.

  - with: with()에 객체명을 작성하면 내부에서 객체명을 제시하는 것을 생략할 수 있다.

             속성을 추가하는 것은 불가능하고, 속성값을 가져오는 것만 가능하다.

var name = document.getElementById("name").value;
var topic = document.getElementById("topic").value;
var score = Number(document.getElementById("score").value);

var student = {
    name:name,
    topic:topic,
    score:score,
    toString:function(){
        return this.name + " " + this.topic + " " + this.score;
     }
};

// student 객체 내에 name, topic, cash라는 속성이 있는지?
area5.innerHTML += "name" in student + "<br>";  // true
area5.innerHTML += "topic" in student + "<br>";  // true
area5.innerHTML += "cash" in student + "<br>";  // false

with(student){
    area5.innerHTML += "조 이름 "+student.name+"<br>";
    area5.innerHTML += "toString"+student.toString+"<br>";  // student 생략 가능
}

 

 

 

 

객체의 속성 추가 및 제거

  - 추가: 객체명.속성명 = 속성값;

  - 제거: delete(객체명.속성명);

 

 

 

 

생성자 함수

   : new 키워드로 객체를 생성할 수 있는 함수(함수명을 제시할 때 첫 글자를 대문자로 작성한다.)

function vari(){
var student1 = new Student("김아무개", 87, 90, 100, 94);
    var student2 = new Student("박아무개", 90, 76, 90, 84);
    var student3 = new Student("최아무개", 100, 82, 80, 95);

    var students = [student1, student2, student3];

    for(var i in students){
        document.getElementById("divE").innerHTML += students[i];
    }
}

// 생성자 함수
function Student(sName, kor, eng, math, sci){
    this.sName = sName;
    this.kor = kor;
    this.eng = eng;
    this.math = math;
    this.sci = sci;
    
    // 메소드 속성 정의
    this.getSum = function(){
        return this.kor + this.eng + this.math + this.sci;
    }
    this.getAvg = function(){
        return this.getSum()/4;
    }
    this.toString = function(){
        return "이름: " + this.name + " 총점: " + this.getSum() + " 평균: " + this.getSum()/5;
    }
}

 

 

 

 

Date 내장 객체

◈ 현재 날짜 및 시간

let date = new Date();

 

◈ 지정한 날짜

   : 반환하려는 월에서 -1을 해야한다.

// 2022년 4월 1일
let date2 = new Date(2022, 3, 1);

 

◈ ms(밀리세컨초)

   : 1s = 1000ms

// 2022년 4월 1일 12:00:00:05
let date3 = new Date(2022, 3, 1, 12, 00, 00, 5000);

 

◈ 연도

   : .getFullYear()

 

◈ 월

   : .getMonth()

  - 월에 +1을 해야한다.

 

◈ 일

   : .getDate()

 

◈ 요일

   : .getDay()

 

◈ 시

   : .getHours()

 

◈ 분

   : .getMinutes()

 

◈ 초

   : .getSeconds()