자바스크립트(Javascript) - 내장 객체(built-in Object) 살펴보기

자바스크립트 내장 객체 살펴보기

자바스크립트에서 사용할 수 있는 객체에 대해 살펴봅니다. 우선 프로그래밍 언어에는 C++, 자바(Java), PHP 언어 등과 같이 클래스를 생성하고 함수를 상속할 수 있는 객체지향 언어(Object-Oriented Programming language)와 자바스크립트와 같이 그렇지 못한 객체 기반(Obeject-based) 언어가 있습니다. 객체지향과 객체 기반의 차이를 쉽게 이해하자면 객체지향언어는 클래스의 상속과 재조합이 가능한 반면 객체 기반 언어는 객체지향언어에서의 기능을 전혀 제공하지 않습니다.

파이썬도 인터프리터 언어이면서 클래스의 정의와 상속이 가능한 언어이기 때문에 객체지향 프로그래밍 언어라 할 수 있습니다. 그래서 저는 파이썬을 공부할 때 컴파일 언어인 C++과 인터프리터 언어의 장점이 두루 섞여 있다고 생각한 것 같습니다. 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어라는 것 정도로만 알아 둡니다. (코딩에 대해 조금만 관심만 갖는다면 여타 객체지향언어에 비해 비교적 쉽게 접근 가능한 언어이기도 합니다.)

 

---

자바스크립트에서 사용 가능한 객체에는 내장 객체(built-in object), 브라우저 내장 객체(Native Object), 문서 객체(Document Object Model), 그리고 사용자가 정의하고 확장시킨 객체(Host Object)가 있습니다. 우선 자바스크립트 엔진에 내장된 객체에 대해 살펴봅니다. 내장된 객체로는 문자, 날짜, 배열, 수학, 정규 표현 객체 등이 있습니다. 객체를 생성할 때는 new와 객체 생성 함수 Object()를 사용하게 됩니다.

 

<script>

var person = new Object();

person.name = "baik";

person.age = 45;

person.address ="gimhae";

person.info = function(){

document.write("person name : "+this.name+"<br>");

document.write("person age : "+this.age+"<br>");

document.write("person address : "+this.address+"<br>");

}

document.write("<h1>person 객체 출력</h1>");

person.info()

</script>

 

객체 생성후 출력

 

하나의 객체에 여러 속성을 부여함으로써 좀 더 효율적으로 변수를 관리할 수 있음을 확인합니다. 날짜 정보 객체와 속성에 대해 살펴봅니다.

 

let today = new Date();

var nowYear = today.getFullYear();

let nowMonth = today.getMonth();

var nowDate = today.getDate();

document.write(nowYear+'년'+nowMonth+'월'+nowDate+'일');

 

변수를 선언할 때 var, let을 사용했습니다. var는 동명의 변수명을 선언했을 때 맨 마지막 변수명에 아무런 에러 없이 지정 값을 입력하게 되지만 let은 동명의 변수명이 선언되면 에러를 발생시켜 변수 사용에 있어 오류를 방지할 수 있는 장점이 있습니다. 어떤 형태로 변수를 선언할지는 각자의 선택에 따릅니다. ^^;

 

new Date() 객체를 today로 생성시킨 후 today 객체 속성을 이용하여 연도, 월, 일을 각각의 변수에 입력하여 출력해 봅니다. (getMonth는 현재 월 -1로 반환하는 점 유의합니다.) Date 객체에서 사용 가능한 메서드에 대해 살펴봅니다.

 

Date 정보를 가져올 때(get)		Date 정보를 수정할 때(set)
getFullYear()	연도	setFullYear()	연도만 수정
getMonth()	월 (-1)을 가져옴	setMonth()	월
getDate()	일	setDate()	일
getDay()	요일(일:0~토:6)	날짜 정보가 수정되면 요일은 자동 수정됨
getHours()	시	setHours()	시
getMinutes()	분	setMinutes()	분
getSeconds()	초	setSeconds()	초

getTime()은 1970년 1월 1일부터 경과된 시간을 밀리 단위 초로 표기되며, setTime은 밀리 단위 초 수정할 수 있습니다.

 

var electionDate = new Date(2022,2,9),

electMonth = electionDate.getMonth()+1,

electDate = electionDate.getDate(),

electDay = electionDate.getDay();

document.write("<h1> 2022년 대통령 선거 날짜</h1>");

document.write('2022년 선거월 : '+electMonth+'<br>');

document.write('2022년 선거일 : '+electDate+'<br>');

document.write('2022년 선거 요일 : '+electDay+'<br>');

 

Date 내장객체 사용예

 

월 정보에서 0부터 시작하므로 +1을 하였습니다. 요일 정보는 0이 일요일을 의미하므로 3(수요일)을 출력하게 됩니다.

 

다음은 오늘 현재 시간을 기준으로 다음 선거일까지 남은 시간을 구하고, 그렇게 구한 시간을 남은 일(day)을 계산해 봅니다.

 

diff_Time=electionDate.getTime()-today.getTime();

diff_Day=Math.ceil(diff_Time/(60*1000*60*24));

document.write(today,"<br>");

document.write("D-day : "+diff_Day+"일 남았습니다.");

 

getTime()을 이용하여 2022년 3월 9일부터 지금 현재 시간까지의 차이 값을 구하고 그렇게 구한 시간(밀리 단위 초)을 일(day)을 구합니다.

 

다음은 자바스크립트에서 사용 가능한 수학 객체의 메서드와 상수에 대해 살펴봅니다. (수학이라기보다 산수에 가까운 함수에 대해서 살펴봅니다. ^^)

 

메서드 종류	설명	사용 예	결괏값
Math.abs(숫자)	절댓값 반환	Math.abs(-1)	1
Math.max(숫자1, 숫자2~숫자n)	최댓값 반환	Math.max(1,2,3)	3
Math.min(숫자1, 숫자2~숫자n)	최솟값 반환	Math.min(1,2,3)	1
Math.pow(숫자, 제곱값)	숫자의 거듭제곱 값 반환	Math.pow(2,3)	8
Math.random( )	0~1사이 난수 반환	Math.randon( )	0.27270
Math.round(숫자)	소수점 첫째 자리에서 반올림하여 정숫값 반환	Math.round(2.567)	3
Math.ceil(숫자)	소수점 첫째 자리에서 무조건 올림 하여 정숫값 반환	Math.ceil(2.01)	3
Math.floor(숫자)	소수점 첫째 자리에서 무조건 내림하여 정숫값 반환	Math.floor(2.99)	2
Math.sqrt(숫자)	숫자의 제곱근 값을 반환	Math.sqrt(16)	4
Math.PI	원주율 상수를 반환	Math.PI	3.14159

Math.random() 메서드를 사용하여 1~10까지의 난수를 발생 후 정수로만 반환받고 싶다면 Math.floor(Math.randow()*10)+1으로 사용합니다.

---

자바스크립트에서 사용되는 내장 객체 중 날짜 객체와 수학 객체에 대해 살펴봤습니다. 자바스크립트에서도 파이썬의 리스트와 같은 개념으로 배열을 지원하는데 그 배열에 관한 문법도 그리 어렵지 않습니다. 기존 프로그래밍 언어를 하나라도 아시는 분들은 무척 쉽게 다가올 것이고, HTML을 보신 후 이제 막 입문하시는 분들도 쉽게 따라갈 수 있는 내용들입니다. 차근차근 직접 코딩해 보며 학습을 진행해 보시길 다시 한번 권장합니다.