JavaScript + a | Basics (3)

Class

클래스는 객체지향 프로그램의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체로 구성하고, 객체들 간 서로 상호작용 하도록 작성하는 방법이다. 다시말해, 우리가 사물을 인지하는 방식을 프로그래밍에 접목한다.

let car = {
  name: 'car',
  price: 200000,
  getName: function() {
  return this.name;
}, 
  getPrice:function() {
  return this.price;
},
  applyDiscount: function(discount) {
  return this.price * discount; 
  } 
}

이처럼 객체의 property 값에는 함수도 넣을 수 있다.
getPrice 함수를 호출 해보자!

const carPriceByFunction = car.getPrice();
console.log(carPriceByFunction); // 결과: 200000

"this"라는 키워드를 사용하면 해당 객체 property 접근이 가능하다.
getPrice 메소드에서 this.price로 price 키에 접근할 수 있고 값을 가져올 수 있다.

생성자 (Constructor)

const morning = new Car('Tesla', 5000000);

이처럼 class로 객체를 생성하는 과정을 '인스턴스화' 라고 부른다.
class는 새로운 instance를 생성할 때마다 constructor() 메소드를 호출한다.
모든 instance는 클래스에서 정의된 범위 내에서만 작동한다. 정확성, 안정성, 예측성 측면에서 Class 기반 언어가 Prototype 기반 언어보다 결과가 조금 더 좋다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• Car는 class이름 이며, 시작은 항상 대문자 그리고 CamelCase로 작성해야 한다.
• Car class의 instance를 생성할 때마다 constructor 메소드가 호출된다.
• constructor() 메소드는 name과 price 2개의 인자를 받는다.
• constructor() 메소드에 'this'키워드 사용, 해당 instance를 의미한다.
• constructor() 에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price, property 값을 할당한다.
• 멤버 변수? class내에서 name, price와 같이 변경 가능한 상태값이고 class 내부 context 어느 곳에서나 사용할 수 있는 변수이다.
• 멤버 변수는 'this'키워드로 접근한다.

인스턴스(Instance)

인스턴스(Instance)는 class통해 생성된 객체이다. class의 property이름과 method를 갖는 객체이다. 모두 다른 property값을 가지고 있다.

const Tesla = new Car('Tesla', 5000000);

• 인스턴스는 Class 이름에 new를 붙여서 생성한다.
• 클래스 우측에 ( ) 괄호를 열고 닫고, 내부에는 constructor 에서 필요한 정보를 인자로 넘겨준다.
• Car Class의 instance를 Tesla 라는 변수에 저장한다.
• Car class의 새로운 instance를 생성하려면 'new' 키워드가 필요한데 'new'키워드는 constructor() 메소드를 호출하고 새로운 instance를 return 해준다.
• 'Tesla'라는 String과 5000000이라는 Number를 Car 생성자에게 넘겨주었고, name, price, property 값이 할당되었다.

메소드(Methods)

객체가 property값으로 가지고 있는 것을 메소드라고 부른다.
다만 객체는 property마다 ,(콤마)로 구분해줘야 하지만, 클래스는 그렇지 않다.

class Car {
  constructor(name, price) {
	this.name = name;
    this.price = price;
    this.department = "강남점"
}
	applyDiscount(discount) {
	return this.price * discount;
}
	changeDepartment(departmentName) {
	this.department = departmentName;
}

class 생성을 연습해보겠습니다.

• MyMath 라는 class를 생성해주세요.
• constructor 에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
• 총 4개의 메서드를 구현해주세요.
  • getNumber : 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 → ex) [1, 2]
  • add : 두 개의 숫자를 더하는 메서드
  • substract : 두 개의 숫자를 빼는 메서드
  • multiply : 두 개의 숫자를 곱하는 메서드

class MyMath {
  constructor(num1, num2) {
  this.num1 = num1;
  this.num2 = num2;
}
  getNumber() {
  let arr = [this.num1, this.num2];
  return arr;  
}
  add() {
  return this.num1 + this.num2;
}
  substract() {
  return this.num1 = this.num2;
}
  multiply () {
  return this.num1 * this.num2;
  } 
}

Object (3)

{ } 모양의 객체를 object literal(객체 리터럴)이라고 부른다.
객체는 키(key) - 값(value) 쌍으로된 데이터의 모음으로써 순서가 뒤 바뀌어도 아무 문제가 없다.
key는 property name이라고 하며, value는 property value라고 말한다.

let name = '키';
console.log(difficult[name]);

변수에 접근할 때는 항상 대괄호로 접근해야 한다.

property 할당

const mutableObj = {
	name: '객체'
};

mutableObj = {
	name: '수정'
}

변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능하지만, 프로퍼티에 접근해서 내용을 수정하거나, 추가하는 것은 에러가 나지 않는다.

중첩된 객체(Nested Object)

let nestedObj = {
  type: {
    year: '2019',
	'comment-type': [{
	 name: 'simple'
    }]
  }
}

// simple 출력 방법
console.log(nestedObj.type.['comment-type][0].name);

getAnswer 함수를 구현해 주세요.

• getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.

  let myProfile = {
     name: '김개발',
     address: {
       email: sss]]]]]]]]]]]]
     },
     'my favorite': {
       food: [{
         name: '샐러드',
         price: 3500
       }, {
         name: '삼겹살',
         price: 15000
       }],
       hobby: ['축구']
     }
   }
   function getAnswer() {
  let mySalad = myProfile['my favorite'].food[0].name;
  return mySalad;
  }
  getAnswer(); // 결과: '샐러드'

객체의 키를 변수로 접근

const information = {
  name: '김개발'
}		// 키 하나를 생성하고 키에 값을 할당하려면?
const verb = 'developer'
const project = 'kakao' // verb의 값을 키로 사용하고 project의 값을 키의 값으로 사용한다고 했을때

information[verb] = project // [A]
information.developes = 'facebook' // [B] 
// A와 같은 방법으로 변수 verb와 project가 가지는 값에 따라 다른 키 값을 가지는게 가능하다.

객체 순회하기

객체는 배열처럼 순회가 가능하지만 어느 순서에 따라 객체의 키에 접근한지 알 수 없기때문에 객체의 순회는 순서가 보장되지 않는다.

const arr = ['cocount', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]) // 결과:'cocount' 'banana''pepper' 'coriander'
} // 객체는 length 키가 따로 주어져있지 않고, index도 없기 때문에 이런식의 반복문은 불가능하다. 

Object.keys()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.

const obj = {
  name:'김개발',
  job :'developer',
  gender:'남성',
}
Object.keys(obj) //[ 'name', 'job', 'gender' ]

Object.keys 메소드가 리턴하는 값은 배열이기 때문에 반복문이 사용가능하다.

const keys = Object.keys(obj) // [ 'name', 'job', 'gender' ]

for (let i = 0; i < keys.length; i++) {
const key = keys[i] // 각각의 키
const value = obj[key] // 각각의 키에 해당하는 값
console.log(value) // '김개발' 'developer' '남성'
}

#### Object.entries
```jsx
const values = Object.values(obj)
// values === ['김개발', 'developer', '남성']

const entries = Object.entries(obj)

Object.entries는 객체의 키와 값의 쌍으로 이루어진 2배열을 리턴한다.
각 배열에서 index[0]은 각각의 키를, inxdex[1]은 값의 해당 키를 가지게 된다.

for-in

객체를 순회하는 두번째 방법은 for-in이다. for문과 같은 종류!

const arr = ['coconut', 'banana', 'pepper', 'coriander']

for(let i = 0; i < arr.length; i++) {
console.log(i) // 0 1 2 3
console.log(arr[i]) // 'coconut' 'banana' 'pepper' 'coriander'
}

// for (let i = 0; i < arr.length; i++) for문에 이 문법의 축약버전은
// for (let i in arr) {
console.log(i)
console.log(arr[i] // 코드가 훨씬 간결해졌다!
}

```jsx
const obj = {
  name: '김개발'
  job : 'developer'
  gender: '남성'
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
} // for in문을 사용하면 index에 해당하는 변수가 각각의 키를 해당하는 문자열을 할당받는다.