🚀 [JavaScript] 객체를 만드는 3가지 방법

🚀 Javascript object

😊 들어가면서...

자바스크립트는 객체를 만드는 방법이 3가지나 있습니다.
3가지 방법 모두 용도가 다르기 때문에 한번 다뤄보겠습니다.

✔ 1번째 방법: 리터럴 표기법

🌈 딱 1개만 만들고 싶을때!

1. 리터럴 표기법

• 리터럴로 표기한 방법으로 만들어진 객체는 복제된 것이 없기 때문에 인스턴스라고 부르지 않는다.

const 객체명 = {
	프로퍼티명1: 값1,
	프로퍼티명2: 값2,
	...
	프로퍼티명n: function(){
	프로퍼티 메소드가 호출되면 실행할 문장;
	...
	}
}

🥚 프로퍼티(property)

• 이름과 값으로 구성된 정렬되지 않은 집합
• 프로퍼티는 함수도 저장할 수 있음(프로퍼티 메소드)
  (ex) const userid = {'no':1, 'name':'김사과', 'age':20, 'gender':'여자'}

✔ 2번째 방법: 생성자를 이용하는 방법

🌈 여러번 복사해 사용 (자바 객체만드는 것과 비슷)

1. 생성자를 이용하는 방법

• java에서 클래스를 통해 만들어진 객체를 인스턴스라고 하는 것처럼 생성자를 이용해 만들어진 객체를 인스턴스라고함

function 생성자명(매개변수1, 매개변수2, ..){
	this.프로퍼티명1 = 값1;
	this.프로퍼티명2 = 값2;
	...
	this.프로퍼티명n: function(){
    프로퍼티 메소드가 호출되면 실행할 문장;
    ...
	}
}

✔ 3번째 방법: 클래스를 이용하는 방법

🌈 여러번 복사

3. 클래스를 이용

• ECMA Script6에 추가된 객체 생성 방법
• 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동

const 클래스명 = class {
  	constructor(매개변수1, 매개변수2 ..){
        this.프로퍼티명1 = 값1;
        this.프로퍼티명2 = 값2;
        ...
    }
    메소드명(매개변수1, 매개변수2 ..){
        메소드가 호출되면 실행할 문장;
        ...
    }
}
const 객체명1 = new 클래스명(값1, 값2 ..);
const 객체명2 = new 클래스명(값1, 값2 ..);

🍪 리터럴 표기법 객체 예시

const dog ={
    name: '루시',
    age: 12,
    color: 'white',
    weight: 3.5,
    birthday: '20091210',
    getBirthday: function(){
        return this.birthday;
    }
}

🏐 값을 얻어오는 2가지 방법

첫번째 방법: Object명.Property명

console.log(dog.name);
console.log(dog.age);
console.log(dog.color);
console.log(dog.weight);

두번째 방법: Object명['Property명']

console.log(dog['name']);
console.log(dog['age']);
console.log(dog['color']);
console.log(dog['weight']);

+ 동적으로 속성에 접근하고 싶을 때

function getValue(obj, key){
    // return obj.key .형태 불가능
    return obj[key];
}
console.log(getValue(dog, 'name'));

🏐 for문으로 key와 value를 가져오는 방법: for(let i in Object명){}

for(let i in Object명){
    console.log(`i:${i}, dog[i]: ${Object명[i]}`);
}

• 함수가 저장되있을때는 함수 자체가 저장된다
  ex)i:getBirthday, dog[i]: function(){return this.birthday;}

• 프로퍼티 메소드 -- 변수처럼 쓸수있다는게 핵심포인트!

console.log(dog.getBirthday()); // 20091210
console.log(dog.getBirthday);   // [Function: getBirthday] 

🍪 생성자를 이용한 객체 예시

function Dog(name, color){
    this.name = name;
    this.color = color;
    this.play = function(){
        return `${this.name}는 놉니다`;
    }
}
// 여러 강아지들 만들 수 있음
const Rucy = new Dog('루시', 'white');
console.log(Rucy.name);
console.log(Rucy.color);
console.log(Rucy.play());

const PPomi = new Dog('뽀미', 'black');
console.log(PPomi.name);
console.log(PPomi.color);
console.log(PPomi.play());

🍪 클래스를 이용한 객체 예시

const Dog2 = class{
    constructor(name, age, color){
        this.name = name;
        this.age = age;
        this.color = color;
    }
    play(){
        return `${this.name}은 즐겁게 놉니다`;
    }
}
const PPory = new Dog2('뽀리', 4, 'white');
console.log(PPory.name);
console.log(PPory.age);
console.log(PPory.color);
console.log(PPory.play());

🦊 객체의 필드 삭제 및 추가

// dog은 객체이고, 어떤 클래스의 인스턴스도 아님
let dog = {
    name: '루시',
    age: 13,
    'dog-weight': 3.5,
    ['dog-height']: 0.8     //대괄호도 가능
}

//필드추가
dog.family = '포메';
console.log(dog.family);    //포메  .으로접근
console.log(dog['family']); //포메  []로접근
//필드삭제
delete dog['dog-height'];
console.log(dog['dog-height']); //undefined  삭제시켜서 사라짐

🐹 클래스 응용 - static

class Fruit {
    //필드
    eng;
    //static 프러퍼티
    static count_fruits = 0;
    //생성자
    constructor(name, emoji){
        this.name = name;
        this.emoji = emoji;
    }
    //메서드
    display = () => {
        console.log(`${this.name}: ${this.emoji}`);
    };
    //static 메서드
    static makeBanana(){
        //클래스 레벨 메서드( new )에서는 this를 참조할 수 없음
        return new Fruit('banana', '🍌');   
        
    }
}
// apple은 Fruit 클래스의 인스턴스
const apple = new Fruit('apple', '🍎');
// orange는 Fruit 클래스의 인스턴스
const orange = new Fruit('orange', '🍊');

const banana = Fruit.makeBanana();   
console.log(banana);
// Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }

🐻 클래스 응용 - private

• java에서는 필드의 값을 못바꾸게 private를 썼지만, javascript는 #을 사용

class Dog{
    #name;
    #color;
    constructor(name, color){
        this.#name = name;
        this.#color = color;
    }
    run = () => {
        console.log(`${this.#color} 색상의 강아지 ${this.#name}는 달립니다`);
    }
    #eat = () =>{
        console.log(`${this.name}는 먹습니다.`)
    }
    get info() {
        return `이름:${this.#name}, 색상:${this.#color}`;
    }
    set info(value) {
        console.log('set', value);
        this.#name = value;
    }
}

const Rucy = new Dog('루시', 'white');
console.log(Rucy);  //Dog { run: [Function: run] } : # 못본다
Rucy.name = '개똥이'; //public으로 이름을 생성

// Rucy.#name = '개똥이';   //#field는 외부에서 접근이 불가능함
//SyntaxError: Private field '#name' must be declared in an enclosing class 에러뜸
console.log(Rucy);  //Dog { run: [Function: run], name: '개똥이' }           
Rucy.run();
// Rucy.eat();  //#function()은 외부에서 접근 불가능!
    //TypeError: Rucy.eat is not a function
// console.log(Rucy.info());	//XX
console.log(Rucy.info); //getter함수 호출방법
Rucy.info= '뽀미';  //set역할 함수
console.log(Rucy.info);  ;