자바스크립트 객체 사용법, 3종류 객체 핵심 정리

 

자바스크립트 객체 핵심 정리를 해보겠습니다. 내장 객체, 브라우저 객체, 문서 객체 모델에 대해 다룰 것 입니다.

 

 

이전 자바스크립트 공부 순서 글에서 언급했듯이, 자바스크립트의 가장 큰 특징은 '객체 기반 언어'라는 것 입니다.

 

객체를 이용하면 많은 것들을 힘들이지 않고 손쉽게 구현할 수 있습니다.

 

이 글에서는 객체의 개념과 종류, 객체의 기능인 '메서드'와 속성인 '프로퍼티'를 쓰는 방법을 알아보겠습니다.

 

 

 

 

객체란?

 

객체(Object)는 한마디로 '기능과 속성을 가진 사물'과 같은 것이라고 할 수 있습니다.

 

미리 만들어진 기능을 가져다가 속성을 바꿔서 사용하기만 하면 되는 템플릿이라고 생각해도 되겠습니다.

 

자바스크립트의 객체는 아래와 같이 크게 3가지로 나눌 수 있습니다.

 

• 내장 객체 : 자바스크립트 엔진에 내장되어 있는 문자, 날짜, 배열, 수학 등의 객체입니다.
• 브라우저 객체 모델(BOM) : 브라우저에 계층 구조로 내장되어있는 브라우저 관련 객체입니다.
• 문서 객체 모델(DOM) : HTML문서의 구조 안에 있는 HTML태그 이하의 모든 태그는 객체입니다.

 

 

0. 객체를 사용하는 방법

 

모든 객체는 기능과 속성을 가지며, 아래와 같이 사용합니다.

 

• 객체의 기능 사용하기 : 객체.메서드();
• 객체의 속성 사용하기 : 객체.속성; 혹은 객체.속성=값; 을 부여할 수 있습니다.

 

그러나 위와 같이 기능과 속성을 쓰는 것 만으로는 객체가 동작하지 않습니다.

 

함수를 이용해서 호출하거나, 버튼 클릭시 호출되도록 하는 등의 처리가 필요합니다. 객체의 종류가 다양해서 사용법은 조금씩 다르지만 기본 사용법은 아래와 같습니다.

 

 

객체의 생성과 호출

 

직접 내장 객체를 만들어서 사용하려면 먼저 객체를 생성하고, 변수에 참조한 후 호출해야 합니다.

 

객체를 참조한 변수는 객체를 담고 있으므로, 기존의 변수처럼 자유롭게 사용이 가능합니다

 

//기본 객체 생성 함수 new Object로 객체를 생성해 변수에 참조
let sound= new Object;

//생성한 객체에 속성 값 부여
sound.volumn="20";
sound.eq="pop";

document.write(sound.eq+"<br>"); //이렇게 변수처럼 그냥 불러서 쓸 수도 있습니다.

//객체 속성 안에 함수 만들기
sound.info= function(){
    document.write("sound의 볼륨 : "+this.volumn,"<br>");
    document.write("sound의 이퀄라이저 : "+this.eq,"<br>");
}

//생성한 객체의 함수 호출
sound.info();

 

객체를 참조한 변수명 옆에 온점(.)을 붙여 객체 속 속성을 만들거나 기존 속성값을 수정할 수 있습니다.

 

지난 CSS연재에서 봤듯이, 온점을 찍을수록 자식으로 내려가는 CSS 선택자와 비슷하죠?

 

 

단순히 불러 쓰는 것이 아니라 어떠한 행동을 하는 '함수'를 사용하려면 객체 생성자 함수를 이용합니다.

 

함수에 대한 기본적인 사용법과 객체 생성자 함수에 대해서는 아래 글을 참고해주세요.

 

자바스크립트 함수 사용법 정리

 

 

그럼 지금부터 자바스크립트 객체 3가지를 차근차근 알아보겠습니다.

 

자바스크립트가 우리를 위해 미리 만들어둔 것을 쓰려니 기대되고 즐겁네요!

 

 

 

 

1. 내장 객체

 

위에서 잠시 언급했듯이, 내장 객체는 자바스크립트 엔진에 내장된 객체입니다.

 

내장 객체에는 문자, 날짜, 배열, 수학 등이 있습니다. 하나씩 써보겠습니다.

 

날짜 객체 사용법

 

날짜 객체는 new Date로 생성하고, 날짜의 정보를 가져오거나 수정하는 메서드를 필요에 따라 이용할 수 있습니다.

 

아래 예제에서는 올해의 날짜 정보를 가져오는 getFullYear 메서드와 시간을 가져오는 getTime 메서드를 이용했습니다.

let today= new Date();
let thisYear= today.getFullYear(); //올해에 대한 날짜 정보 객체 생성

let theDate= new Date(thisYear,11,31); //12월은 11번째 인덱스
let diffDate= theDate.getTime()-today.getTime(); //말일-오늘의 날짜수 차이

let result= Math.ceil(diffDate / (60*1000*60*24)); //1000밀리초*60(1분) * 60(분)*24(시간) =1일 단위 표시
document.write("올해 말일 D-DAY : "+result+"일 남았습니다.");

 

참고로 Math.ceil 메서드는 반올림을 해주는 메서드인데, 오늘 날짜까지 포함하기 위해 사용하였습니다.

 

날짜 객체 메서드

 

더욱 다양한 날짜 객체 관련 메서드는 MDN date 생성자 왼쪽 카테고리 메뉴에 쭉 나와있으니 참고하시기 바랍니다.

 

 

 

 

수학 객체 사용법

 

수학 객체도 내장 객체이며, 복잡한 계산을 하는게 아니라도 위와 같이 반올림을 하는 등 원하는 값을 얻기 위해서 알아둘 필요가 있습니다.

 

수학 객체는 산술 연산자로 계산이 가능한 더하기, 빼기, 곱하기, 나누기, 나머지 값 구하기 이외에도 모든 수학적인 계산을 할 수 있습니다.

 

산술 연산자를 쓰는 방법이 가물가물하다면 지난 글을 참고해주세요.

 

연산자 7종류 핵심 정리

 

수학 객체 메서드

 

다음은 대표적인 수학 객체 메서드들 입니다. 외울 필요는 전혀 없고, 필요할 때 '이런거 있었는데' 하면서 가져다 쓸 수 있으면 됩니다.

 

• 숫자의 절대값 반환 : Math.abs(숫자)
• 숫자 중 가장 큰 값 반환 : Math.max(숫자1, 숫자2, 숫자3, 숫자4)
• 숫자 중 가장 작은 값 반환 : Math.min(숫자1, 숫자2, 숫자3, 숫자4)
• 숫자의 거듭제곱값 반환 : Math.pow(숫자, 제곱값)
• 0~1사이의 랜덤한 숫자 반환 : Math.random()
• 소수점 첫째자리에서 반올림한 정수 반환 : Math.round(숫자)
• 소수점 첫째자리에서 무조건 올림한 정수 반환 : Math.ceil(숫자)
• 소수점 첫째자리에서 무조건 내림한 정수 반환 : Math.floor(숫자)
• 숫자의 제곱근값 반환 : Math.sqrt(숫자)
• 원주율 상수 3.14를 반환 : Math.PI

 

많이 쓰이는 것은 굵은 글자로 표시했습니다. 상황에 따라 사용하시면 되고, 사용법은 위에서 설명한 기본 사용법처럼 변수에 참조해서 값을 불러내면 됩니다.

 

이 중에서 가장 많이 쓰이는 소수점 처리를 예시로 알아보겠습니다.

 

let num= 4.5947;

let roundNum= Math.round(num),
    ceilNum= Math.ceil(num),
    floorNum= Math.floor(num);

document.write("첫째자리 반올림은 "+roundNum+"<br>");
document.write("첫째자리 무조건 올림은 "+ceilNum+"<br>");
document.write("첫째자리 무조건 내림은 "+floorNum);

 

 

추가로, 랜덤한 난수를 0~1이 아니라 원하는 숫자 범위로 발생시키는 방법이 있습니다.

 

let randomNum= Math.ceil(Math.random()*4); //1~4발생

document.write(randomNum+"<br>");

if(randomNum==1){
    document.write("1이 나왔습니다.")
}
if(randomNum==2){
    document.write("2가 나왔습니다.")
}
if(randomNum==3){
    document.write("3이 나왔습니다.")
}
if(randomNum==4){
    document.write("4가 나왔습니다.")
}

 

Math.random을 Math.ceil로 감싼 것은 1부터의 정수를 발생시키기 위한 것이고, 4를 곱하면 1부터 4까지의 난수가 발생하게 됩니다.

 

1부터가 아니라 0부터로 하려면 Math.floor를 쓰면 됩니다.

 

특정한 숫자를 최소값으로 하려면, Math.ceil(Math.random)*최대값에서 최소값을 빼고 1을 더한 값)+최소값; 이라고 하면 됩니다.

 

수학 객체는 이정도면 충분한 것 같습니다. 수학 객체에 대해서 더 자세히 알아볼 필요가 생기면 따로 글을 쓰도록 하겠습니다.

 

 

 

 

배열 객체 사용법

 

배열이라고 들어보셨나요? 말 그대로 데이터를 나눠서 쭉 나열해놓은 것을 말합니다.

 

데이터를 차례대로 나열해서 저장하기 때문에, 배열은 데이터 베이스의 핵심이자 꽃 인것 같습니다. 안쓰이는 곳이 없어요.

 

배열 생성, 불러오기

 

배열을 생성하는 방법은 3가지가 있는데, 데이터가 많지 않다면 3번째 방법이 가장 간결하고 좋은 것 같습니다.

 

//1. 한줄한줄 쓰기
let arr= new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;
document.write(arr[0]);

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

//2. 소괄호 안에 차례로 쓰기
let arr2= new Array(4,5,6)
for(let i=0; i<arr2.length; i++){
document.write(arr2[i]);
}

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

//3. 대괄호 안에 차례로 쓰기
let arr3= [7,8,9];
for(let k=0; k<2; k++){
document.write(+arr3[k]);
}

 

불러오는 방법은 [0]이렇게 인덱스 번호를 직접 호출할 수도 있고, for문을 써서 배열의 길이만큼 불러올 수도 있고, 특정 인덱스 번호와 비교해서 거기까지만 불러올 수도 있습니다.

 

그렇다면 2~3까지의 인덱스에 해당하는 데이터만 가져오려면 어떻게 할까요? 아래에서 slice를 사용하면 됩니다.

 

배열 객체 메서드

 

다음은 배열 객체의 대표적인 메서드와 속성입니다.

 

• 특정 문자로 연결된 1개의 문자형 데이터 반환 : join("연결할 문자")
• 데이터의 순서롤 거꾸로 바꿔서 반환 : reverse()
• 데이터를 오름차순으로 정렬 : sort()
• 데이터를 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져오기 : slice(인덱스 번호, 인덱스 번호)
• 2개의 배열을 하나로 결합 : concat()
• 마지막 인덱스 데이터 삭제 : pop()
• 마지막 인덱스에 새 데이터 삽입 : push(새 데이터)
• 첫번째 인덱스 데이터 삭제 : shift()
• 맨 앞 인덱스에 새 데이터 삽입 : unshift(새 데이터)
• 배열에 저장된 총 데이터의 개수 반환 : length

 

이 중에서 가장 많이 쓰는 것은 아무래도 length인 것 같습니다.

 

위에 나온 메서드를 사용하는 방법은 간단합니다. 배열을 만들고 변수에 참조하여, 변수명 옆에 온점(.)을 찍고 변수명으로 호출하면 됩니다.

 

그럼 간단하게, 위에서 궁금했던 인덱스 범위만큼 가져오는 방법인 slice를 써보겠습니다.

 

let arr4=[10,11,12,13,14]; //0~5인덱스
document.write(arr4.slice(1,3)); //1이상 3이하 인덱스=1,2

 

여담이지만 이렇게 배열을 삭제하고 삽입하는 등의 개념은 앞으로 배울 mysql에서도 동일하게 하게 되는 일일 것 이니 익숙해지면 좋을 것 같습니다.

 

 

 

 

문자열 객체 사용법

 

문자열 객체는 문자열 데이터를 객체로 취급하는 것입니다.

 

문자는 웹이든 앱이든 어떠한 서비스를 만들 때 가장 많이 쓰이는 요소이기 때문에, 그만큼 문자열 객체와 관련된 메서드가 많습니다.

 

문자열 객체 생성

 

문자열 객체를 생성하는 방법은 2가지가 있는데, 2번째 방법처럼 변수에 담으면 곧바로 문자열 객체가 된다니 신기하군요.

 

//1. 문자열 객체 생성하고 변수에 참조
let munja1= new String("문자열 객체의 내용입니다.");
document.write(munja1+"<br>")

//2. 참조 변수에 바로 문자열 작성
let munja2= "이렇게 그냥 바로 써도 문자열 객체가 됩니다.";
document.write(munja2)

 

문자열 객체 메서드

 

다음은 문자열 객체의 메서드와 속성입니다. 필요할 때 기억할 수만 있으면 되니까 훑어보기만 하세요.

 

• 인덱스 번호에 해당하는 문자를 반환 : charAt(인덱스 번호)
• 왼쪽부터 문자를 검색해 가장 먼저 일치하는 인덱스 번호 반환 : indexOf("검색할 문자") 또는 search("검색할 문자")
• 오른쪽부터 문자를 검색해 가장 먼저 일치하는 인덱스 번호 반환 : lastIndexOf("검색할 문자")
• 왼쪽부터 문자를 검색해 가장 먼저 일치하는 문자 반환 : match("찾을 문자")
• 왼쪽부터 찾을 문자를 찾아 가장 먼저 찾은 문자를 새 문자와 바꾸기 : replace("검색할 문자","새로 바꿀 문자")
• a지점부터 b지점까지 문자 또는 인덱스 번호로 문자 반환 : 전자는 slice(a,b) 후자는 substring(a,b)
• a지점부터 원하는 문자수만큼 반환 : substr(a, 문자수)
• 지정한 문자를 기준으로 문자를 나눠 배열로 반환 : split("지정할 문자")
• 알파벳을 모두 소문자로 바꾸기 : toLowerCase
• 알파벳을 모두 대문자로 바꾸기 : toUpperCase
• 문자열의 문자수 반환 : length
• 문자열에 새 문자열 결합 : concat("새 문자열")
• 문자 앞 뒤 공백 제거 : trim()

 

length와 concat 등은 앞서 배열 메서드와 이름이 같으니 까먹을 일이 없겠습니다.

 

사용법은 먼저 문자열 객체를 변수에 참조해 만들고, 변수명 옆에 온점(.)을 찍어 메서드를 실행하면 되겠습니다.

 

만약 우리가 웹사이트를 운영하는데, 사용자가 회원가입을 할 때 잘못된 입력값을 쓰면 데이터 관리가 힘들 것 입니다.

 

이럴 때 문자열 객체 메서드인 indexOf로 필수 항목이 입력되었는지 유효성 검사를 해서, 올바른 양식으로 입력하도록 경고창을 띄우거나 완료 버튼을 비활성화 할 수 있을 것 입니다.

 

let userEmail= prompt("이메일 주소를 입력해주세요","");
let arrURL= ["co.kr","com","net","or.kr","go.kr"];

let check1= false;
let check2= false;

if(userEmail.indexOf("@")>0){check1=true;} //@를 썼으면 체크1 통과

for(let i=0; i<arrURL.length; i++){ //5개 배열만큼 반복해서 체크

    if(userEmail.indexOf(arrURL[i])>0){ //배열 주소와 입력한 메일 주소가 일치하면 체크2 통과
        check2= true;
    }
}

if(check1&&check2){ //체크1과 체크2를 모두 만족하면
    document.write("정상적으로 입력되었습니다. "+userEmail);
}
else{
    alert("이메일 형식이 잘못되었으니 다시 입력해주세요.");
}

 

 

줄인다고 줄였는데, 생각보다 글이 길어져서 나머지 2가지 객체는 따로 글을 써서 링크해두도록 하겠습니다.

 

 

 

 

2. 브라우저 객체 모델(BOM)

 

크롬이나 사파리같은 브라우저의 기능을 사용할 수 있는 객체들이 있습니다.

 

 

3. 문서 객체 모델(DOM)

 

HTML문서 안의 img의 주소를 바꾼다던지, 요소의 크기나 배경색을 바꾸는 등 HTML문서를 자유자재로 제어할 수 있는 객체와 속성들이 있습니다.

 

 

여기까지 자바스크립트 객체 사용법과 3가지 종류(내장 객체, 브라우저 객체 모델, 문서 객체 모델)에 대해 알아보았습니다. 읽어주셔서 감사합니다.