[JavaScript] 객체(Object)

정진우·2024년 5월 28일

목록 보기

16/20

객체?

자바스크립트의 객체(Object)는 키(key) - 값(value)의 쌍으로 구성된 프로퍼티의 집합입니다. 각 프로퍼티는 객체의 속성 또는 메서드를 나타낼 수 있으며, 복잡한 데이터 구조를 표현하는 데 사용됩니다.

객체의 프로퍼티와 메서드

프로퍼티

키와 값의 쌍으로 구성됩니다.

// 객체 생성
const person = {
  name: "jinwoo", // 키: "name", 값: "jinwoo"
  age: 30,        // 키: "age", 값: 30
  city: "Seoul"   // 키: "city", 값: "Seoul"
};

// 객체 사용
console.log(person.name); // "jinwoo"
console.log(person.age);  // 30
console.log(person.city); // "Seoul"

값은 원시 값(숫자, 문자열, 불리언 등)이나 다른 객체, 배열 등일 수 있습니다.

// 배열 객체
const numbers = [1, 2, 3]; // 배열을 값으로 가지는 객체

// 다른 객체를 값으로 가지는 객체
const person = {
  name: "jinwoo",
  address: {
    city: "Seoul",
    country: "South Korea",
  },
};

// 원시 값과 객체를 값으로 가지는 객체
const mixedObject = {
  name: "jinwoo",
  age: 30,
  isAdmin: false,
  favoriteNumbers: [7, 13, 21],
  address: {
    city: "Seoul",
    country: "South Korea",
  },
};

객체의 프로퍼티를 추가하면서 값을 할당하지 않으면, 해당 프로퍼티의 값은 `undefined`로 설정됩니다.

const person = {}; // 빈 객체 생성

// 프로퍼티 추가
person.name = "jinwoo"; // 값 할당
person.age; // 값을 할당하지 않음

console.log(person.name); // "jinwoo"
console.log(person.age);  // undefined

메서드

객체의 프로퍼티 중 값이 함수인 프로퍼티를 메서드라고 합니다.
메서드는 객체의 동작을 정의합니다.

const person = {
  name: "jinwoo", // 프로퍼티
  age: 123,       // 프로퍼티
  email: ["1234@gmail.com"], // 프로퍼티

  // 메서드: 객체 안에 있는 함수
  greet: function () {
    console.log(`Hello, my name is ${this.name}`); // this는 person 객체를 참조
    // 객체의 메서드 내부에서 `this`는 해당 메서드를 소유한 객체를 참조합니다.
  },

  // ES6 문법을 사용한 메서드 정의
  updateAge(newAge) {
    this.age = newAge;
  },
};

// 메서드 호출
person.greet(); // Hello, my name is jinwoo

// 프로퍼티 접근 및 수정
console.log(person.age); // 123
person.updateAge(124);
console.log(person.age); // 124

메서드 내부에서 this키워드는 해당 메서드가 속한 객체를 참조합니다. 메서드는 객체의 다른 프로퍼티에 접근할 수 있습니다.

메서드(Method)와 함수(Function)의 차이

정의 위치

메서드 : 객체 안에 정의됩니다. 객체의 속성처럼 보이지만, 실제로는 함수 역할을 합니다.
함수 : 객체 외부에 독립적으로 정의됩니다. 별도의 함수 선언을 통해 만들어집니다.

호출 방식

메서드 : 객체를 통해 호출됩니다. 객체.메서드명() 형식으로 호출합니다.
함수 : 함수 이름을 직접 호출하거나, 변수에 할당 후 호출할 수 있습니다. 함수명() 또는 변수명() 형식으로 호출합니다.

`this`키워드

메서드 : this키워드는 메서드 내에서 호출된 객체를 참조합니다. 메서드를 통해 객체의 속성과 메서드에 접근하고 변경할 수 있습니다.
함수 : this키워드는 일반적으로 함수 내에서 특별한 의미를 가지지 않습니다.

활용

메서드 : 객체와 관련된 작업을 수행하는데 주로 사용됩니다. 객체의 데이터에 접근하고 변경하거나, 객체의 동작을 정의하는데 활용됩니다.
함수 : 특정 기능을 수행하거나 값을 반환하는데 일반적으로 사용됩니다. 여러 곳에서 재사용 가능한 코드 블록을 만드는데 유용합니다.

객체 생성

객체 리터럴 (Object Literal)

가장 기본적이고 직관적인 방법입니다. 중괄호 {}를 사용하여 객체를 생성하고, 키-값 쌍을 나열합니다.

const person = {
  name: "jinwoo",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// 사용 예
console.log(person.name); // jinwoo
person.greet(); // Hello, my name is jinwoo

Object 생성자 함수 (Object Constructor)

new Object()를 사용하여 객체를 생성합니다. 이 방법은 객체 리터럴 방식에 비해 덜 사용되는 편입니다. 단순성, 가독성 및 실행 속도를 위해 객체 리터럴 방식의 사용이 권장됩니다.

const person = new Object();
person.name = "jinwoo";
person.age = 30;
person.greet = function() {
  console.log("Hello, my name is " + this.name);
};

// 사용 예
console.log(person.name); // jinwoo
person.greet(); // Hello, my name is jinwoo

생성자 함수 (Constructor Function)

생성자 함수는 객체를 생성하는 데 사용되는 함수 특수한 함수입니다. new키워드를 사용하여 객체를 생성합니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person1 = new Person("jinwoo", 30);
const person2 = new Person("john", 25);

// 사용 예
console.log(person1.name); // jinwoo
person1.greet(); // Hello, my name is jinwoo

console.log(person2.name); // john
person2.greet(); // Hello, my name is john

Object.create() 메서드

Object.create() 메서드를 사용하여 객체를 생성할 수 있습니다. 이 방법은 객체의 프로토타입을 지정할 수 있습니다.
Object.create() 메서드를 사용하면 원하는 객체를 직접 상속할 수 있습니다.

// 부모 객체
const parent = {
  greet: function() {
    console.log("Hello from parent!");
  }
};

// 자식 객체
const child = Object.create(parent);
child.name = "Child";

// 자식 객체에서 상속된 메서드 호출
child.greet(); // "Hello from parent!"

const parent = {
  greet: function() {
    console.log("Hello from parent!");
  }
};

const child = Object.create(parent);

child.greet(); // "Hello from parent!"

child객체는 parent객체를 프로토 타입으로 가지게 됩니다.
이제 child객체는 parent객체의 모든 속성과 메서드를 상속받습니다. 따라서 child 객체에서 greet() 메서드를 호출할 수 있습니다.

클래스 (Class) 문법

ES6에서 도입된 클래스 문법을 사용해서 객체를 생성할 수 있습니다. 클래스는 생성자 함수와 유사하지만, 더 명확하고 구조적인 방법을 제공합니다.

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

const person1 = new Person("jinwoo", 30);
const person2 = new Person("john", 25);

// 사용 예
console.log(person1.name); // jinwoo
person1.greet(); // Hello, my name is jinwoo

console.log(person2.name); // john
person2.greet(); // Hello, my name is john

객체 접근 방법

점 표기법(Dot Notation)

객체의 프로퍼티 이름을 사용하여 점(.)을 이용하여 접근합니다.

const person = {
  name: "jinwoo",
  age: 300,
};

console.log(person.name); // "jinwoo"
console.log(person.age); // 300

대괄호 표기법 (Bracket Notation)

대괄호([]) 안에 프로퍼티 이름을 문자열로 넣어 접근합니다. 이 방법은 점 표기법보다 유연하게 프로퍼티 이름을 다룰 수 있습니다.

const person = {
  name: "jinwoo",
  age: 30,
};

console.log(person["name"]); // "jinwoo"
console.log(person["age"]); // 30

변수를 사용한 접근

변수를 사용해서 프로퍼티 이름을 동적으로 지정할 수 있습니다.

const person = {
  name: "jinwoo",
  age: 30,
};

const propertyName = "name";
console.log(person[propertyName]); // "jinwoo"

객체 메서드 호출

const person = {
  name: "jinwoo",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  },
};

person.greet(); // "Hello, my name is jinwoo"

객체 수정하기

점 표기법(Dot Notation)

const person = {
  name: "jinwoo",
  age: 30
};

// 프로퍼티 추가
person.city = "Seoul";

// 프로퍼티 수정
person.age = 31;

console.log(person); // { name: 'jinwoo', age: 31, city: 'Seoul' }

대괄호 표기법 (Bracket Notation)

const person = {
  name: "jinwoo",
  age: 30
};

// 프로퍼티 추가
person["city"] = "Seoul";

// 프로퍼티 수정
person["age"] = 31;

console.log(person); // { name: 'jinwoo', age: 31, city: 'Seoul' }

배열과 객체를 활용한 네스트 구조

배열과 객체를 함께 사용하는 네스트 구조는 데이터를 효율적으로 구성하고 관리하는 방법입니다. 다양한 분야에서 활용되며, 데이터 같의 관계를 명확하게 표현하고 복잡한 정보를 체계적으로 구성합니다.

네스트 구조의 장점

배열과 객체의 장점을 결합하여 복잡한 데이터를 체계적으로 구성하고 관리할 수 있습니다.
객체를 사용하여 데이터 간의 관계를 명확하게 표현하고 이해를 돕습니다.
데이터 검색, 필터링, 정렬 등 다양한 작업을 용이하게 합니다.

예시

const customers = [
  {
    id: 1,
    name: "철수",
    age: 30,
    orders: [
      { id: 1, product: "컴퓨터", price: 1000000 },
      { id: 2, product: "핸드폰", price: 700000 },
    ],
  },
  {
    id: 2,
    name: "영희",
    age: 25,
    orders: [
      { id: 3, product: "카메라", price: 500000 },
      { id: 4, product: "TV", price: 1500000 },
    ],
  },
];

참고

정진우

내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥

이전 포스트

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

다음 포스트

[JavaScript] 객체(Object)

JavaScript

객체?

객체의 프로퍼티와 메서드

프로퍼티

키와 값의 쌍으로 구성됩니다.

값은 원시 값(숫자, 문자열, 불리언 등)이나 다른 객체, 배열 등일 수 있습니다.

객체의 프로퍼티를 추가하면서 값을 할당하지 않으면, 해당 프로퍼티의 값은 `undefined`로 설정됩니다.

메서드

메서드(Method)와 함수(Function)의 차이

정의 위치

호출 방식

`this`키워드

활용

객체 생성

객체 리터럴 (Object Literal)

Object 생성자 함수 (Object Constructor)

생성자 함수 (Constructor Function)

Object.create() 메서드

클래스 (Class) 문법

객체 접근 방법

점 표기법(Dot Notation)

대괄호 표기법 (Bracket Notation)

변수를 사용한 접근

객체 메서드 호출

객체 수정하기

점 표기법(Dot Notation)

대괄호 표기법 (Bracket Notation)

배열과 객체를 활용한 네스트 구조

네스트 구조의 장점

예시

참고

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

[JavaScript] 고차 함수

0개의 댓글

[JavaScript] 객체(Object)

JavaScript

객체?

객체의 프로퍼티와 메서드

프로퍼티

키와 값의 쌍으로 구성됩니다.

값은 원시 값(숫자, 문자열, 불리언 등)이나 다른 객체, 배열 등일 수 있습니다.

객체의 프로퍼티를 추가하면서 값을 할당하지 않으면, 해당 프로퍼티의 값은 undefined로 설정됩니다.

메서드

메서드(Method)와 함수(Function)의 차이

정의 위치

호출 방식

this키워드

활용

객체 생성

객체 리터럴 (Object Literal)

Object 생성자 함수 (Object Constructor)

생성자 함수 (Constructor Function)

Object.create() 메서드

클래스 (Class) 문법

객체 접근 방법

점 표기법(Dot Notation)

대괄호 표기법 (Bracket Notation)

변수를 사용한 접근

객체 메서드 호출

객체 수정하기

점 표기법(Dot Notation)

대괄호 표기법 (Bracket Notation)

배열과 객체를 활용한 네스트 구조

네스트 구조의 장점

예시

참고

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

[JavaScript] 고차 함수

0개의 댓글

객체의 프로퍼티를 추가하면서 값을 할당하지 않으면, 해당 프로퍼티의 값은 `undefined`로 설정됩니다.

`this`키워드