[기술면접] JavaScript 부분 13

<목차>

26. class 문법
27. 얕은 복사와 깊은 복사

26. class 문법

• ES6에서 도입
• 객체 지향 프로그래밍의 핵심 요소
• 데이터와 이를 조작하는 메소드를 하나의 캡슐화된 단위로 묶어서 관리
• 코드의 구조를 개선하고 유지보수를 용이하게 함

주요 개념
1. 클래스
- 객체를 생성하기 위한 템플릿
- 데이터와 함수를 하나의 큰 블록으로 정의
- 데이터가 아니라 객체를 생성하는데 사용되는 청사진 역할

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

  describe() {
    return `${this.name} is ${this.age} years old.`;
  }
}

2. 인스턴스
   • 클래스를 기반으로 생성된 객체
   • 클래스가 템플릿이라면 인스턴스는 그 템플릿으로 생성된 실제 객체

const person1 = new Person("John", 30);
console.log(person1.describe());  // "John is 30 years old."

3. Getter와 Setter
   • 클래스 내의 속성을 안전하게 읽고 수정할 수 있는 메소드
   • get 키워드로 정의된 메소드 : 속성을 읽을 때 호출
   • set 키워드로 정의된 메소드 : 속성을 설정할 때 호출

class Person {
  constructor(name) {
    this._name = name;  // _name은 private 속성으로 사용됩니다.
  }

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

let person = new Person("Alice");
console.log(person.name);  // Alice
person.name = "Bob";
console.log(person.name);  // Bob

4. 상속
   • 한 클래스가 다른 클래스의 속성과 메소드를 상속받는 기능
   • extends 키워드 사용하여 상속 구현
   • 코드의 재사용성을 높이고, 복잡성을 줄일 수 있음

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);  // 부모 클래스의 constructor 호출
    this.jobTitle = jobTitle;
  }

  describe() {
    return `${super.describe()} and works as a ${this.jobTitle}.`;
  }
}

const employee1 = new Employee("Jane", 28, "Engineer");
console.log(employee1.describe());  // "Jane is 28 years old and works as an Engineer."

5. Static Method 정적 메소드
   • 클래스의 인스턴스가 아닌 클래스에 바로 호출되는 메소드
   • 이 메소드들은 해당 클래스의 인스턴스 데이터에 접근 불가
   • 유틸리티 함수를 클래스 내에 포함하고자 할 때 유용

class MathUtils {
  static square(number) {
    return number * number;
  }
}

console.log(MathUtils.square(3));  // 9

Q. Class 문법의 주요 개념(클래스, 인스턴스, getter, setter, 상속, static method 등)에 대해 설명해주세요.

27. 얕은 복사와 깊은 복사

• 프로그래밍에서 객체를 복사할 때 사용되는 두 가지 주요 방법
• 복사되는 객체의 내용과 그 객체가 참조하는 다른 객체들에 대한 복사 방식에서 차이

얕은 복사

• 객체의 최상위레벨의 필드만 복사하는 방식
• 간단한 구조의 객체라면 앝은 복사가 효율적
• 복사된 객체와 원본 객체는 내부의 중첩된 객체나 배열 등에 대해서는 동일한 참조 공유
• 중첩된 객체는 복사되지 않음
• 원본 객체와 복사된 객체가 중첩된 객체를 공유
• 객체가 단순할 때는 문제가 없을 수 있지만, 객체 내부에 다른 객체를 참조하는 경우 원본 객체와 복사된 객체 사이에 상호 영향을 줄 수 있음
• 스프레드 연산자나 Object.assign() 사용

let original = { a: 1, b: { c: 2 } };
let copy = { ...original };

copy.a = 3; // 원본에 영향을 주지 않음
copy.b.c = 3; // 원본의 'b.c'도 변경됨

console.log(original); // { a: 1, b: { c: 3 } }
console.log(copy); // { a: 3, b: { c: 3 } }

깊은 복사

• 객체의 모든 레벨의 필드를 새롭게 복사
• 중첩된 구조를 갖는 복잡한 객체를 다룰 때는 깊은 복사를 사용해야 원본과의 독립성을 확보할 수 있음
• 복사된 객체가 원본 객체의 어떠한 참조도 공유하지 않도록 만드는 방식
• 복사된 객체를 수정하더라도 원본 객체에는 아무런 영향을 주지 않음
• 중첩된 객체나 배열도 재귀적으로 새로운 복사본 생성
• 깊은 복사를 직접 구현하거나 JSON.stringify()와 JSON.parse()를 사용하여 간단하게 구현
• 하지만 이 방법은 함수, Date, RegExp, Map, Set등 일부 자료형에는 적합하지 않을 수 있음

let original = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.a = 3; // 원본에 영향을 주지 않음
deepCopy.b.c = 3; // 원본의 'b.c'도 영향을 받지 않음

console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 3, b: { c: 3 } }

• 직접 구현하는 방법은 재귀적으로 탐색하고 새로운 객체를 직접 복사하는 것
  - 직접 구현 하는 방법
  1. 기본 데이터 타입은 값을 직접 복사
  2. Date객체는 새로운 인스턴스를 생성하여 시간값을 복사
  3. 배열은 각 요소를 재귀적으로 복사
  4. 객체는 모든 키를 순회하면서 각 값을 재귀적으로 복사
• 재귀적으로 복사 : 객체 내부의 모든 요소에 대해 그 요소 자체가 또 다른 객체나 배열일 경우 그 내부의 요소까지 계속해서 복사를 수행한다는 것을 의미

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        let arrCopy = obj.map(deepCopy);  // 배열의 각 요소에 대해 재귀적으로 복사
        return arrCopy;
    }

    let copiedObj = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {  // 객체의 속성 확인
            copiedObj[key] = deepCopy(obj[key]);  // 속성 값에 대해 재귀적으로 복사
        }
    }
    return copiedObj;
}

const original = {
    level1: {
        level2: {
            level3: "data"
        }
    }
};

const copied = deepCopy(original);
console.log(copied);  // { level1: { level2: { level3: "data" } } }