[JS] 객체, 프로토타입, property

[JS] 객체, property

자바스크립트에서 객체를 알아본다.

객체의 고유한 속성은 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다.

자바스크립트에서 객체는 타 언어(자바, 파이썬, C, 등)에 비해 자주 사용되지는 않는다.

추후에 배울 JSON타입의 데이터를 추출할 때 사용하거나, Ajax 통신으로 여러 개의 값을 서버에 전달할 때 {}로 묶어서 전달하는 방식으로 사용된다.

목차

1. 자바스크립트 객체 생성방법
2. 자바스크립트 객체 프로퍼티(property)
3. 객체 접근방법
4. 프로토타입
5. 자바스크립트 객체의 유형 - 코어 객체
6. 코어 객체 - Date타입

---

자바스크립트 객체 생성방법

자바스크립트에서 객체를 생성하는 방법은 변수를 선언할 때와 유사한 형태로 작성한다.

 

var 객체명 = {
	키:값,
    키:값,
    ...
}

위의 형식으로 선언한다.

자바의 map구조와 매우 유사하다.

---

자바스크립트 객체 프로퍼티(property)

프로퍼티(property)란 객체의 고유한 속성을 나타낸다.

예를들어,

var person = {
	name:"heekng",
    phoneNum:"01012341234",
    address:"경기도 평택"
}

위의 객체를 선언하였다면, [name:"heekng"], [phoneNum:"01012341234"], [address:"경기도 평택"] 각각이 프로퍼티이다.

또한, 자바스크립트 객체의 프로퍼티 값에는 메소드가 들어갈 수 있다.

var person = {
	name:"heekng",
    phoneNum:"01012341234",
    address:"경기도 평택",
    showPerson: function(){
    	var data = this.name + "의 주소는 " + this.address + "입니다.";
        return data;
    }
}

위처럼 해당 객체의 키가 메소드의 식별자가 되고, 값부분에 function(){내용}; 의 형태로 작성이 가능하다.

---

객체 접근방법

객체를 생성하고, 해당 객체의 프로퍼티에 접근할 때에는 객체명.프로퍼티키의 형태로 접근한다.

See the Pen BaQppmr by Heekng (@heekng) on CodePen.

위처럼 객체명.키 의 형태로 작성하였을 때 리턴되는 값은 프로퍼티의 키에 해당되는 값이 리턴된다.

---

프로토타입

객체를 생성할 때 매번 똑같은 형식의 객체를 반복해서 생성할 경우, 프로토타입을 이용하여 객체의 틀을 만들 수 있다.

프로토타입은 생성자와 같은 역할을 한다.

function 프로토타입(매개변수1, 매개변수2, ...){
	this.매개변수1 = 매개변수1;
    this.매개변수2 = 매개변수2;
    ...
}

위의 형태로 작성하여 이용한다.

위에서 이용했던 예시를 예로 들면,

See the Pen BaQpWRE by Heekng (@heekng) on CodePen.

위와 같이 사용하여 메소드를 사용하여 객체를 생성할 수 있다.

---

자바스크립트 객체의 유형 - 코어 객체

코어 객체란 자바스크립트에서 기본적으로 제공하는 객체타입이다.

Array, Date타입 등이 존재하며, 웹 페이지나 웹 서버 응용프로그램 어디서나 사용할 수 있다.

코어 객체의 생성은 항상 new 키워드를 사용한다.

---

코어 객체 - Date타입

Date타입 객체는 날짜와 시간을 표현한다.

객체 생성할 때에는 var 객체명 = new Date(); 의 형태로 작성한다.

객체를 생성하면, 생성된 현재를 기준으로 객체 값이 결정된다.

 

Date.get 메소드

Date객체의 값을 가져오는 메소드는 다음과 같다.

객체명.getFullYear() //4자리 년도 리턴
객체명.getMonth() //0~11사이의 정수 리턴(0:1월, 1:2월, ...)
객체명.getDate() //한 달 내의 날짜 리턴(해당 월의 일)
객체명.getDay() //한 주 내 요일을 정수로 리턴(일요일을 시작으로 일요일:0)
객체명.getHours() //0~23사이의 정수 리턴
객체명.getMinutes() //0~59사이의 정수 리턴
객체명.getSeconds() //0~59사이의 정수 리턴
객체명.getMilliseconds() //0~999사이의 정수 리턴
객체명.getTime() // 1970년 1월1일 0시 0분 0초 기준 현재까지 경과된 밀리초 리턴

Date.set 메소드

Date객체의 값을 설정하는 메소드는 다음과 같다.

객체명.setFullYear(year) //년도 저장
객체명.setMonth(month) //월 저장
객체명.setDate(date) //한 달 내의 날짜 값 저장
객체명.setHours(hour) //시간 저장
객체명.setMinutes(minute) //분 저장
객체명.setSeconds(second) //초 저장
객체명.setMilliseconds(ms) //밀리초 저장
객체명.setTime(t) //밀리초 단위인 t값으로 시간 저장

그 외의 Date객체 메소드

객체명.toUTCString() //UTC문자열로 리턴
객체명.toLocaleString //로컬 표현의 문자열로 리턴
객체명.toLocaleTimeString //로컬 시간 표현