19. JavaScript에서 객체를 다루는 방법 | 웹 개발 기초

카와이 스타일, dall-e

 

JavaScript Working with Objects

 

01. 객체 생성

1) 객체 리터럴

객체 리터럴은 중괄호 {}를 사용하여 객체를 생성하는 간단한 방법입니다. 이 방법은 코드를 간결하게 작성할 수 있어 자주 사용됩니다.

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};
console.log(person); // 출력: { name: 'John', age: 30, city: 'New York' }

2) Object 생성자

Object 생성자를 사용하여 객체를 생성할 수도 있습니다. 이 방법은 객체를 동적으로 생성해야 할 때 유용합니다.

const person = new Object();
person.name = 'Jane';
person.age = 25;
person.city = 'San Francisco';
console.log(person); // 출력: { name: 'Jane', age: 25, city: 'San Francisco' }

 

02. 객체 속성

1) 속성 접근

객체의 속성에 접근하는 방법은 점 표기법과 대괄호 표기법이 있습니다.

const person = {
    name: 'John',
    age: 30
};

// 점 표기법
console.log(person.name); // 출력: John

// 대괄호 표기법
console.log(person['age']); // 출력: 30

2) 속성 추가, 수정, 삭제

객체의 속성을 추가, 수정, 삭제할 수 있습니다.

const person = {
    name: 'John',
    age: 30
};

// 속성 추가
person.city = 'New York';
console.log(person); // 출력: { name: 'John', age: 30, city: 'New York' }

// 속성 수정
person.age = 31;
console.log(person); // 출력: { name: 'John', age: 31, city: 'New York' }

// 속성 삭제
delete person.city;
console.log(person); // 출력: { name: 'John', age: 31 }

 

03. 메서드

1) 객체 메서드 정의

객체에 메서드를 정의하여 기능을 추가할 수 있습니다.

const person = {
    name: 'John',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
person.greet(); // 출력: Hello, John

2) this 키워드 사용법

this 키워드는 메서드 내부에서 객체 자신을 참조할 때 사용됩니다.

const person = {
    name: 'Jane',
    greet() {
        console.log('Hi, ' + this.name);
    }
};
person.greet(); // 출력: Hi, Jane

 

04. 프로토타입과 상속

1) 프로토타입 체인

JavaScript는 프로토타입 기반 언어로, 객체는 프로토타입 체인을 통해 상속을 구현합니다.

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

Person.prototype.greet = function() {
    console.log('Hello, ' + this.name);
};

const john = new Person('John', 30);
john.greet(); // 출력: Hello, John

2) 객체 상속 구현

프로토타입을 이용하여 객체 상속을 구현할 수 있습니다.

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

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const jane = new Employee('Jane', 25, 'Developer');
jane.greet(); // 출력: Hello, Jane
console.log(jane.jobTitle); // 출력: Developer

 

05. 객체 조작

1) Object.assign() 사용법

Object.assign() 메서드는 하나 이상의 출처 객체에서 대상 객체로 속성을 복사하는 데 사용됩니다.

const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { d: 6 };

Object.assign(target, source1, source2);
console.log(target); // 출력: { a: 1, b: 4, c: 5, d: 6 }

2) Object.keys(), Object.values(), Object.entries() 사용법

이 메서드들은 객체의 키, 값, 키-값 쌍을 배열 형태로 반환합니다.

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

// Object.keys()
const keys = Object.keys(person);
console.log(keys); // 출력: ['name', 'age', 'city']

// Object.values()
const values = Object.values(person);
console.log(values); // 출력: ['John', 30, 'New York']

// Object.entries()
const entries = Object.entries(person);
console.log(entries); // 출력: [['name', 'John'], ['age', 30], ['city', 'New York']]

 

06. JSON과 객체

1) JSON.stringify()와 JSON.parse() 사용법

JSON.stringify() 메서드는 JavaScript 객체를 JSON 문자열로 변환하고, JSON.parse() 메서드는 JSON 문자열을 JavaScript 객체로 변환합니다.

const person = {
    name: 'Jane',
    age: 25,
    city: 'San Francisco'
};

// 객체를 JSON 문자열로 변환
const jsonString = JSON.stringify(person);
console.log(jsonString); // 출력: '{"name":"Jane","age":25,"city":"San Francisco"}'

// JSON 문자열을 객체로 변환
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // 출력: { name: 'Jane', age: 25, city: 'San Francisco' }

2) JSON과 객체 변환

JSON은 데이터 교환 형식으로 많이 사용되며, JavaScript에서 객체를 쉽게 JSON 형식으로 변환하거나 그 반대로 변환할 수 있습니다.

const book = {
    title: 'JavaScript: The Good Parts',
    author: 'Douglas Crockford',
    pages: 176
};

// 객체를 JSON 문자열로 변환
const jsonBook = JSON.stringify(book);
console.log(jsonBook); // 출력: '{"title":"JavaScript: The Good Parts","author":"Douglas Crockford","pages":176}'

// JSON 문자열을 객체로 변환
const parsedBook = JSON.parse(jsonBook);
console.log(parsedBook); // 출력: { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford', pages: 176 }

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.12 - [Study] - 16. JavaScript 정규 표현식 완벽 가이드 | 웹 개발 기초

16. JavaScript 정규 표현식 완벽 가이드 | 웹 개발 기초

2024.07.11 - [Study] - 15. JavaScript 텍스트 포맷팅 | 웹 개발 기초

15. JavaScript 텍스트 포맷팅 | 웹 개발 기초

2024.07.11 - [Study] - 14. JavaScript 숫자와 날짜 | 웹 개발 기초

14. JavaScript 숫자와 날짜 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)