#4. 자바스크립트 객체

 

# 객체(Object)란?

 

객체(Object)는 자바스크립트에서 가장 기본적인 데이터 타입 중 하나입니다. 객체는 키-값 쌍의 컬렉션으로 구성되어 있습니다. 키는 문자열 혹은 심볼(Symbol) 타입이 될 수 있고, 값은 어떠한 타입의 값(숫자, 문자열, 불리언, 함수, 다른 객체 등)이 될 수 있습니다.

객체를 생성할 때는 객체 리터럴 방식 또는 객체 생성자 함수를 사용할 수 있습니다. 객체 리터럴은 {}로 감싸지며, 키-값 쌍을 콤마(,)로 구분하여 생성할 수 있습니다. 객체 생성자 함수는 "new Object()"와 같이 사용합니다.

객체는 수학적인 개념인 개체(entity)를 모방한 것으로, 여러 개의 데이터 요소를 하나의 집합체로 관리하는 것이 가능합니다.

예를 들어, 사람을 나타내는 객체가 있다면 이름, 나이, 주소 등의 속성과 각 속성에 대응하는 값이 있을 수 있습니다. 이러한 객체는 실제 개체(entity)를 모방하는 프로그래밍 개념으로, 컴퓨터 프로그램에서 데이터를 효율적으로 관리하는 데 활용될 수 있습니다.

 

 

 

# 객체를 만드는 방법

JavaScript에서 객체를 만드는 방법은 여러 가지가 있습니다. 가장 기본적인 방법으로는 객체 리터럴 방식을 사용하는 것입니다. 객체 리터럴은 객체를 생성하고 객체의 속성을 정의하는 것을 포함하는 JSON(JavaScript Object Notation) 형식의 문법입니다.

var obj = {
  property1: value1, 
  property2: value2, 
  ...
};

 

다른 방법으로는, 객체 생성자를 사용하는 것입니다. 객체 생성자는 객체의 프로토타입에 기본적인 프로퍼티와 메소드를 정의하는 것입니다. 생성자 함수를 정의하고, 이를 사용하여 새 객체를 생성할 수 있습니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person1 = new Person("GIL DONG", 28);

 

 

 

# 객체 리터럴

 

객체 리터럴(Object Literal)은 자바스크립트에서 객체를 생성하는 가장 간단한 방법입니다. 객체 리터럴은 {}(중괄호)로 감싸져 있으며, 객체의 속성과 값을 정의하는 키-값 쌍으로 구성됩니다. 각 키-값 쌍은 콜론(:)으로 구분되며, 속성의 키와 값을 정의합니다. 예를 들어, 다음과 같은 객체 리터럴이 있습니다.

let person = {
  name: "GIL DONG",
  age: 28,
  location: "Seoul"
};

이 객체 리터럴은 개인의 이름, 나이, 위치를 표현하는 객체를 정의합니다. 이 객체에서는 name, age, location이라는 세 개의 속성이 정의되어 있습니다. 객체 리터럴을 사용하면 객체를 매우 간단하게 생성할 수 있으며, 코드의 가독성이 높아집니다.

 

 

 

 

# 객체의 속성에 접근하는 방법

 

객체의 속성에 접근하는 방법은 두 가지가 있습니다: 맴버 연산자(.)와 대괄호 연산자([ ]).

맴버 연산자(.) : 객체의 특정 속성에 액세스하는 방법입니다. 예를 들어, 객체 "person"의 이름 속성에 액세스하려면, person.name으로 접근할 수 있습니다.

대괄호 연산자([ ]) : 객체의 특정 속성에 액세스하는 또 다른 방법입니다. 이 방법은 맴버 연산자를 사용하는 것과 비슷하지만, 대괄호 안에 속성 이름을 문자열로 입력하여 접근할 수 있습니다. 예를 들어, 객체 "person"의 이름 속성에 액세스하려면, person["name"]으로 접근할 수 있습니다.

적절한 상황에 따라 맴버 연산자 또는 대괄호 연산자를 사용할 수 있습니다.

멤버 연산자(.)은 속성의 이름이 정적인 경우, 즉 객체가 생성된 이후에도 속성의 이름이 변하지 않는 경우에 주로 사용합니다. 예를 들어, 객체의 속성이 "name"인 경우 object.name으로 속성에 액세스할 수 있습니다.

대괄호 연산자([])는 속성의 이름이 동적인 경우, 즉 객체가 생성된 이후에 속성의 이름이 변경될 수 있는 경우에 주로 사용합니다. 예를 들어, 속성의 이름이 동적으로 결정되는 경우 object["property_name"]으로 속성에 액세스할 수 있습니다.

 

 

 

 

# 객체의 속성 추가, 수정 방법

 

자바스크립트에서 객체의 속성을 추가하거나 수정할 수 있습니다. 객체의 새로운 속성을 추가하는 경우, 객체의 이름 뒤에 대괄호 연산자[]를 사용하여 속성 이름을 지정하고, 값을 할당할 수 있습니다.

let person = {};
person["firstName"] = "John";
person["lastName"] = "Doe";

 

맴버 연산자 "."를 사용하여 속성에 액세스하여 값을 수정할 수도 있습니다.

person.firstName = "Jane";

속성을 추가할 때는 대괄호 연산자와 맴버 연산자 둘 다 사용할 수 있지만, 일반적으로 맴버 연산자를 더 많이 사용합니다.

속성 이름이 문자열이 아닌 특수 문자의 혼합이나 공백이 포함되어 있을 경우 대괄호 연산자를 사용해야 합니다.

 

 

 

# 객체의 속성 제거 방법

 

자바스크립트 객체의 속성은 delete 연산자를 사용하여 제거할 수 있습니다. delete 연산자는 객체의 속성을 제거하면서 그 속성이 객체에서 제거된 것을 나타냅니다.

예제:

let obj = { name: "John", age: 30 };

delete obj.name;
console.log(obj); // 출력: { age: 30 }

위 예제에서, obj 객체에서 name 속성이 제거되었습니다.

그러므로 obj 객체에는 name 속성이 더 이상 존재하지 않습니다.

 

 

 

# this 키워드

 

this 키워드는 현재 객체의 참조를 나타냅니다. 즉, 특정 객체의 메소드가 호출될 때, 그 객체의 속성에 접근하려면 this 키워드를 사용할 수 있습니다.

let person = {
  name: "GIL DONG",
  age: 28,
  getName: function() {
    return this.name;
  }
};

console.log(person.getName()); // "GIL DONG"

위의 예제에서 person 객체의 getName 메소드가 호출되면, this.name은 person 객체의 name 속성에 대한 참조를 나타냅니다. 그래서 결과는 "GIL DONG"이 됩니다.

하지만, 객체 외부에서 함수를 호출할 경우, this의 값이 달라질 수 있습니다. 예를 들어, 아래와 같이 객체의 메소드를 변수로 저장하여 호출할 경우, this의 값은 window 객체(브라우저의 경우)를 가리킵니다.

let getName = person.getName;
console.log(getName()); // Undefined(또는 stric 모드의 TypeError)

"this" 키워드는 현재 객체의 참조를 가리키는 특수한 키워드입니다.

예를 들어, 객체의 메소드에서 this를 사용하면 현재 객체의 속성과 메소드에 접근할 수 있습니다.

또한, 화살표 함수(Arrow Function)에서는 this의 참조를 변경할 수 없습니다. 대신, 상위 스코프의 this를 상속받습니다.

정확한 this의 참조값은 실행 컨텍스트(Execution Context)에 따라 달라집니다. 적절한 구조의 코드와 함께 사용되어야 하며, 잘못 사용하면 원하지 않은 결과를 얻을 수 있으니 주의가 필요합니다.

 

※ this에 관한 내용은 다음 글을 참고하시면 더욱 도움이 될 수 있습니다: [JavaScript] 사용 위치에 따른 this의 변화