📝 오늘 한 것

1. 콜백 함수 / 화살표 함수 / class 선언 / object 생성 / class 속성 / 상속 & 다양성 학습

2. 자바스크립트 강의 수강 (함수, class)

3. 문자열 메서드 학습 - [TIL] 210901 참고

📖 학습 자료

1. 드림코딩 유튜브 '자바스크립트' 강의 5, 6편

2. 코딩애플 유튜브 '객체지향 Class 문법 10분만에 이해시켜줌 (자바스크립트)'

3. 사전 학습 가이드 STEP 2 string 문자열 메서드

📚 배운 것

1. 함수 표현식

1) 콜백 함수(callback function)

매개변수에 정의된 함수들 중 상황에 맞는 함수를 호출하는 함수

const printYes = function () {
  console.log('Yes');
}
// 1. printYes라는 변수에 함수 할당

const printNo = function hey () {
  console.log('No');
}
// 2. printNo라는 변수에 함수 할당

function random(answer, printYes, printNo) {
  if (answer === 'happy') {
    printYes();
  } else {
    printNo();
  }
}
// 콜백 함수 정의

random('happy', printYes, printNo); // No
// 인수를 매개변수에 전달해주면서 함수 호출

주의 ❗

• 콜백 함수에서 (answer, printYes, printNo)는 그 자체로 함수 이름이 아니라 함수가 할당된 변수이다. (1, 2. 코드 짤 때 주의할 것)

• 2.에서 함수 이름을 지정한 이유는 디버깅 할 때 스택 추적(stack trace)에 함수 이름이 나오도록 하기 위함이다.

2) 화살표 함수(arrow function)

• 간결하게 표현한 함수

• function 키워드와 { }을 빼고, 한 줄에 간결하게 적을 수 있다

const simplePrint1 = function () {
  console.log('simplePrint1');
}
// 이걸 화살표 함수로 표현하면

const simplePrint2 = () => console.log('simplePrint2');

const add1 = function (a, b) {
  return a + b;
}
// 이걸 화살표 함수로 표현하면

const add2 = (a, b) => a + b;

• 한 줄 이상의 복잡한 함수라면 { }을 사용할 수도 있다.

const simpleMultiply = (a, b) => {
  // do somthing more
  return a + b;
};

cf. IIFE (즉시 실행 함수 표현)

• 원래는 함수를 선언하고 그 밑에 foo(); 라는 식으로 함수를 호출해줘야 한다

• 그러나 괄호를 2번 사용해 함수를 선언함과 동시에 호출할 수 있다.

(function IIFE () {
  console.log('IIFE');
})(); // IIFE

cf. 퀴즈

1. 입력받은 command에 따라 a와 b의 숫자 값을 더하거나 빼거나 나누거나 곱하는 함수를 만들어라 (함수 이름 calculate)
2. command는 add, substract, divide, multiply, reminder 중에서 받아서 처리할 것
3. 다른 command가 들어오면 그건 어떻게 처리할지도 생각해볼 것

function calculate (command, a, b) { // 1을 구현
  switch (command) {
    case 'add': // 2를 구현
      return a + b;
    case 'substract':
      return a - b;
    case 'divide':
      return a / b;
    case 'multiply':
      return a * b;
    case 'reminder':
      return a % b;
    default: // 3을 구현
      throw Error('unknown command');
  }
}

console.log(calculate(`add`, 2, 3)); // 5

2. class VS object

💡 class

• 데이터는 들어 있지 않고, 이런 데이터들이 들어갈 수 있다고 틀만 잡아놓은 것
• 한 번만 선언해준다
• 정의만 한 것이기에 실제로 메모리에 할당되지는 않는다

💡 object

• class에 데이터를 넣은 것
• class를 이용해 여러 번 생성 가능
• 실제로 메모리에 할당된다

1) class란?

• 관련 있는 변수나 함수들을 묶어놓은 것

  • 변수 : 속성(상태) : fields
  • 함수 : 행동 : methods

• 비슷한 object를 많이 만들 일이 있을 때, class를 선언하면 object를 쉽게 많이 생성할 수 있다.

• 데이터 class : 속성(fields)은 없고 행동(methods)만 있는 class

• 캡슐화(encapsulation) : 내부적으로만 볼 수 있는 변수와 바깥에서도 볼 수 있는 변수로 나눈다

• class를 이용해 상속과 다양성이 일어날 수 있다

→ 이 모든 것들은 javascript가 객체 지향 언어이기 때문에 가능한 것이다

2) class 선언

class Person {
  // 생성자(constructor)
  constructor(name, age) {
    // 속성(fields)
    this.name = name; // 새로 생성되는 object에 {name: name}을 추가해라
    this.age = age;
  }

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

개념 정리 ❗

• class 이름 : 관습적으로 대문자
• 생성자(constructor) : object를 만들 때 필요한 데이터가 전달됨
• this : Person으로부터 생성되는 object (즉, instance)
• 속성(fields), 행동(methods) : 전달된 데이터가 할당됨

3) object 생성

const honey = new Person('syong', 20);

// 위와 아래는 같은 내용이다. 원래 4줄 쓸 것을 1줄에 담을 수 있다.

const honey = {
  name : 'syong',
  age : 20
}

console.log(honey.name); // syong
console.log(honey.age); // 20 honey.speak(); // syong: hello!
honey.speak(); // syong: hello!

개념 정리 ❗

• 새로운 object를 만들 때 new라는 키워드 사용

3. 접근자 프로퍼티 🙋‍♀️💢💢

객체가 가진 프로퍼티 값을, 객체 바깥에서 읽거나 쓰기 위해 사용됨

1) get

• 프로퍼티를 읽고자 할 때 실행된다

• get이라는 키워드를 이용해 값을 return 할 수 있다

2) set

• 프로퍼티에 값을 할당하고자 할 때 실행된다

• set이라는 키워드를 이용해 값을 설정하므로 'value'를 받아와야 한다

ex) age 값이 -1인 경우, console 창에 다른 값을 띄워준다

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }


  // getter
  get age() {
    return this._age;
    // get age()를 호출하면 this.age를 return 하게 된다
  }


  // setter
  set age(value) {
  if (value <0) {
    throw Error('나이는 음수일 수 없다')
  } 
    this._age = value;
    // 새로운 value를 받으면 그 value를 this.age에 할당하게 된다
  }
}


const user1 = new User('Steve', 'Jobs', -1);
console.log(user1.age); // '나이는 음수일 수 없다'는 문구의 error가 뜸

※ setter 영역에서 if 조건문을 지우고, this._age = value;를 this._age = value < 0 ? 0 : value;로 바꿀 수도 있다

주의 ❗

getter, setter 안의 변수는 age라고 똑같이 쓰면 안된다

1. age()라는 getter를 정의하는 순간, this.age는 메모리에 있는 데이터를 읽어오는 게 아니라 getter를 호출하게 된다

2. age()라는 setter를 정의하는 순간, 값을 할당할 때 바로 메모리에 있는 값을 할당하는 게 아니라 setter를 호출하게 된다
   즉, 전달된 value를 this.age에 할당할 때 메모리의 값을 업데이트 하는 게 아니라 setter를 호출하게 된다

3. 위 예제에서는 1, 2를 방지하기 위해 getter와 setter 안에서 쓰이는 변수 이름에 _를 추가해 변화를 주었다

4. 결과적으로 User라는 함수 안에서 변수가 총 3개(firstName, lastName, _age) 있게 된다

4. class 속성(fields)

1) public fields

class 외부에서도 접근 가능

2) private fields

• class 내부에서만 접근 가능, 외부에서는 값을 읽을 수도 변경할 수도 없다

• class를 선언할 때 constructor을 쓰지 않고, 바로 fields를 적을 수 있다
  이때 field 앞에 #를 붙이면 private field가 된다

class Sprite {
  pubilcField = 2;
  #privateField = 0;
}

const coke = new Sprite ();
console.log(coke.pubilcField); // 2
console.log(coke.privateField); // undefined

5. class의 static 속성과 메서드

• object의 데이터와 상관없이 class에서 공통적으로 반복되어 쓰이는 속성이나 메서드 앞에 static을 붙여준다

• static은 object마다 할당되는 것이 아니고 class 자체에 붙어있는 것이다

• 그러므로 새로 만들어진 object의 static 속성값이나 메서드를 가져오기 위해서는 그 object의 이름이 아니라 class 이름을 이용해야 한다

class Article {
  static publisher = 'song';
  construnctor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);

console.log(Article.publisher);
// song → console.log(Article1.publisher) 하면 undefined 나옴
Article.printPublisher();
// song → Article1.printPublisher() 하면 undefined 나옴

6. 상속 & 다양성

1) 상속

extends라는 키워드를 이용하면 공통되는 속성과 메서드들을 매번 일일이 작성하지 않고도 편하게 재사용할 수 있다.

ex) 도형 만들기 (사각형, 삼각형)

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

// 사각형
class Rectangle extends Shape {}
// extends 키워드를 이용해 Shape의 속성과 메서드들을 Rectangle에 그대로 가져옴 (상속)
const rectangle = new Rectangle (20, 20, 'blue');
rectangle.draw(); // drawing blue color of 

// 삼각형
class Triangle extends Shape {}
const triangle = new Triangle (20, 20, 'red');
triangle.draw(); // drawing red color of

2) 다양성

필요한 함수만 재정의(overriding)해서 사용할 수 있다.

ex) 사각형 넓이 ≠ 삼각형 넓이

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

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); // 부모의 draw() 메서드 호출
    console.log('❤'); // 재정의(overriding)
  }
  getArea() {
    return (this.width * this.height) / 2; // 재정의(overriding)
  }
}

// 사각형
const rectangle = new Rectangle (20, 20, 'blue');
rectangle.draw(); // drawing blue color of
console.log(rectangle.getArea()); // 400

// 삼각형
const triangle = new Triangle (20, 20, 'red');
triangle.draw(); // drawing red color of ❤
console.log(triangle.getArea()); // 200

한편,
✔ draw() 메소드는 rectangle.draw();라고 쳐도 값이 나온다.
✔ getArea() 메소드는 console.log(triangle.getArea());라고 쳐야 값이 나온다.

7. instanceof 연산자

• instanceOf 왼쪽에 있는 object가 오른쪽에 있는 class를 이용해 만들어진 object, 즉 instance인지 아닌지를 확인해주는 연산자

• true 혹은 false로 return한다

console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true

💡 3번째 줄 설명

• 자바스크립트에서 만든 모든 object/class들은 자바스크립트에 있는 object를 상속한 것이다.
• 따라서 자바스크립트에서 만든 모든 object들은 자바스크립트에 있는 Object의 메서드들을 가져와서 재정의할 수 있다.
  (VS code에서 object 위에 ctrl/command 누르고 클릭하면 메서드 확인 가능)

🙋‍♀️ 질문

1. 여기 바로가기 (접근자 프로퍼티 getter / setter) → 이해했다 [TIL] 211010 참고

✨ 내일 할 것

1. 노마드 코더 유튜브 '바닐라 자바스크립트' 강의 1-10(object) 수강

2. 드림코딩 유튜브 '자바스크립트' 강의 7편(object) 수강