잡동구리들

6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)

"use strict";
// Object-oriented programming
// class: template
// object: instance of a class
// JavaScript classes
// - introduced in ES6
// - syntactical sugar over prototype-based inheritance

// 1. Class declarations
class Person {
  // constructor
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }

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

const ellie = new Person("ellie", 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

// 2. Getter and Setters 방어적으로 만드는거
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    // if (value < 0) {
    //   throw Error("age can not be negative");
    // }
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User("Steve", "Jobs", -1);
console.log(user1.age);

// 3. Fields (public, private)
// Too soon!
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
class Experiment {
  publicField = 2;
  #privateField = 0; // 클래스 내부에서만 접근 가능
}

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

// 4. Static properties and methods
// Too soon!
class Article {
  static publisher = "Dream Coding";
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

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

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();

// 5. Inheritance
// a way for one class to extend another class.
class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color!`);
  }

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

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw();
    console.log("🔺");
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

  toString() {
    return `Triangle: color: ${this.color}`;
  }
}

const rectangle = new Rectangle(20, 20, "blue");
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, "red");
triangle.draw();
console.log(triangle.getArea());

// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true
console.log(triangle.toString());

크롬 브라우저의 개발자 도구에서 아래와 같이 코드를 작성하면 조금 특이한 결과 값(?)이 나온다. 

개발자 도구에서의 console 창은 어떤 명령에 대한 "결과 값"을 표시해주는 역할을 하는데 printNew 변수를 선언한 문장(const printNew)은 그 자체로는 아무런 결과 값을 보여주지 않기 때문에 undefined(첫번째 빨간 상자)가 출력된다. 두 번째 빨간 상자의 undefined도 console.log() 문장에 대한 동일한 결과라고 볼 수 있다. 

그렇다면 초록색 상자는 무슨 의미일까?

초록색 상자의 undefined는 printNew 변수에 할당된 함수의 결과 값중 하나로 봐야 하는 것인가?? 함수가 실행되면 먼저 "print"가 출력되고, 이후에는 console.log("print"); 구문 자체에 대한 결과값으로 "undefined"가 출력된 것으로 이해를 해야 하는건지 궁금하다.

reference : Why does console.log say undefined, and then the correct value?(stackoverflow)

5. Arrow Function은 무엇인가 함수의 선언과 표현   프론트엔드 개발자 입문편(JavaScript ES6)

// Function
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculates a value

// 1. Function declaration
// function name(parm1, param2) { body... return;}
// one function === one thing
// naming: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, createPoint
// function is object in JS
"use strict";

function printHello() {
  console.log("Hello");
}
printHello();

function log(message) {
  console.log(message);
}

log("Hello@2");
log(1234);

// 2. Parameters
// premitive parameters: passed by value
// object parameters: passed by reference
function changeName(obj) {
  obj.name = "coder";
}
const ellie = { name: "ellie" };
changeName(ellie);
console.log(ellie);

// 3. Default parameter (added in ES6)
// function showMessage(message, from) {
//   if (from === undefined) {
//     from = "unknown";
//   }
//   console.log(`${message} by ${from}`);
// }
// showMessage("Hi!");
function showMessage(message, from = "unknown") {
  console.log(`${message} by ${from}`);
}

showMessage("Hi!");

// 4. Rest parameter (add in ES6)
function printAll(...args) {
  // ... 배열 형태로 전달한다.
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }

  for (const arg of args) {
    console.log(arg);
  }

  args.forEach((arg) => console.log(arg));
}

printAll("dreaqm", "coding", "ellie");

// 5. Local scope (밖에서는 안이 보이지 않고, 안에서민 밖을 볼 수 있다.)
let globalMessage = "global"; // global variable
function printMessage() {
  let message = "hello";
  console.log(message); // local variable
  console.log(globalMessage);
  function printAnother() {
    console.log(message);
    let childMessage = "happy";
  }
  // console.log(childMessage); // error
  return undefined; // 생략 가능
}

printMessage();

// 6. Return a value
function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // 3
console.log(`sun: ${sum(1, 2)}`);

// 7. Early return, early exit
// bad
function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic...
  }
}

// good (조건이 맞지 않을 때는 바로 return 해서 함수를 종료하고 조건이 맞을때만 로직 실행하도록!)
function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }
  //long upgrade logic...
}

// First-class function
// functions are treated like any other variable
// can be assigned as a value to variable
// can be passed as an argument to other functions.
// can be returned by another function

// 1. Function expresstion
// a function declaration can be called earlier than it is defined. (hoisted) -> function print() {}
// a function expresstion is created when the execution reaches it. -> const print = funtcion () {}
const print = function () {
  // anonymous function
  console.log("print");
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

// 2. Callback function using function expression
function randomQuiz(answer, printYes, printNo) {
  if (answer === "love you") {
    printYes();
  } else {
    printNo();
  }
}
// anonymous function
const printYes = function () {
  console.log("yes!");
};

// named function
// better debugging in debugger's stack traces
// recursions
const printNo = function print() {
  console.log("no!");
};

randomQuiz("wrong", printYes, printNo);
randomQuiz("love you", printYes, print);

// Arrow function
// always anonymous
// const simplePrint = function () {
//   console.log("simplePrint!");
// };

const simplePrint = () => console.log("simplePrint");
const add = (a, b) => a + b;
const simpleMuliply = (a, b) => {
  // do something more
  return a * b;
};

// IIFE: Immediately Invoked Function Expression
(function hello() {
  console.log("Hello!");
})();

// Fun Quiz time
// function caluate(command, a, b)
// command: add, substract, devide, multiply, remainder

function calculate(command, a, b) {
  if (
    command !== "add" &&
    command !== "substract" &&
    command !== "divide" &&
    command !== "multiply" &&
    command !== "remainder"
  ) {
    console.log("wrong!");
  } else if (command === "add") {
    console.log(`${command}: ${a} + ${b} =`, a + b);
  } else if (command === "substract") {
    console.log(`${command}: ${a} + ${b} =`, a - b);
  } else if (command === "divide") {
    console.log(`${command}: ${a} + ${b} =`, a / b);
  } else if (command === "multiply") {
    console.log(`${command}: ${a} + ${b} =`, a * b);
  } else if (command === "remainder") {
    console.log(`${command}: ${a} + ${b} =`, a % b);
  }
}

calculate("remainder", 5, 2);

// ellie's answer
function calculate(command, a, b) {
  switch (command) {
    case "add":
      return a + b;
    case "substract":
      return a - b;
    case "divide":
      return a / b;
    case "multiply":
      return a * b;
    case "remainder":
      return a % b;
    default:
      throw Error("unknown command");
  }
}

4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

// 1. String concatenation
console.log("my" + " cat");
console.log("1" + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);

// 2. Numeric operators
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // muliply
console.log(5 % 2); // remainder
console.log(2 ** 3); // exponentiation

// 3. Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const preDecrement = --counter;
console.log(`preIncrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--;
console.log(`preIncrement: ${preDecrement}, counter: ${counter}`);

// 4. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

// 5. Comparison operators
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal

// 6. Logical operators: || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;

// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`); // 심플한 코드를 먼저 실행하게끔 하자

// && (and), finds the first truthy value
console.log(`and: ${value1 && value2 && check()}`); // 심플한 코드를 먼저 실행하게끔 하자

// often used to compress long if-statment
// nullableObject && nullableObject.something
// if (nullableObject != null) {
//   nullableObject.something;
// }

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    console.log("🤩");
  }
  return true;
}

// ! (not)
console.log(!value1);

// 7. Equality
const stringFive = "5";
const numberFive = 5;

// == loose qeuality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// === strict qeuality, no type conversion
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

// object equality by reference
const ellie1 = { name: "ellie" };
const ellie2 = { name: "ellie" };
const ellie3 = ellie1;
console.log(ellie1 == ellie2);
console.log(ellie1 === ellie2);
console.log(ellie1 === ellie3);

// equality - puzzler
console.log(0 == false); // true
console.log(0 === false); // false
console.log("" == false); // true
console.log("" === false); // false
console.log(null == undefined); //true
console.log(null === undefined); //false

// 8.  Conditional operators: if
// if, else if, else
const name = "Jongmin Choi";
if (name === "Jongmin Choi") {
  console.log("Welcome, Jongmin Choi!");
} else if (name === " coder") {
  console.log("You are amazing coder");
} else {
  console.log("unknown");
}

// 9. Ternary operator: ?
// condition ? value1 : value2
console.log(name === "Jongmin Choi" ? "yes" : "no"); // 간단히 쓸때만 쓰자

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = "chrome";
switch (browser) {
  case "IE":
    console.log("go away!");
    break;
  case "chrome":
  case "Firefox": // 결과값이 같으면 같이 묶는다.
    console.log("love you!");
    break;
  default:
    console.log("same all!");
    break;
}

// 11. Loops
// while loop, while the condition is trythy,
// body code is executed.
let i = 3;
while (i > 0) {
  //   let j = [];
  console.log(`while: ${i}`);
  //   j.push(i);
  i--;
  //   console.log(j);
}

// do while loop, body code is executed first,
// then check the condition.
do {
  console.log(`dowhile: ${i}`);
  i--;
} while (i > 0);

// for loop, for(begin; condition; step)
for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

for (let i = 3; i > 0; i = i - 2) {
  // inline variable declaration
  console.log(`inline variable for: ${i}`);
}

// nested loops (cpu에 부담이 간다 좋지 않다.)
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

// break, continue
// Q1. iterate from 0 to 10 and print only even numbers (use continue)
let evenNumbers = [];

for (let i = 1; i < 11; i++) {
  if (i % 2 === 1) {
    continue;
  }
  evenNumbers.push(i);
}

console.log(evenNumbers);

// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)

let nums = [];

for (let i = 0; i < 11; i++) {
  if (i > 8) {
    break;
  }
  nums.push(i);
}

console.log(nums);

1. 배열(array)의 특징

• 순서(index)가 존재하며 순차적으로 할당된다.
• index를 이용한 무작위 접근(random access: 메모리의 주소만 알고 있으면 어디에서도 죽시 데이터를 읽어낼 수 있는 호출 방식)이 가능하기 때문에 검색이 빠르다.
• 순서가 있기 때문에 자료의 삽입과 삭제가 비효율적이다.(자료의 삽입/삭제시 다음 항목 모든 요소의 이동이 필요해진다.)

2. 배열과 반복문을 함께 자주 사용하는 이유

반복문은 동일한 명령을 정해진 횟수만큼 반복하여 수행하도록 제어하는 명령문으로 구문(syntax)에는 주로 변수 증감을 위한 명령을 많이 사용하는데, 배열의 index가 해당 역할을 수행하기에 적합하기 때문에 배열과 반복문은 자주 함께 쓰인다. 

let myArray = [1,2,3,4,5,6,7,8,9,10]

for (i = 0; i < 10; i++) {
  myArray[i] += 1;
}

console.log(myArray); // result: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

아래와 같이 test 변수에 ture 값이 주어진 경우 if문에서는 결과값으로 true가 출력된다. 

let test = true

console.log(test)

if(test) {
  console.log(test) 
} else{
  console.log("리턴된 값이 없음");
}

console
>> true
>> true

그러나 아래와 같이 test 변수에 아무런 값이 없거나(undefined), 0, null 값을 갖게 되면 Javascript는 이 값들을 False boolean 값으로 변환을 해준다. 즉, false는 아니지만, false 같은 역할로 변경해주는 것.

let test

console.log(test) // expected output: undefined

if(test) { 
  console.log(test)
} else{
  console.log("리턴된 값이 없음"); 
}

console
>> undefined
>> 리턴된 값이 없음

이와 같이 거짓 같은 값(falsy)은 6개가 존재한다. 참 같은 값(truthy)은 이 6개를 제외한 모든 값이다. 

• 0
• NaN
• false
• null
• undefined
• ''

아직 실질적으로 truthy, falsy를 사용할 만한 프로그래밍 실력이 없다 보니 이 개념을 활용해서 문제를 해결하신 분의 블로그를 링크로 달아둔다. Truthy/Falsy 리뷰

1. 변수란?

• Variable, 변하는 값

2. 변수가 필요한 이유?

• 데이터 보관함의 역할(보관함의 이름은 변수명)
• 상황에 따라 변하는 값을 저장해야 할 때 필요

3. 변수를 선언(declare)하는 방법?

• var

var birthYear = 1981; // var(변수) birthYear(변수명) = 1981(데이터)
var birthYear = 1980;

console.log(birthYear) // 1980

/* var 변수의 특징
1. 변수명 재선언이 가능하다.
2. 코드 전체에서 사용이 가능하다.
3. 위 두가지 특징으로 인해 코드가 복잡해질 경우, 어디서 사용되고 있는지 파악이 힘들고 값이 바뀔 우려가 있다.
*/

• let(ES6 이후)

let birthYear = 1981; // let(변수) birthYear(변수명) = 1981(데이터)
birthYear = 1980;

console.log(birthYear) // 1980

/* let 변수의 특징
1. 변수명 재선언이 불가능하다.
2. 변수값 재할당이 가능하다.
3. 특정 블록({})을 벗어나면 사용할 수 없다.
*/

• const(ES6 이후)

const birthYear = 1981; // const(변수) birthYear(변수명) = 1981(데이터)

/* const 변수의 특징
1. 변수명 재선언이 불가능하다.
2. 변수값 재할당이 불가능하다. 
*/

4. 변수를 선언하는 규칙 세 가지

• 이름은 의미 있게 짓는다.
• 여러 단어를 사용한 경우 camelCase(낙타 모양)으로 만든다.
• 변수 이름의 첫 글자는 반드시 "문자", "밑줄(_)", "달러 기호($)"로 시작한다.