강의

벨로퍼트와 함께하는 모던 자바스크립트

1장. 자바스크립트 입문
https://learnjs.vlpt.us/basics/

---

1. 객체

아래와 같이 객체 Object를 만들 수 있다.
객체 안에 들어가는 것은 속성 Property과 메서드 method
속성 Property는 키 key : 값 value로 구성
object = { key : value }

1) constructor 생성자 방식

const pig = new Object();
pig.type = "돼지";
pig.name = "꿀꿀이";
pig.sound = "꿀꿀";

2) literal 리터럴 방식 👏

const pig = {
  type: "돼지",
  name: "꿀꿀이",
  sound: "꿀꿀"
};

---

2. 객체 생성자

객체 생성자란 객체를 반복적으로 만들 수 있는 틀을 의미한다.

• Constructor 생성자 -> instance 만들어진 객체

1) function 방식

function Animal(type, name, sound) {
   this.type = type;
   this.name = name;
   this.sound = sound;
}
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀);
const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

2) class 방식 👏

• 필드 field
• 메서드 method

class Animal {
	constructor(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
	}
}
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀);
const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

3. prototype

function방식과 class방식의 차이

function AnimalFunc(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function () {
    console.log(this.sound);
  };
}
 ㅤ
AnimalFunc.prototype.code = function () {
  console.log(this.sound);
};
ㅤ
class AnimalClass {
  constructor(type, namename, sound) {
    this.type = type;
    this.namename = namename;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}
ㅤ
AnimalClass.prototype.code = function () {
  console.log(this.sound);
};

4. constructor

생성된 객체의 생성자 찾기

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
ㅤ
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀");
ㅤ
console.log(pig.constructor.name); // Animal
console.log(Animal.constructor.name); // Function

5. static method

static 키워드를 사용하면 객체가 아니라 클래스에 속하게 만들 수 있다.
객체 차원이 아니라 클래스 차원에서 함수를 구현해야 하는 경우 필요하다.
static 키워드로 만든 함수는 반대로 만들어진 인스턴스에서 불러올 수 없다.

class Pet {
  constructor(..., sound) {
	...
    this.sound = sound;
  }
  static say() {
    console.log("say " + this.sound);
  }
  speak() {
    console.log("speak " + this.sound);
  }
}
ㅤ
const turtle = new Pet("엉금");
ㅤ
// 클래스 - static
console.log(Pet.say); // f say() {}
console.log(Pet.say()); // say undefined
// 클래스
console.log(Pet.speak); // undefined
console.log(Pet.speak()); // not a function
ㅤ
// 객체 - static
console.log(turtle.say); // undefined
console.log(turtle.say()); // not a function
// 객체
console.log(turtle.speak); // f speak() {}
console.log(turtle.speak()); // speak 엉금

6. call 함수

프로토타입을 받아올 때 사용, 첫 번째 인자에는 this를 받아온다.

function Animal(type, name, sound) {
 this.type = type;
 this.name = name;
 this.sound = sound;
}
 ㅤ
Animal.prototype.say = function () {
 console.log(this.sound);
};
 ㅤ
function Dog(name, sound) {
 Animal.call(this, "개", name, sound); // Call 함수
}

7. extend & super

super의 2가지 사용법

• 1. super(): 부모-class의 생성자constructor를 참조
• 2. super.method() : 부모-class의 prototype-method를 참조

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
 ㅤ
Animal.prototype.makeNoise = function () {
  console.log("wooo");
};
 ㅤ
class Cat extends Animal { // extends
  constructor(name, sound) {
    super("고양이", name, sound); // super의 사용
  }
  meow() {
    super.makeNoise(); // super의 사용
  }
}

8. delete

delete 명령어로 프로퍼티를 지우거나 오브젝트를 지울 수 있다.

• delete 프로퍼티
• delete 오브젝트

9. Object.assign();

• 오브젝트 얕은 복사

10. 깊은 복사와 얕은 복사

이건 워낙 고생한 이슈기도 하고, 정말 필요한 부분이라 나중에 다시 더 진하게 보는 걸로...

• 참고 : https://bbangson.tistory.com/78
  JSON으로 파싱해서 텍스트를 전부 그대로 붙여넣는 방법이 나와있다.
  정말로 이렇게 하는 방법밖에 없는 것인가..
  전에 무식하게 포문 다 돌려가면서 했던 것이 맞는 방법이었나보다..