JavaScript 객체

백승우·2026년 2월 6일

IBM JavaScript bootcamp redhat 실습 이론

IBM x RedHat 선도기업 AI 개발교육(javascript)

목록 보기

5/13

[이론내용 정리]

객체 (Object)

객체(Object)는 현실 세계의 사물이나 개념을 표현하기 위한 자료 구조이다.
현실 세계는 객체들의 집합으로 이루어져 있으며, 자바스크립트에서도 이를 객체로 표현한다.

객체는 하나의 값으로 표현되지 않는다
여러 개의 속성(property) 과 값(value) 의 묶음으로 표현된다
객체는 여러 개의 함수를 가질 수 있으며, 이를 메소드(method) 라고 부른다

객체 예시

사람, 책상, 자동차, TV, 컴퓨터 등
예) TV 객체
- 속성: 전원, 볼륨, 채널
- 메소드: 켜기, 끄기, 채널 변경

객체의 종류

① 기본 내장 객체 (코어 객체)

자바스크립트에서 기본적으로 제공하는 객체들이다.

String : 문자 객체
Number : 숫자 객체
Math : 수학 계산 객체
Array : 배열 객체
Date : 날짜 객체
Object : 개발자 정의 객체

② BOM (Browser Object Model)

브라우저 자체를 객체로 표현한 모델이다.
브라우저 정보 제공, 새 창 생성, 화면 크기 확인 등에 사용된다.

window : 창 객체
screen : 화면 객체
history : 방문 기록 객체
location : 주소 표시줄 객체
document : 문서 객체
navigator : 브라우저 정보 객체

③ DOM (Document Object Model)

HTML 문서의 태그들을 브라우저가 객체 형태로 변환한 것이다.
웹 페이지의 내용과 모양을 제어하기 위해 사용된다.

element : HTML 태그 요소
text : 텍스트 요소

객체 선언 기본 형식

객체는 {} 중괄호를 사용하여 선언한다.
속성은 키 : 값 형태로 작성하며, 여러 개일 경우 ,로 구분한다.

let 객체명 = {
    키이름 : 키값,
    키이름 : 키값
};

객체 선언 예제

let student = {
    name : 'juli',
    age : 42,
    height : 188,
    weight : 66,
    show : function() {
        console.log(student.name);
    }
};

student.show();   // 메소드 호출

정리

변수 : 데이터 1개 저장
배열 : 데이터 여러 개 저장
객체 : 관련된 데이터를 묶어서 저장

생성자 함수

비슷한 형태의 객체를 여러 개 만들어야 할 때 사용하는 함수이다.
학생 정보, 회원 정보, 상품 정보 등을 만들 때 주로 사용된다.

생성자 함수 기본 형식

function 생성자함수명(매개변수, 매개변수, ...) {
    this.속성 = 값;
    this.속성 = 매개변수;

    this.메소드명 = function() {
        실행할 코드
    };
}

let 변수명 = new 생성자함수명(값, 값);

this : 생성자 함수로 만들어질 객체 자신을 의미
new 키워드 : 새로운 객체 생성

생성자 함수 예제

<!DOCTYPE html>
<html lang="ko">
<body>
    <script>

        // 생성자 함수 정의
        function User(name, age, grade) {
            this.name = name;
            this.age = age;
            this.grade = grade;

            this.show = function() {
                console.log(`이름은 ${name}이고 나이는 ${age}살이다`);
            };
        }

        // 생성자 함수를 이용한 객체 생성
        let n = new User('길동', 33, 'silver');
        let n2 = new User('철수', 13, 'diamond');

        n.show();
        n2.show();

    </script>
</body>
</html>