Today Topic : Javascript 2.객체,클래스

🗝 Keywords

✅ 객체

✅ 생성자함수

✅ 클래스

---

1. 객체

1-1) 객체 표현식

let ctaaag = {
  name : 'hyeon byeong taek',
  height : '188cm',
  weight : '85kg'
}

🚀 객체 표현식

• 객체란 {}를 통해서 카테고리로 묶어서 정보를 관리할 수 있음
• ctaaag이라는 사람에 대한 정보를 카테고리로 묶고 싶다면 ctaaag의 객체를 만들면 됨
• 객체는 key:value로 구성되어있음. 카테고리 항목이 key, 해당 항목의 값을 value라고 인지하면 됨.
• value에 있는 값은 각각의 표현식(문자,숫자,함수)으로 표현을 해줘야만 함

1-2) 객체 접근법

console.log(ctaaag.name);
console.log(ctaaag['name']);

let obj = {
  name: 'obj',
  hobby: 'computer'
}
function getValue(obj,key) {
  return obj[key];
  // return obj.key 이 방식은 인식 못함!!
}
console.log(getValue(obj,'name'));

🚀 객체 접근법

• 객체는 점표기법 :object.key과 대괄호표기법:object[key]로 접근이 가능함
• .key 접근방식은 띄어쓰기가 있거나 숫자로 시작하는 유효하지 않은 변수에 대한 접근은 불가능함
• 함수를 이용해서 동적인 접근도 가능함. 객체와 키를 인자로 하는 함수의 리턴 값을 대괄호표기법으로 접근을 하면 됨. (점 표기법은 인자값을 key값으로 인식하지 못해서 undefine으로 반환함)

1-3) 객체 속성 추가, 삭제

//속성 추가하기
ctaaag.gender='man';
console.log(ctaaag);
console.log(ctaaag.gender);

//속성 삭제하기
delete ctaaag.gender;
console.log(ctaaag);

🚀 속성 추가 및 삭제

• 속성 추가는 객체에 접근할 때 없던 키 값과 밸류값으로 접근을 하면 새로운 객체가 생김. 정적인 접근과 동적인 접근으로 모두 가능함
• 속성 삭제는 delete만 앞에 붙이면 가능함.

1-4) 객체의 단축표현

const x = 0;
const y = 0;
const coordinate = { x , y } // { x : x, y : y }

function makeObj(name,age) {
  return {
    name, // name:name
    age, // age:age
  };
}

🚀 객체의 단축표현

• 만약 객체의 key와 value가 동일한 이름을 갖고 있으면, 한 개의 이름만 입력하는 것이 가능함

1-5) 객체내 프로퍼티 유무확인

let food = { hamburger:'🍔', sushi: '🍣' }

console.log('sushi' in food); // sushi가 존재하므로 true
console.log('rice' in food); // rice가 없으므로 false

property in object

• in을 통해서 프로퍼티가 객체 안에 있는지 유무를 확인할 수 있음.
• 있다면 true를, 없다면 false를 반환함

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  console.log(key);  // name, age, isAdmin
  console.log(user[key]); // John, 30, true
}

🚀 for in 구문

• for in을 이용하면 객체안에 있는 모든 키를 순회하면서 출력할 수 있음.
• 반복문 for와는 다른 성격이지만, for문 처럼 반복변수를 선언해야 함.

---

2. 생성자함수

2-1) 객체 내의 함수

let news = {
  social : 'hi',
  science : 'hello',
  todayTopic : function(){
    console.log((`today topic is ${news['social']},${news['science']}`))
  }
}
 
news.social
news.todayTopic();

🚀 객체 내의 함수

• 객체안의 프로퍼티를 함수로 선언할 수 있다. 이 때는 프로퍼티가 아니라 메서드라고 부름
• 메서드 접근은 점표기법으로만 가능함.

2-2) 생성자 함수

const good = {
    feel : 'great',
    emoji : '👍',
    display : function() {
        console.log(`오늘의 기분은 ${this.feel} ${this.emoji}`)
    },
};

const bad = {
    feel : 'bad',
    emoji : '👎',
    display : function() {
        console.log(`오늘의 기분은 ${this.feel} ${this.emoji}`)
    },
};

function Feeiling(feel, emoji) {
  this.feel = feel;
  this.emoji = emoji;
  this.display = function() {
    console.log(`${this.feel} : ${this.emoji}`)
  }
  return this; // 생략가능
}

let good = new Feeiling('good','👍');
good.display();

let bad = new Feeiling('bad', '👎');
console.log(bad);
bad.display();

🚀 생성자 함수

• 비슷한 객체의 반복이 필요할 때는 한 묶음으로 묶어서 생성자함수를 만들 수 있음
• 생성자함수는 반복되는 객체의 상위 개념의 생성자 함수를 만든다. 이 때 파스칼케이스를 사용해서 시작 글자를 꼭 대문자로 만들 것.
• 하위 객체를 만들 때는 상위 생성자함수 앞에 new를 붙이고, 인자 값을 넣으면 새로운 함수가 만들어짐.

---

3. 클래스

3-1) 생성자함수를 클래스로 전환

//객체를 손쉽게 만들 수 있는 템플릿
//1. 생성자 함수 (오래된 고전적인 방법)
//2. 클래스 (현재 가장 많이 사용되고 있음.)

//생성자 함수 버전
function Fruit(name, emoji) {
     this.name = name;
     this.emoji = emoji;
     this.display = () => {
         console.log(`${this.name}: ${this.emoji}`);
     };
     // return this; 생략가능
 }

 const apple = new Fruit('apple','🍎')
 const orange = new Fruit('orange','🍊')

 console.log(apple);
 console.log(orange);
 console.log(apple.name);
 console.log(apple.emoji);

//클래스로 전환하기
class Fruit {
    //constructor를 생성자라고 함. (new 키워드로 객체를 생성할 때 호출되는 함수)
    constructor(name,emoji) {
        this.name = name;
        this.emoji = emoji;
    }
    display = () => {
        console.log(`${this.name}: ${this.emoji}`)
    };
}
// apple은 fruit 클래스의 인스턴스이다.
const apple = new Fruit('apple','🍎')
// orange는 fruit 클래스의 인스턴스이다.
const orange = new Fruit('orange','🍊')

console.log(apple);
console.log(orange);
console.log(apple.name);
console.log(apple.emoji);
apple.display()

🚀 생성자함수와 클래스

• 생성자함수보다 보다 더 쉽고 다양하게 활용할 수 있게 es6부터 추가된 개념이 클래스이다.
• 클래스는 생성자함수와 같이 상위개념을 정의해서 여러가지 하위개념에 있는 객체들을 만들어낼 때 사용하면 용이하다.
• 클래스는 constructor(인자1,인자2)를 받아서 this를 이용하여 해당 클래스 각각의 key,value값을 설정해준다. 이 때 당연히 메서드를 만들 수도 있다.
• 생성자함수와 마찬가지로 클래스를 활용하여 객체를 만들 때는 new를 통해서 만들 수 있음.
• 이 때 만들어진 새로운 객체를 해당 클래스의 인스턴스라고 부른다.

3-2) 정적 프로퍼티와 메서드(static)

class Fruit {
    //constructor를 생성자라고 함. (new 키워드로 객체를 생성할 때 호출되는 함수)
    constructor(name,emoji) {
        this.name = name;
        this.emoji = emoji;
    }
    static makeRandomFruit(){
        return new Fruit('banana','🍌');
    }
    //인스턴스 레벨의 메서드
    display = () => {
        console.log(`${this.name}: ${this.emoji}`)
    };
}

const banana = Fruit.makeRandomFruit();
console.log(banana);

🚀 static

• 클래스에 의해 생긴 모든 인스턴스에 메서드를 포함시키지 않고, 클래스에서만 작동되는 메서드를 만들고 싶다면 'static'을 이용해서 클래스 레벨의 프로퍼티 혹은 메서드를 만들 수 있음
• 그래서 static 프로퍼티/메서드를 활용하기 위해서는 인스턴스가 아닌 class.method를 입력해야 실행할 수 있음
• 이를 활용하는 이유는 클래스의 재활용성을 만들기 위해서이다. 또한 Math, Number 등의 클래스의 정적메서드를 활용해서 다양한 것들을 할 수도 있음

3-3) 접근제어자(field)

//접근제어자 - 캡슐화
//private(#), public(기본), protected

class Fruit {
    #name;
    emoji;
    type ='과일';
    constructor(name,emoji) {
        this.name = name;
        this.emoji = emoji;
        
    }
    display = () => {
        console.log(`${this.name}: ${this.emoji}`)
    };
}

const apple = new Fruit('apple','🍎')
console.log(apple);
apple.display();

apple.#name  = '오렌지'; 
//샵이 걸려있는 프로퍼티는 외부에서 접근할 수 없음.

🚀 접근제어자

• 만약 생성된 객체의 값을 외부에서 접근을 못하게 하고 싶고, 호출도 안하고 싶다면 #을 씌울 수 있음
• console.log()로 터미널에 출력을 하더라도 해당 프로퍼티와 메서드가 나오지 않는다.

3-4) 접근자 프로퍼티(getter,setter)

// 접근자 프로퍼티 (Accessor Property)

// get은 클래스안에 있는 인스턴스 레벨의 메서드에 접근을 할 때, 단순한 메서드라서
// 함수처럼 접근 안하고 프로퍼티처럼 접근을 할 수 있다.
// 메서드 앞에 get만 붙여주면 이를 프로퍼티로 접근한다는 의미를 갖고 있음.

class Student {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    get fullName() {
        return `${this.lastName} ${this.firstName}`;
    } 
    // 함수로 접근해야 student.fullname() 두 프로퍼티의 합을 실시간으로 반영한 값을 알 수 있다.
    // 그런데 함수는 본래 계산을 해야하지만 위와 같은 것은 계산이라기보단 단순 프로퍼티들의 합이기 때문에
    // 프로퍼티 속성처럼 인식하는 것이 좋겠다고 판단되면
    // 메서드 앞에 get을 붙여주면서 가능함. 따라서 프로퍼티로 접근을 할 수 있어서 접근자 프로퍼티라고 함.

    set fullName(value){
        return ('set'+value);
    }
    // set의 경우에는 함수를 프로퍼티처럼 만들고, 특정 값을 할당하고자 할 때 사용할 수 있음.
}

const student = new Student('수지', '김')
console.log(student.fullName);
console.log(student.fullName = '안 철 수');

🚀 접근자 프로퍼티(set, get)

• 프로퍼티의 성격을 가진 단순한 메서드이다.(예를 들어, 두 개의 프로퍼티를 단순히 조합하거나 한 개 프로퍼티를 초기화하는 등의 간단한 제어 같은 것)
• 그럴 때는 클래스에서 인스턴스 레벨의 메서드를 만들고. 메서드 앞에 get을 붙이면 해당 값을 프로퍼티처럼 불러올 수 있다.
• 이 때, 메서드를 단순 프로퍼티로 바꿔서 하면 외부에서 프로퍼티 값이 변경되었을 때 그것이 반영이 안된다. 따라서 메서드 처럼 외부에서 값을 받아서 반영하는 동적인 방식을 갖게 되면서 프로퍼티처럼 부르고 싶을 때 사용한다.
• set은 외부에서 값을 할당받고 싶을 때 메서드 형성시 인자를 선언하고, 원하는 값을 return하면 메서드 성격을 띈 프로퍼티로 활용이 가능함

3-5) 클래스 상속(extends)

class Animal {
    constructor(color) {
        this.color = color;
    }
    eat() {
        console.log('먹자!');
    }
    sleep() {
        console.log('잔다!');
    }
}

class Tiger extends Animal {}
const tiger = new Tiger('노랑이');
console.log(tiger);
tiger.sleep();
tiger.eat();

class Dog extends Animal {
    constructor (color, ownerName) {
        super(color); // super를 이용하면 부모 생성자함수를 호출할 수 있음
        this.ownerName = ownerName;
    }
    play() {
        console.log('놀자아!');
    }
    eat() {
        super.eat();// super를 이용하면 부모 생성자함수를 호출할 수 있음
        console.log('강아지가 먹는다!');
    }
}

const dog = new Dog('빨강이','택택');
console.log(dog);
dog.play();
dog.eat()

🚀 class extends

• 만약 클래스를 만들 때 새로운 인스턴스가 포함된 클래스를 만들고 싶다면 extends를 사용할 수 있음
• 예를 들어, 동물들의 행동(먹고,자고)을 나타내는 클래스를 만드는데, 여러 동물들(사자,호랑이,강아지)의 행동을 만들고 싶다면? 즉, 인스턴스를 만드는 클래스보다 더 상위개념의 클래스를 만들어서 여러 인스턴스를 만들고 싶을 때 사용할 수 있음
• 그럴 때는 class 자식클래스 extends 부모클래스를 하면 생성할 수 있음.
• 이 때 새로운 constructor를 받을 수 있는데, 부모클래스 + 추가하고 싶은 것을 하면 됨.
• 부모클래스의 constructor를 그대로 받고 싶다면 super()를 통해서 할 수 있음.
• 만약 부모 클래스와 자식클래스에 동일한 메서드가 있다면 자식클래스의 메서드는 부모클래스의 메서드를 무시함. 만약 물려받고 싶다면 마찬가지로 super를 통해서 물려받을 수 있음