[JavaScript] 객체, 속성, 메서드, 클래스, 네임스페이스란?

자바스립트를 공부하다보면 자연스럽게 습득하는 개념들이지만 막상 질문을 받으면 명확히 대답하기 어려운 개념인 것 같아 정리해보았습니다. 자바스크립트를 잘 다룬다는 것은 객체를 잘 설계할 줄 아는 것 같습니다. 나중에 기회가 된다면 객체 코드를 깊이있게 뜯어보고 싶습니다.

---

자바스크립트는 '객체 기반' 언어라고 불릴 만큼 객체(Object)가 핵심적인 역할을 합니다. 데이터와 기능을 묶어 관리할 수 있게 해주는 객체는 자바스크립트 프로그래밍의 기본 단위입니다. 이 글에서는 JavaScript 객체의 기본 개념인 속성과 메서드, 객체를 생성하는 다양한 방법, 그리고 네임스페이스로의 활용까지 담백하게 알아보겠습니다.

1. 자바스크립트 객체(Object)란?

자바스크립트에서 객체는 이름(Key)과 값(Value)으로 구성된 속성(Property)들의 집합입니다. 원시 값을 제외한 거의 모든 것인 함수, 배열 등이 객체로 취급됩니다.

객체는 현실 세계의 '사물'이나 '개념'을 코드로 표현하는 데 사용됩니다. 예를 들어 '사람'이라는 객체는 '이름', '나이' 같은 상태와 '걷다', '말하다' 같은 기능을 가질 수 있습니다.

2. 속성(Property) / 메서드(Method)

객체는 크게 두 가지 구성 요소를 가집니다. 먼저 속성(Property)은 객체의 상태나 데이터를 나타냅니다. 이름(Key)과 값(Value)이 하나의 쌍을 이루며, 이 값에는 숫자나 문자열뿐만 아니라 배열이나 다른 객체까지도 담을 수 있습니다. 반면, 메서드(Method)는 객체의 동작이나 기능을 담당합니다. 기술적으로는 속성의 값에 함수가 할당된 것을 특별히 '메서드'라고 부르며, 이 함수 내부에서는 this 키워드를 통해 객체 자신의 다른 속성이나 메서드에 접근할 수 있다는 특징이 있습니다.

const person = {
  // 속성 (Property)
  name: "Alice",
  age: 30,

  // 메서드 (Method)
  greet: function() {
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
  }
};

console.log(person.name); // "Alice" (속성 접근)
person.greet(); // "안녕하세요, 제 이름은 Alice입니다." (메서드 호출)

3. 객체를 생성하는 다양한 방법

자바스크립트에서는 객체를 만드는 여러 가지 방법을 제공합니다. 각 방법은 사용되는 맥락과 목적에 따라 장단점을 가집니다.

3.1. 객체 리터럴 (Object Literal)

가장 간단하고 직관적인 방법입니다. 중괄호({}) 안에 키와 값을 직접 정의하여 객체를 생성하며, 단 하나의 객체를 생성할 때 주로 사용됩니다.

const cat = {
  name: "나비",
  color: "치즈"
};

3.2. 생성자 함수 (Constructor Function)

동일한 구조를 가진 여러 객체를 생성해야 할 때 사용하는 '틀'입니다. 일종의 객체 생성 공장이라고 볼 수 있습니다.

생성자 함수를 만들 때는 몇 가지 관례가 있습니다. 먼저, 일반 함수와 구분하기 위해 함수 이름의 첫 글자를 대문자로 작성합니다. 함수 내부에서는 this 키워드를 사용하여 앞으로 생성될 객체의 속성을 정의합니다. 이렇게 정의된 '틀'은 new 연산자와 함께 호출되어야 비로소 새로운 인스턴스(객체)를 생성합니다.

// 생성자 함수 (객체의 '틀')
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}.`);
  };
}

// 'new'를 통해 객체(인스턴스) 생성
const person1 = new Person("Bob", 25);
const person2 = new Person("Charlie", 40);

person1.greet(); // "Hello, I'm Bob."
person2.greet(); // "Hello, I'm Charlie."

3.3. 클래스 (Class)

ES6(2015)부터 도입된 문법으로, 생성자 함수를 더 명확하고 구조적으로 사용할 수 있게 해주는 Syntactic Sugar입니다. 내부 동작 원리는 생성자 함수와 프로토타입에 기반하지만, 다른 객체 지향 언어(Java, C# 등)에 익숙한 개발자에게 더 친숙한 문법을 제공합니다. 클래스는 class 키워드를 사용하여 선언하며, 객체가 생성될 때 속성을 초기화하는 역할은 constructor라는 이름의 특별한 메서드가 담당합니다. 또한 생성자 함수와 달리, 클래스 내부에 메서드를 정의할 때는 function 키워드를 생략하고 더 깔끔한 문법으로 작성할 수 있습니다.

// 클래스 (Class)
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}.`);
  }
}

// 'new'를 통해 객체(인스턴스) 생성
const person1 = new Person("David", 33);
person1.greet(); // "Hello, I'm David."

---

4. 네임스페이스 (Namespace)와 객체

네임스페이스는 코드 내에서 변수나 함수 이름이 서로 충돌하는 것을 방지하기 위해 관련된 기능들을 하나의 공간(이름) 아래에 묶는 기법입니다. 자바스크립트에는 원래 네임스페이스를 위한 별도 문법이 없었기 때문에, 개발자들은 전역(Global) 스코프를 오염시키지 않기 위해 객체(Object)를 네임스페이스처럼 활용했습니다.

// 1. 안 좋은 예: 전역 스코프 오염
// (다른 스크립트 파일에서 동일한 이름의 변수/함수를 사용하면 덮어쓰기 됨)
const version = "1.0";
function utils_formatDate(date) {
  // ...
}

// 2. 좋은 예: 객체를 네임스페이스로 활용
// 'MyApp'이라는 하나의 전역 객체만 사용
const MyApp = {
  version: "1.0",
  utils: {
    formatDate: function(date) {
      // ...
    },
    parseUrl: function(url) {
      // ...
    }
  },
  ui: {
    render: function() {
      // ...
    }
  }
};

// 사용법
console.log(MyApp.version);
MyApp.utils.formatDate(new Date());

현대 자바스크립트(ES6+) 환경에서는 import, export를 사용하는 모듈(Module) 시스템이 도입되어, 각 파일이 고유한 스코프를 가지게 되었습니다. 이로 인해 위와 같은 방식의 네임스페이스 활용 빈도는 줄었지만, 코드의 구조를 잡는 개념 자체는 여전히 중요합니다.