[JavaScript] 객체

재림·2024년 5월 8일

JS 개념 정리

목록 보기

1/6

객체란?

자바스크립트는 객체(Object) 기반 언어이다.
객체는 기능과 속성을 가지고 있다.

자바스크립트에서는 이런 기능을 매서드(Method)라고 한다.
또한 객체는 속성(Property)를 가지고 있다.

객체.메서드(); // 객체의 메서드를 실행함
객체.속성; // 객체의 속성 값을 가져옴
또는
객체.속성=값; // 객체의 속성값을 바꿈

TV로 예를 들어, TV의 메서드 사용법 알아보기

TV.켜다();
TV.끄다();

메서드를 잘못 사용한 경우

TV.앞으로 전진해(); X
자동차.앞으로 전진해(); O

자바스크립트에서 TV의 너비와 색상, 속성 정보 알아보기

TV의 속성값 가져오기

TV.width;
TV.color;

TV의 속성값 바꾸기

TV.color=black;

객체의 종류

객체는 크게 내장 객체,
브라우저 객체 모델(BOM, Browser Object Model),
문서 객체 모델(DOM, Documnet Object Moder)로 나뉨

내장 객체

내장 객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우 사용할 수 있음.

문자(string), 날짜(date), 배열(array), 수학(math) 객체 등

내장 객체 생성하기

내장 객체를 생성할 때는 new라는 키워드와 생성 함수를 사용함

	참조 변수(인스턴트 이름) = new 생성 함수()

예제 1 // new 키워드와 기본 객체 생성 함수 Object()를 이용해 객체를 생성함

var tv = new Object();
tv.color = "white";
tv.price = 300000;
tv.info = function(){
  document.write("tv 색상:" + this.color, "<br>");
  document.write("tv 가격:" + this.price, "<br>");
}

var car = {
  color: "black",
  price: 500000,
  info: function(){
    document.write("car 색상:" + this.color, "<br>");
    document.write("car 가격:" + this.price, "<br>");
  }
};

document.write("<h1> tv 객체 메서드 호출 </h1>");
tv.info();
document.write("<h1> car 객체 메서드 호출 </h1>");
car.info();

결과

날짜 정보 객체

날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체(Date Object)를 생성한다. 날짜 정보 객체는 날짜와 관련된 작업을 할 때 유용하다.

현재 날짜의 정보를 제공하는 Date 객체

참조 변수 = new Date();
예) var t = new Date();

특정 날짜의 정보를 제공하는 Date 객체

참조 변수 = new Date("연/월/일");
예) var t = new Date("2001/11/02");

참조 변수 = new Date("연, 월-1, 일");
예) var t = new Date("2001,10,02");

날짜 관련 메서드

예제 1

var today = new Date();
var nowMonth = today.getMonth(),
    nowDate = today.getDate(),
    nowDay = today.getDay();

// 오늘 날짜 정보 객체를 생성하고 날짜 정보 가져오기
document.write("<h1> 오늘 날짜 정보 </h1>");
document.write("현재 월: " + nowMonth, "<br>");
document.write("현재 일: " + nowDate, "<br>");
document.write("현재 요일: " + nowDay, "<br>");

// 셍일 정보 객체를 생성하고 날짜 정보를 가져오기
var birthday = new Date(2001,11,2);
var theMonth = birthday.getMonth(),
    theDate = birthday.getDate(),
    theDay = birthday.getDay();

document.write("<h1> 생일 날짜 정보 </h1>");
document.write("재림이 생일 몇 월: " + theMonth, "<br>");
document.write("재림이 생일 며칠: " + theDate, "<br>");
document.write("재림이 생일 무슨 요일: " + theDay, "<br>");

결과 // 요일 0은 일요일

현재 날짜부터 특정 날짜까지 며칠이 남았는지 구하는 형식

남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체

밀리초로 계산한 시간값

1초 = 1,000(msc)
1분(60초) = 1,000 * 60
1시간(60분) = 1,000 * 60 * 60
1일(60분*24) = 1,000 * 60 * 60 * 24

예제2 // 현재 날짜부터 연말까지 며칠이 남았는지 확인

var today = new Date();
var nowYear = today.getFullYear();

// 올해 연말에 대한 날짜 정보 객체를 생성
var theDate = new Date(nowYear, 11, 31);
// 남은 날 = 특정 날짜 - 현재 날짜
var diffDate = theDate.getTime() - today.getTime();

var result = Math.ceil(diffDate / (60*1000*60*24));
document.write("연말 D-day: " + result + "일 남았습니다.");

결과

수학 객체

더하기, 곱하기, 나누기 등은 산술 연산자를 사용하면 됨.
하지만 최댓값, 최솟값, 반올림값 등은 산술 연산자로 구할 수 없기 때문에 수학 객체 메서드를 이용해야함.

수학 객체 메서드 및 상수

예제 1 // 수학 메서드에 숫자를 입력하여 결괏값을 반환

var num = 2.1234;

var maxNum = Math.max(10,5,8,30), //최댓값
    minNum = Math.min(10,5,8,30), //최솟값
    roundNum = Math.round(num), //소수점 첫째 자리 반올림
    floorNum = Math.floor(num), //소수점 첫째 자리 내림
    ceilNum = Math.ceil(num), // 소수점 첫째 자리 올림
    rndNum = Math.random(), //0과 1 사이의 난수 발생
    piNum = Math.PI; //원주율 상수를 반환

	document.write(maxNum, "<br>");
	document.write(minNum, "<br>");
	document.write(roundNum, "<br>");
	document.write(floorNum, "<br>");
	document.write(ceilNum, "<br>");
	document.write(rndNum, "<br>");
	document.write(piNum, "<br>");