생각 작업실 The atelier of thinking

34. <JavaScript> 객체(Object) 란 본문

웹(Web) 이야기

34. <JavaScript> 객체(Object) 란

knowledge-seeker 2024. 4. 25. 20:47

이번 회차에는 객체(Object)라는 개념에 대해서 알아보겠습니다.

객체란 추상적 의미로, 초보자에게는 개념잡기가 쉽지 않습니다. 객체를 한마디로 정의하면 '실제로 존해하는 사물'을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 데이터 타입이라 말할 수 있습니다.

 


1. 프로그래밍 언어의 구성

 

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 페이지를 동적으로 만들고 상호 작용할 수 있게 하는 데 사용됩니다.
자바스크립트를 비롯한 거의 모든 프로그래밍 언어는 데이터타입, 제어문, 함수, 변수 등으로 구성되어 있습니다.


만약 프로그래밍을 건물 짓는 것에 비유한다면 다음과 같이 비유할 수 있습니다:

건물을 짓기 위해 사용되는 다양한 재료들은 프로그래밍에서의 데이터 타입(Data Type)과 유사합니다. 각각의 재료들은 다른 특성과 용도를 가지고 있으며, 프로그래밍에서도 데이터 타입들은 다양한 종류의 데이터를 표현하고 처리하기 위해 사용됩니다.

건물의 구조를 결정하는 철골을 만드는 과정은 제어문과 유사합니다. 제어문은 프로그램의 흐름을 제어하고, 조건에 따라 다른 동작을 수행하여 프로그램의 구조를 결정합니다. 마치 건물의 철골이 건물의 구조를 결정하는 것처럼, 제어문은 프로그램의 구조를 결정합니다.

변수와 함수는 건물을 만들 때 사용되는 도구나 설계도와 유사합니다.
변수(Variable)는 데이터를 저장하고 관리하는 데 사용됩니다. 변수는 마치 건축 공사 현장에서 사용되는 도구와 같이, 프로그래밍에서는 데이터를 처리하고 조작하는 데 사용됩니다.
함수(Function)는 특정한 동작을 수행하는 코드 블록을 나타냅니다. 함수는 건축 설계도와 같이, 프로그램에서 특정한 작업을 정의하고 호출하여 재사용할 수 있는 코드의 모음입니다. 함수를 사용하면 프로그램을 모듈화하고 유지보수하기 쉽게 만들 수 있습니다.

이러한 비유를 통해 프로그래밍의 기본 요소들이 건축에서의 구성 요소들과 유사함을 이해할 수 있습니다. 프로그래밍도 건물을 짓는 것과 마찬가지로 다양한 요소들을 조합하여 원하는 결과물을 만들어내는 창조적인 작업입니다.


2. 데이터 타입(Data Type) - 객체(Object)

 

데이터 타입 중 기본형이 아닌 것은 객체로 분류할 수 있습니다.
객체에는 배열, 함수 등이 포함되어 있습니다.

앞서 데이터 타입은 건물을 짓기 위한 다양한 재료라고 할 수 있는데, 객체는 이러한 재료 중에 일차 가공된 자료라고 할 수 있습니다.



객체에는 배열, 함수 등이 포함되어 있습니다.

객체의 가장 큰 특징은 이름과 값으로 구성된 속성을 가진 데이터 타입이라는 것입니다.
객체는 값으로 기본형 데이터 타입 뿐만 아니라 함수도 가질 수 있습니다.


3. 객체 생성

객체는 중괄호{ , , ,}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력합니다.

 

{
키(key) : 값(value) ,
키(key) : 값(value) , ...
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체</title>
</head>
<body>
   <h2> 객체 </h2>
   <p> key : value </p>
    <script>
        let employee = {
            name : '홍길동',
            start : 2000,
            role : 'CFO',
            career : function( ) {
                return 2023 - this.start;
              }         
        }

        document.write("name : " + employee.name +'<br>')
        document.write("start : " + employee.start +'<br>')
        document.write("role : " + employee.role +'<br>')
        document.write("carrer : " + employee.career() +'<br>')

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

 


4. 속성과 메소드

객체 내부에 있는 값은 속성이라고 합니다.
객체의 속성 중에 함수 자료형인 속성을 메소드(method)라고 합니다.