[JavaScript] 6. 객체의 종류와 생성 방법

2024년 07월 19일

Song hyun
작성자
2024.07.19.:15

728x90

[JavaScript] 6. 객체의 종류와 생성 방법

1. 자바스크립트에서의 객체

(1) 객체의 개념

-프로토타입: 객체의 속성과 메서드를 모아둔 틀 같은 것.

-인스턴스: 프로토타입으로 찍어낸 객체를 의미하는 단어이다.

=> 인스턴스는 프로토타입의 속성과 함수를 똑같이 사용한다.

=>객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)를 함께 묶어서 표현하는 자료구조이다.

(2) 내장 객체의 개념

-내장 객체(Built-in-Objects)는 자바스크립트 언어 자체에 내장되어 제공되는 객체들이다. 이런 객체들은 자바스크립트 프로그래밍에서 기본적인 기능을 제공하고, 모든 자바스크립트 환경에서 사용할 수 있다.

-내장 객체의 종류:

Object
String
Array
Number
Function
Date
Math

(3) 사용자 정의 객체의 개념

-사용자 정의 객체(User-defined Object)는 프로그래머가 직접 만들어서 사용하는 객체이다. 자바스크립트에서는 객체를 생성하고, 속성과 메서드를 정의하는 데 매우 유연하고 강력한 방법을 제공한다.

2. 객체 생성 방법

(1) new 키워드와 함께 생성자 함수를 사용

(2) 객체 리터럴 표기법(Object Literal Notation)

3. 예제 코드

(1) new 키워드와 생성자 함수를 사용한 객체 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H2>INDEX4.HTML 파일입니다.</H2>
    <SCRIPT>
        // 자바 스크립트에서의 사용자 정의 객체와 생성자 함수 설계
        function Person(firstName,lastName){
            this.firstName=firstName;
            this.lastName=lastName;
        }

        // 객체 생성
        const person1=new Person("길동","홍");
        const person2=new Person("순신","이");

        console.log(person1);
        console.log(person2);
    </SCRIPT>
</body>
</html>

(2) 객체 리터럴 표기법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H2>INDEX4.HTML 파일입니다.</H2>
    <SCRIPT>
        // 자바 스크립트에서의 사용자 정의 객체와 생성자 함수 설계
        function Person(firstName,lastName){
            this.firstName=firstName;
            this.lastName=lastName;
        }

        // 객체 생성
        const person1=new Person("길동","홍");
        const person2=new Person("순신","이");

        console.log(person1);
        console.log(person2);

        console.log("--------------");

        // 객체 리터럴 표기법(사용자 정의 프로토타입 설계)
        const student = {
            name: "John",
            age: 30,
        };

        console.log(student.name);
        console.log(student.age);

    </SCRIPT>
</body>
</html>

(3) ES6 - 객체 리터럴 표기법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H2>INDEX5.HTML 파일입니다.</H2>
    <SCRIPT>
       // ES6 - 객체 리터럴 표기법
       const person = {
        firstName: "길동",
        lastName: "홍"
       };

       person.firstName="순신";
       console.log(person.firstName);
       console.log("--------");

       const name="티모";
       name="야스오";
       console.log(name);
    </SCRIPT>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H2>INDEX5.HTML 파일입니다.</H2>
    <SCRIPT>
       // ES6 - 객체 리터럴 표기법
       const person = {
        firstName: "길동",
        lastName: "홍",
        age: 30,
        address: {
            street: '연수로 123번길',
            city: '부산',
            zip: "33123"
        }, // 객체 속의 객체 -> 중첩 객체!
        hobbies: ['독서','등산','요리','코딩'], // 배열
        sayHello: function(){
            // alert('안녕');
            // 백틱 사용 - //ES6 - 템플릿 리터럴 -> ${}
            console.log('Hello, My name is ${this.firstName} ${this.lastName}입니다');
        }
       };

       // 객체 속성에 접근하기
       console.log(person.firstName);
       console.log(person.lastName);

       // 중첩된 객체 속성에 접근하기
       console.log(person);
    </SCRIPT>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 8. 함수의 개념과 활용 (0)	2024.07.19
[JavaScript] 7. 배열의 개념과 사용 방법 (0)	2024.07.19
[JavaScript] 5. ES6와 let (0)	2024.07.18
[JavaScript] 4. var 키워드와 호이스팅에 대한 이해 (0)	2024.07.18
[JavaScript] 3. 자바스크립트의 형변환 (0)	2024.07.18

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 6. 객체의 종류와 생성 방법

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바