자바스크립트 객체 리터럴과 생성자 함수 활용법 가이드 - 자바스크립트 #6

이번에는 자바스크립 객체의 정의, 생성 방법, 프로퍼티 접근, 추가, 수정, 삭제, 메서드 활용, 상속, 내장 객체 사용법 등을 상세히 설명하고, 실습 가능한 예제 코드를 통해 객체의 개념을 더욱 잘 이해할 수 있도록 정리해 보겠습니다.

자바스크립트 객체 리터럴과 생성자 함수 활용법

 

자바스크립트 객체

자바스크립트에서 객체는 관련된 데이터와 함수(메서드라고도 함)를 하나로 묶은 컨테이너입니다. 실생활의 물건을 생각해보면 이해하기 쉽습니다. 예를 들어, 자동차라는 객체가 있다고 가정해봅시다. 자동차는 색상, 브랜드, 모델과 같은 속성(프로퍼티)을 가지고 있고, 시동 걸기, 가속하기, 정지하기와 같은 기능(메서드)을 가지고 있습니다.

자바스크립트에서 객체는 중괄호 {}로 둘러싸인 키-값 쌍의 집합입니다. 각 키-값 쌍을 프로퍼티라고 부릅니다.

• 예시 코드:

let car = { color: '빨강', brand: '현대', model: '소나타', start: function() { console.log('차가 시동됩니다.'); }, accelerate: function() { console.log('차가 가속합니다.'); }, stop: function() { console.log('차가 멈춥니다.'); } }; console.log(car.color); // 출력: 빨강 car.start(); // 출력: 차가 시동됩니다.

이 예시에서 `car`는 객체이며, `color`, `brand`, `model`은 프로퍼티, `start`, `accelerate`, `stop`은 메서드입니다.

  객체 생성하기

자바스크립트에서 객체를 생성하는 방법은 여러 가지가 있습니다. 가장 흔한 두 가지 방법을 살펴보겠습니다.

 

객체 리터럴 객체

리터럴은 중괄호 {}를 사용하여 객체를 직접 만드는 가장 간단한 방법입니다.

• 예시 코드:

let person = { name: '홍길동', age: 30, job: '개발자', sayHello: function() { console.log('안녕하세요, ' + this.name + '입니다.'); } }; console.log(person.name); // 출력: 홍길동 person.sayHello(); // 출력: 안녕하세요, 홍길동입니다.

반응형

생성자 함수

생성자 함수는 비슷한 객체를 여러 개 만들 때 유용합니다. 함수 이름의 첫 글자는 대문자로 시작하는 것이 관례입니다.

• 예시 코드:

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayHello = function() { console.log('안녕하세요, ' + this.name + '입니다.'); }; } let person1 = new Person('김철수', 25, '학생'); let person2 = new Person('이영희', 30, '교사'); console.log(person1.name); // 출력: 김철수 person2.sayHello(); // 출력: 안녕하세요, 이영희입니다.

여기서 `new` 키워드는 `Person` 함수를 생성자로 사용하여 새로운 객체를 만들라는 의미입니다.

  객체 프로퍼티 접근하기

객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다.

 

점 표기법

점(.)을 사용하여 프로퍼티에 접근할 수 있습니다.

• 예시 코드:

let book = { title: '자바스크립트 완벽 가이드', author: '데이비드 플래너건', pages: 1096 }; console.log(book.title); // 출력: 자바스크립트 완벽 가이드 console.log(book.author); // 출력: 데이비드 플래너건

대괄호 표기법

대괄호([])를 사용하여 프로퍼티에 접근할 수 있습니다. 이 방법은 프로퍼티 이름이 변수에 저장되어 있거나, 특수 문자가 포함된 경우에 유용합니다.

• 예시 코드:

let book = { title: '자바스크립트 완벽 가이드', author: '데이비드 플래너건', 'publication year': 2020 }; console.log(book['title']); // 출력: 자바스크립트 완벽 가이드 let propertyName = 'author'; console.log(book[propertyName]); // 출력: 데이비드 플래너건 console.log(book['publication year']); // 출력: 2020

 

  객체 프로퍼티 추가, 수정, 삭제

객체는 동적이어서 프로퍼티를 언제든지 추가, 수정, 삭제할 수 있습니다.

 

프로퍼티 추가

새로운 키-값 쌍을 할당하여 프로퍼티를 추가할 수 있습니다.

• 예시 코드:

let person = { name: '홍길동' }; person.age = 30; person['job'] = '개발자'; console.log(person); // 출력: { name: '홍길동', age: 30, job: '개발자' }

 

프로퍼티 수정

이미 존재하는 프로퍼티의 값을 새로운 값으로 할당하여 수정할 수 있습니다.

• 예시 코드:

let person = { name: '홍길동', age: 30 }; person.age = 31; person['name'] = '김철수'; console.log(person); // 출력: { name: '김철수', age: 31 }

프로퍼티 삭제

`delete` 연산자를 사용하여 프로퍼티를 삭제할 수 있습니다.

• 예시 코드:

let person = { name: '홍길동', age: 30, job: '개발자' }; delete person.job; console.log(person); // 출력: { name: '홍길동', age: 30 }

 

  객체 메서드

객체의 프로퍼티 값으로 함수를 할당하면, 그 함수를 메서드라고 부릅니다. 메서드는 객체와 관련된 동작을 정의합니다.

• 예시 코드:

let calculator = { add: function(a, b) { return a + b; }, subtract: function(a, b) { return a - b; }, multiply: function(a, b) { return a * b; }, divide: function(a, b) { if (b !== 0) { return a / b; } else { return "0으로 나눌 수 없습니다."; } } }; console.log(calculator.add(5, 3)); // 출력: 8 console.log(calculator.subtract(10, 4)); // 출력: 6 console.log(calculator.multiply(2, 6)); // 출력: 12 console.log(calculator.divide(15, 3)); // 출력: 5 console.log(calculator.divide(10, 0)); // 출력: 0으로 나눌 수 없습니다.

이 예시에서 `calculator` 객체는 네 개의 메서드(`add`, `subtract`, `multiply`, `divide`)를 가지고 있습니다. 각 메서드는 특정 연산을 수행합니다.

  this 키워드

`this` 키워드는 객체 내부에서 객체 자신을 참조할 때 사용됩니다. 메서드 내에서 `this`를 사용하면 해당 메서드를 호출한 객체를 가리킵니다.

• 예시 코드:

let person = { name: '홍길동', age: 30, introduce: function() { console.log(`안녕하세요. 제 이름은 ${this.name}이고, ${this.age}살입니다.`); }, growOlder: function() { this.age++; console.log(`${this.name}의 나이가 ${this.age}살이 되었습니다.`); } }; person.introduce(); // 출력: 안녕하세요. 제 이름은 홍길동이고, 30살입니다. person.growOlder(); // 출력: 홍길동의 나이가 31살이 되었습니다.

이 예시에서 `this.name`과 `this.age`는 `person` 객체의 `name`과 `age` 프로퍼티를 참조합니다.

 

  객체 반복(순회)하기

객체의 모든 프로퍼티를 순회하려면 `for...in` 루프를 사용할 수 있습니다.

• 예시 코드:

let car = { brand: '현대', model: '소나타', year: 2022, color: '검정' }; for (let key in car) { console.log(key + ': ' + car[key]); } // 출력: // brand: 현대 // model: 소나타 // year: 2022 // color: 검정

이 루프는 객체의 각 프로퍼티에 대해 한 번씩 실행됩니다. 각 반복에서 `key` 변수는 현재 프로퍼티의 이름을 가집니다.

  객체 비교

객체 비교는 두 객체가 동일한지를 확인하는 과정입니다. 자바스크립트에서는 객체 비교 시, 두 객체의 참조를 비교합니다.

const obj1 = { name: "John" }; const obj2 = { name: "John" }; console.log(obj1 === obj2); // false const obj3 = obj1; console.log(obj1 === obj3); // true

위 예제에서 `obj1`과 `obj2`는 동일한 내용이지만 서로 다른 객체이기 때문에 `false`를 반환합니다. 반면 `obj3`는 `obj1`과 같은 객체를 참조하므로 `true`를 반환합니다.

 

  내장 객체

자바스크립트는 유용한 내장 객체들을 제공합니다. 몇 가지 중요한 내장 객체들을 살펴보겠습니다.

 

Date 객체

`Date` 객체는 날짜와 시간을 다루기 위해 사용됩니다.

const now = new Date(); console.log(now); const specificDate = new Date("2024-07-15"); console.log(specificDate);

 

Math 객체

`Math` 객체는 수학적 연산을 위한 속성과 메서드를 제공합니다.

console.log(Math.PI); // 3.141592653589793 console.log(Math.sqrt(16)); // 4 console.log(Math.random()); // 0과 1 사이의 무작위 숫자

  객체의 상속

자바스크립트에서 객체 상속은 프로토타입 체인을 통해 이루어집니다. 객체는 다른 객체를 상속받아 그 프로퍼티와 메서드를 사용할 수 있습니다.

const animal = { speak: function() { console.log("Animal speaks"); } }; const dog = Object.create(animal); dog.speak(); // Animal speaks dog.bark = function() { console.log("Woof!"); }; dog.bark(); // Woof!

 

  심화 예제

마지막으로, 객체를 활용한 심화 예제를 만들어 보겠습니다. 이 예제에서는 사용자 관리 시스템을 구축해 봅니다.

function User(name, age) { this.name = name; this.age = age; this.posts = []; } User.prototype.addPost = function(post) { this.posts.push(post); }; User.prototype.getPosts = function() { return this.posts; }; const user1 = new User("Alice", 25); user1.addPost("첫 번째 포스트"); user1.addPost("두 번째 포스트"); console.log(user1.getPosts()); // ["첫 번째 포스트", "두 번째 포스트"]

위 예제에서는 `User`라는 생성자 함수와 프로토타입을 이용해 사용자 객체를 만들고, 사용자에게 포스트를 추가하고 조회하는 기능을 구현했습니다.

 

지금까지 자바스크립트의 객체에 대한 기본 개념부터 심화된 활용법까지 정리해 봤습니다. 객체는 자바스크립트의 강력한 기능 중 하나이므로, 이를 잘 이해하면 더 효율적이고 복잡한 프로그램을 작성할 수 있습니다.