JavaScript객체와 Prototype/참조타입

자바스크립트에서 객체는 단순한 데이터 저장소를 넘어서, 기능(매서드)까지 담을 수 있는 유연한 구조입다. 이때 객체의 원형(프로토타입)을 사용하여 새로운 객체를 생성하는 것이 프로토타입 입니다. 모든 객체들이 메서드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체를 가집니다.

 

1. 생성자 함수와 프로토타입

new키워드를 사용해 함수를 호출할 수 있으며 관례적으로 UpperCamelCase를 사용합니다.

function Person(firstName, lastName, age, gender) {
  this.name = {
    first: firstName,
    last: lastName
  };

  this.age = age;
  this.gender = gender;

  this.greeting = function() {
    console.log(`Hello, ${this.name.last}`);
  }
}

let person1 = new Person('cyrano', 'bergerac', 30, 'male');
person1.greeting(); // Hello, bergerac

 

2. 클래스와 프로토타입

클래스는 새로운 객체를 생성하는 템플릿 역할

>> 생성자: 클래스에서 객체를 생성하고 초기화하기 위한 특별한 메서드로 new키워드로 객체 생성시 자동으로 호출된다. 또한 각 클래스는 하나의 constructor(생성자)만을 가진다.

class Human {
  name;
  age;
  job;

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

  greet() {
    console.log(`안녕하세요 ${this.name}님`);
  }
}

let human1 = new Human('bergerac', 20, '가스콘대장');
let human2 = new Human('christian', 17, '가스콘대원');

human1.greet(); // 안녕하세요 bergerac님
human2.greet(); // 안녕하세요 christian님

 

 

<자바스크립트 객체의 참조 타입과 복사 방식>

javascript에서 데이터를 저장하는 방식은 두가지 방식으로 나눌 수 있는데, 이는 원시타입(기본자료형 - 값을 바로 저장)과 참조타입(참조자료형-메모리에 저장된 객체의 주소를 저장)

 

1. 얕은복사

얕은 복사는 객체의 주소값만 복사하기 때문에, 원본과 복사본이 동일한 객체를 가리킵니다.

 

let computer1 = {
  name: '삼성'
};

let computer2 = computer1; // computer1의 주소를 복사

computer1.name = '애플';
console.log(computer2); // { name: '애플' }

function changeName(computer) {
  computer.name = '엘지';
}

changeName(computer1);
console.log(computer2); // { name: '엘지' }

computer1과 computer2는 같은 객체를 참조하므로, 하나를 수정하면 다른 쪽도 함께 바뀐다.

changeName 함수에서 computer.name을 바꾸면 실제 객체가 바뀌므로 두 변수 모두 영향받는다.

 

2. 깊은복사 (Deep Copy)

깊은 복사는 원본 객체의 값을 완전히 복제하여 독립적인 새로운 객체를 생성한다.

JSON : JavaScript Object Notation(자바스크립트의 객체를 표기하는 방법)

JSON.parse(json) : 전달받은 JSON 문자열을 JS 객체로 변환하여 새로운 메모리 위치에 할당한다.

let book1 = {
  title: '시라노',
  author: '에드몽 로스탕',
  publishYear: 1897
};

let book2 = JSON.parse(JSON.stringify(book1));

console.log(book2); 
// { title: '시라노', author: '에드몽 로스탕', publishYear: 1897 }

book2.title = '웃는남자';
book2.author = '빅토르 위고';

console.log(book2); 
// { title: '웃는남자', author: '빅토르 위고', publishYear: 1987 }

console.log(book1); 
// { title: '시라노', author: '에드몽 로스탕', publishYear: 1987 }

 

3. 객체 속성 다루기(in 연산자 사용)

속성이 해당 객체 안에 존재하는지 확인하는 연산자로서 boolean타입으로 값을 반환한다.

console.log('title' in book1);     // true
console.log('publisher' in book1); // false
console.log('author' in book2);    // true
console.log('hello' in book2);     // false

 

4. 객체속성 다루기(delete 연산자 사용)

객체에서 특정 속성을 제거할 수 있는 연산자이다.

delete 이후 해당 속성은 객체에서 완전히 제거된다.

delete book1.title;
console.log('title' in book1); // false