[TIL 2021.10.11] js

Today I Learned
youtube dream coding - js 1~9

operator.js

// 1. String concatenation
console.log('my' + 'cat');
console.log('1' + 2);
console.log(`String liiterals: ''''

1+2= ${1 + 2}`);

// 2. Numeric operatiors

// 3. Increment and ecrement operatos
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(`postIncrement: ${postIncrement}, counter: ${counter}`);

// 4. ASsignment operators

// 6. Logical operatios: || , && , !
const value1 = false;
const value2 = 4 < 2;

function check() {
    for (let i = 0; i < 10; i++) {
        console.log("무의미한 함수");
    }
}

console.log(`or: ${value1 || value2 || check()}`);
// value1 이 true이면 연산을 멈추기때문에 가장 심플한것부터 먼저 놓는게 좋다.

console.log(`and: ${value1 && value2 && check()}`);
// 이것도 처음에 false나오면 뒤에체크안하기떄문에 간단한거먼저

// if (nullableObject != null) {
//     nullableObject.something;
// }

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

// ==
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// ===
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

const kyu1 = { name: 'kyu' };
const kyu2 = { name: "kyu" };
const kyu3 = kyu1;
console.log(kyu1 == kyu2); // 레퍼런스가 다르기 때문에
console.log(kyu1 === kyu2); // 타입에 관계없이 레퍼런스가 다르기떄문에
console.log(kyu1 === kyu3); // 같은 레퍼런스를 가리키고있음

function.js

// one function === one thing
// naming: doSomething, command, verb
// 함수는 오브젝트로 감지하기 때문에 function을 변수할당, 파라미터전달, 함수리턴도 가능

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

function log(message) {
    console.log(message);
}
log('helllllooo');
log(1234);

// 2. Parameters
// primitive: passed by value
// object: passed by reference
function changeName(obj) {
    obj.name = 'coder';
}
const kyu = { name: 'kyu' };
changeName(kyu);
console.log(kyu);


// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // 자동으로 두번째는 undefined

// 4. Rest parameters (added 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);
    } // of를 쓰는법

    args.forEach((arg) => console.log(arg)); // foreach와 arrow function
}
printAll('dream', 'coding', 'kyu');

// 5. local function 밖에서는 안이 보이지 않고 안에서만 밖을 볼수있다.
let globalMessage = 'global';
function printMessage() {
    let message = 'heelllo';
    console.log(message); //local variable
    console.log(globalMessage);
    function printAnother() { // 부모상위에서는 부를수없다
        console.log(message);
        let childMessage = 'hellllllllllo';
    }
    // console.log(childMessage);// 접근불가
    //중첩된함수에서 자식에서 부모함수로 접근가능한걸 클로져
}
printMessage();

function sum(a, b) {
    return a + b;
    // return undefined 가 생략되어있음
}

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

// good
function upgradeUser(user) {
    if (user.point <= 10) {
        return; // 조건이 맞지않으면 빨리 exit하도록
    }
    // 조건에 로직을 처리하는걸 뒤에
    // long upgrade logic..
}

// First-class function
// assigned, passed, returned 가능
// 1. Function expression
// 함수가 선언 되기이전에 호출해도 호출가능 호이스팅..
// 자바스크립트엔진이 선언된걸 젤 위로 올려줘서.
const print = function () { //anonymous functioㅜ ?named 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');
}

// name function
// better debugging in debugger's stack traces
// recursions
const printNo = function print() {
    console.log('no');
    // print(); 재귀함수
}
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

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

const simplePrint2 = () => console.log('simeplepele');
// removed  "function"
// removed block in one line function

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

// IIFE: Immediately Invoked Function Expression
// 함수 만들고 바로 실행하고깊을때 아래처럼 괄호괄호 하면 됨 
(function hello() {
    console.log("IIFE");
})(); 

object.js

// Objects

// 1. Literals and properties
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

// object - {key : value};
function print(person) {
    console.log(person.name);
    console.log(person.age);
}

const kyu = { name: 'kyu', age: 4 };
console.log(kyu);

kyu.hasJob = true; // 객체에 정의하지 않았는데 추가가 가능
console.log(kyu.hasJob);

delete kyu.hasJob; // 삭제도 가능 ㅋㅋ
console.log(kyu.hasJob);

// 2. Computed properties
// key should be always string
console.log(kyu.name);
console.log(kyu['name']);
kyu['hasJob'] = true;
console.log(kyu.hasJob);

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

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = makePerson('kyu', 30);
console.log(person4);

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

// 4. Constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
    return this;
}

// 5. in operator
console.log('name' in kyu);
console.log('age' in kyu);
console.log('random' in kyu);

// 6. for..in vs for..of
// for (key in obj)
console.clear();
for (key in kyu) {
    console.log(key); // 모든 key를 받고싶을때
}

// for (value of iterable)
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. Fun cloning
// Objectassign[dest, [obj1, obj2, obj3...]]
const user = { name: 'kyu', age: '20' };
const user2 = user;
console.log(user); // user2가 참조하는 name을 변경

// old way
const user3 = {};
for (key in user) {
    user3[key] = user[key];
}
console.clear();
console.log(user3);

const user4 = Object.assign({}, user);
console.log(user4);

class.js

'use strict';

// OOP 
// class: template
// object: instance of a class
// JavaScropt classes
// - introduced in ES6
// - syntactical suger over prototype-based inheritance

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

    speak() { // 메서드작성시 function 안적어도됨
        console.log(`${this.name}: hello!`);
}
}
const kyu = new Person('kyu', 29);
console.log(kyu.name);
console.log(kyu.age);
kyu.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) { 
        // this.age = value; // 게터, 세터가 또 호출함
    // }

    set age(value) {
        // if (value < 0) {
        //     throw Error('age can not be negative');
        // }
        this._age = value < 0 ? 0 : value;
        // this._age = value; // 그래서 보통이렇게 set한다
        
    }
}

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

// 3. Fields, (public, private)

class Experiment {
    publicField = 2;
    #privateField = 0; // 프라이빗
    
    test() {
        console.log(this.#privateField);
    }
}

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

// 4. Static properties and methods
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
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();
        console.log('삼각형');
    }
    getArea() { //override
        return (this.width * this.height) / 2;
    }

}

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);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);

array.js

'use strict';

// Array

// 1. Declaration
const arr1 = new Array();
const arr2 = [1, 2];

// 3. Looping over an array
const fruits = ['🍏', '🍌'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// for of
console.clear();
for (let fruit of fruits) {
    console.log(fruit);
}

// forEach
console.clear();
fruits.forEach((fruit) => console.log(fruit));

// 4. Addition, deletion, copy
// push, pop, shift, unshift 등
// shift랑 unshift 는 push랑 pop보다 훨씬느리다
// 왜야면 앞에 데이터를 넣기 위해서 뒤에 있는것들을 한칸씩 밀어야하니까