07. TIL (class, object)

자바의 class object의 개념을 다시 한 번 정리하고 확립한 시간 :-)
TIL을 정리하며 다시 한 번 공부해보자!

[해당 정리내용은 드림코딩 인강과 MDN을 참고하였습니다!]

1. class

-class는 객체를 생성하기 위한 템플릿이다. 연관있는 데이터를 묶는 컨테이너와 비슷하다고 생각하면됨!
-name, age와 같은 속성 (field), 행동 (method)이 들어있고, class가 이를 하나로 묶어준다.
(field만 있고 method는 없는 경우 : data class)
-class를 통해 상속과 다양성이 일어날 수 있는 객체지향적 언어이다.
-class에는 새로운 instance를 만들 수 있고 data 를 넣으면 object의 memory가 올라감
(data, 즉 object에 무엇을 넣느냐에 따라 class도 달라짐)
-class에는 template만 정의해놓고 한번만 선언함
(붕어빵을 만드는 틀 같은 존재!)

class : template, object : instance of a class

1) class 선언 : class를 정의하는 방법

: class 의 바디는 중괄호 {}로 묶여있는 안쪽 부분.
안에 method나 constructor 같은 클래스 멤버를 정의함

class person {  //constructor (생성자)
   constructor (name, age) {
       //fields
       this.name = name;
       this.age = age;
   }
} 

constuctor 란?

class로 생성된 객체를 생성하고 초기화하기 위한 특수한 method.
클래스 안에 한개만 존재할 수 있음

• methods

  speak(); {console.log(`${this.name}: hello!`); } 

this란?

: instance(객체)의 자기 자신을 의미함.
주로 field(전역변수)와 method, 또는 생성자의 매개변수가 동일할 때
instance field임을 명확히 하기 위해 사용함.

• ex)
  this.a = a; [this.a는 필드 a는 매개변수 의미]
  this.b = b; [this.b는 필드 b는 매개변수 의미]

2) 획득자와 설정자 (Getter and Setters)

• 접근자 프로퍼티 (accessor property)에 포함됨.

• getter method는 property를 읽으려고 할 때 실행

• setter method는 obj.name = value로 프로퍼티에 값을 할당하려 할 때 (값을 쓸 때) 실행됨

  ex) user에 3개의 class가 존재하는 get, set 구문
  (firstName, lastName, age)

  class User { 
   constructor (fistName, LastName, age) {
       this.fistName = fistName;
       this.LastName = LastName;
       this.age= age;
   }
  
   get age(){
       return this._age;
   }
  
   set age(value) {
       this._age = value < 0 ? 0 : value;
   }
  }	```
  
  

3) Inheritance (상속)

• class를 연장해서 계속 작성할 수 있는 기능.
  한 곳만 수정해도 알아서 다 바뀜 (상속) 필요한 내용만 재정의 가능

  ex) 도형을 만드는 경우

  class Shape {
    construnctor (width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    } 
  
    draw () {
        console.log (`drawing ${this.color} color of`);
    }
  
    getArea  () {
        return width * this.height; 
    }
  }

  • 만약 원형 도형을 하나 만들고 싶다면?

    class Rectangle extends Shape {}

  • 삼각형을 만든다면?
    (넓이는 /2 해야하니 해당 부분만 공식으로 정의해주자!)

    class Triangle extends Shape {
       getArea() {
           return (this.width * this.height) /2 ; 
       }
    }
    const rectangle = new Rectangle (20,20, 'blue');
    rectangle.draw();
    triangle.draw();

4) class checking: instanceOf

• object가 class를 이용해서 만든 것이 맞는지 확인하는 class

  console.log(rectangle instanceof Rectangle);
  console.log(triangle instanceof Rectangle);
  console.log(triangle instanceof Triangle);
  console.log(triangle instanceof Shape);
  console.log(triangle instanceof Object);

2. Object

• 오브젝트 생성자는 객체 래퍼 (Wrapper)를 생성함.
  주어진 값이 null, undefined이면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환함.
• object = { key : value } ; 오브젝트는 키와 밸류의 집합체이다
• primity type은 값을 한개만 담을 수 있다.
• 생성자가 아닌 맥락에서 호출하면 object = new object () 와 동일하게 동작함.
• Javascript의 모든 객체는 object의 자손이다!

1) Literals and properties

• Literal : 소스 코드의 고정된 값을 대표하는 용어.
  ex)

  const name = 'dodam';
  const age = 4;
  print (name,age);
  function print(name, age) {
  	console.log (name);
  	console.log (age);
  }  

  => 조건이 늘어나면 적어야 할 변수가 길어지므로
  아래와 같이 object를 활용해 개선해야함
  

  • class가 없어도 괄호로 오브젝트 생성하는 방법

    const dodam = { name : 'dodam', age : 4};

• object의 형식(object literal syntax) : const obj1 = {};

  print(dodam); 
  const obj1 = {}; // 오브젝트의 형식
  const obj2 = new Object (); // 'object constructor' syntax 새로운 오브젝트에서 정의된 컨스트럭터가 정의됨
  dodam.hasJob = true ; //추가 정보를 나중에 삽입 가능. 자바의 특성. 삭제도 가능!
  console.log(dodam.hasJob);

2) Computed properties (계산된 프로퍼티)

• string 에서만 사용이 가능함

• 배열에서 데이터를 받아오는 것 처럼 접근하려는 변수의 이름 string으로 호출 가능.

• [] 괄호는 정확히 어떤 상황에서 필요할지 모를 때, runtime 상황에서 결정되는 경우 사용함

  • runtime? 프로그램이 동작하고 있을 때를 의미함

  • example

    console.log (dodam.name); 
    console.log (dodam ['name']); 
    dodam ['hasJob'] = true;
    console.log (dodam.hasJob); ```
    

  • '.'을 통해 접근이 가능함.
    코딩하는 순간 값을 받아오고 싶을 때 주로 사용함
    []로 똑같이 할당해줄 수 있음

  • example

    function printValue (obj,key){
    	console.log (obj [key]); 
    }
    printValue (dodam,'name');
    printValue (dodam, 'age');  ``` 
    

  • (obj, key)로 송출하면 key값이 안들어있고,
    key값을 언제 불러올지 모르기 때문에 undefined가 됨.
    []로 해야 아래 값이 송출!
    하단 printValue 함수는 동적으로 값을 받아올 때 유용하다!

3) Property value shorthand

• 일일히 적지 않고 작성을 편하게 하려면 어떻게 해야하는가?
  함수를 이용해서 값만 전달해주자!
  ex) 기존 작성 방법

  const person1 = { name: 'bob', age : 2};
  const person2 = { name: 'steve', age : 3};
  const person3 = { name: 'dave', age : 4};
  const person4 = makePerson('dodam', 28); 
  

ex) 함수 활용 작성 방법

function makePerson(name,age) {
	return {		
		name,
		age,
	};
}
console.log(person4); 

-키와 밸류의 이름이 동일하다면 생략이 가능하여 name : name, 으로 입력하지 않아도 됨

4) Constructor function

• 순수하게 오브젝트를 생성하는 함수는 대문자로 시작하여 작성하고,
  클래스에서 오브젝트를 호출하는 것 처럼 호출 가능함

function Person(name, age) { 
// this = {};생략됨
this.name = name;
this.age = age;
// return this; 생략됨
}
const person4 = newPerson ('dodam', 28);

5) in operator

• 해당하는 오브젝트 안에 키가 있는지 없는지 확인하는 property

  existence check (key in obj)
  console.log ('name' in dodam);   //t
  console.log ('age' in dodam);   //t.
  console.log ('random' in dodam)   //f. 해당 값 없음
  console.log (dodam.random);    
  //undefined . 정의하지 않은 값을 출력하면 undefined 나옴. ```

6) for in vs for of (프젝시 유용!)

• for (key in obj) 모든 키를 받아와서 작업하고 싶을 때 사용하면 됨

  • for in ex)
    in 키워드를 활용해 dodam이 가지고 있는 키가
    블럭을 돌 때마다 지역변수에 할당됨

    for (key in dodam) { 
    console.log (key); // 모든 키 출력. 
    console.clear(); // 전부 삭제 원할 때 출력
    } ```   

• for (value of iterable)
  : iterable -> 한 번에 하나의 member를 반환할 수 있는 object를 의미
  배열과 같은 배열리스트. iterable한 object를 사용함

  const array = [1,2,4,5];
  for (let i = 0; i < array.length ; i++) {
  	console.log (array[i]);
  }  ```  

로도 출력이 가능하나 복잡하기 때문에 아래와 같은 방식으로 사용하자!

	for (value of array) {
	console.log (value);
	}

7) cloning

• Object.assign (dest, [obj1, obj2, obj3...])
• 자바스크립트의 모든 오브젝트는 다 상속됨. 어떤 파라미터가 어떤 값을 리턴하는지 확인하고 사용해야함
  
  
  ex)
  const user = {name : 'dodam', age : 28};
  const user = user;
  : user의 레퍼런스에 name과 age 값이 각각 할당 되어있고,
  user2는 레퍼러런스는 따로 갖지만 1의 name과 age 값을 같이 갖는다.
  이 때 user2의 이름을 user2.name = 'sally' 로 정의하면, 이름이 샐리로 바뀜

ex) old way

const user3 = {} ; //비어있는 오브젝트 만들기
for (key in user) { //수동적으로 할당하는 방법임
	user3[key] = user [key];
}
console.log(user3);

• 그래서 아래와 같은 방식을 사용하는 것이 좋다.
  ex) new way

  const user4 = {}; 
  Object.assign (user4,user); 
  console.log(user4);
  <br>
  const user4 = Object.assign ({}, user); ```

상단의 내용을 보다 간결하게 이렇게 표현 가능!

ex)another exmple

const fruit1 = { color : 'red'};
const fruit2 = { color : 'blue', size : 'big'};
const mixed = Object.assign({}, fruit1,fruit2);
console.log (mixed.color);
console.log (mixed.size);

Q. mixed를 하고 출력하면?
: fruit2가 출력됨. 값이 덮어씌워지기 때문에!

❓ 추후 학습하여 정확하게 알고 넘어가고 싶은 개념!

• this, ($ {this.함수명} : 선언); 의 정의
  : 지금은 찾아봐도 명확하게 이해가 되지 않는다.
  복습을 좀 더 해서 개념이 확실히 잡히면 다시 찾아봐야지!