HighLight in your life~

while문 : 조건을 체크하고 true이면 괄호안의 명령을 계속 실행한다.

Javascript에서 정해진 숫자만큼 반복하기 위해서 아래의 for문을 사용합니다.

1. 논리연산자

// ES2021 자바스크립트에 추가된 새로운 기능들을 알아보자!

----------------------------------------------------------------------------------

console.clear();

// ES2021
// String.replaceAll

const str1 = "Hello World";
console.log(str1.replaceAll("l", "~"));

const str2 = "Hello World";
console.log(str2.replace(/l/, "~"));

const str3 = "Hello World";
console.log(str3.replace(/l/g, "~"));

const str4 = "I'm [Mike]. This is Tom's [Car].";
console.log(str4.replaceAll("[", "~").replaceAll("]", "~"));
console.log(str4.replace(/\[/g, "~").replace(/\]/g, "~"));

----------------------------------------------------------------------------------

console.clear();

// ES2021
// Promise.any

const rejPromise = new Promise((res, rej) =>{
  setTimeout(()=>{
    res("fail..")
  }, 1000)
});

const resPromise = new Promise((res, rej) =>{
  setTimeout(()=>{
    res("success")
  }, 2000)
});

// Promise.race : 프로미스 중에 가장 먼저 완료된 결과값으로 이행/거부 
Promise.race([rejPromise, resPromise])
  .then(() => console.log("성공"))
  .catch(e => console.log(e));

// Promise.any : 프로미스 중에 가장 먼저 이행된 객체 반환
Promise.any([rejPromise, resPromise])
  .then(() => console.log("성공"))
  .catch(e => console.log(e));

----------------------------------------------------------------------------------

function add(num1, num2){
  console.log(num1 + num2);
}

add(); //NaN

----------------------------------------------------------------------------------

function add(num1, num2){
  num1 = num1 || 0;
  num2 = num2 || 0;
  console.log(num1 + num2);
}

add(); // 0

----------------------------------------------------------------------------------

function add(num1, num2){
  num1 ||= 0;
  num2 ||= 0;
  console.log(num1 + num2);
}

add(); // 0

----------------------------------------------------------------------------------

name = name && `Hello ${name}`;
name && = `Hello ${name}`;

name = name ?? "Mike"
name ??= "Mike"

// ?? Nullish coalescing operator : null 병합 연산자
|| : 앞의 값이 false이면 뒤의 값 반환
?? : 앞의 값이 null 이나 undefined이면 뒤의 값 반환

let num = 0;
let a = a || 3; // 3
a // 3

let b = num ?? 3;  // num이 null 혹은 undefined 일 때만 3
b // 0

----------------------------------------------------------------------------------

let billion = 1000000000 // 10억
let billion_bar = 1_000_000_000 // 10억
billion_bar

----------------------------------------------------------------------------------

// WeakRef = weak reference

// 가비지 컬렉터
// 약한 참조 = 가비지 컬렉터 대상

let user = {name:'Mike', age:30}
const weakUser = new WeakRef(user);

user = null;

const timer = setInterval(()=>{
  const wUser = weakUser.deref();  // deref 객체 참조
  if(wUser){
    console.log(wUser.name);
  } else {
    console.log('제거 되었습니다.');
    clearInterval(timer)
  }
}, 1000)

----------------------------------------------------------------------------------

class MyCache {
  constructor() {
    this.cache = {}
   }

  add(key, obj) {
    this.cache[key] = new WeakRef(obj)
  }

  get(key) {
    let cachedRef = this.cache[key].deref()
    if(cachedRef) {
       return cachedRef
    } else {
      return false;
    }
  }
}

----------------------------------------------------------------------------------

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

https://youtu.be/W6NZfCO5SIk

Beginner Vanilla Javascript Project Tutorial

https://youtu.be/Ttf3CEsEwMQ

Using the setInterval() function in JavaScript

https://youtu.be/ubLC1JxMqfY

Animate with setInterval() and clearInterval()

https://youtu.be/ICTV6joUFV4

Intro to Game Development with JavaScript - Full Tutorial

https://youtu.be/3EMxBkqC4z0

The Easiest Javascript Game Ever

https://youtu.be/bG2BmmYr9NQ

Ep1: How to Make HTML5 Games: Javascript Tutorial for Beginners JS Guide

https://youtu.be/XgK4YaMqQFg?list=PLh-MBXZEiyMhulEqYE3gn63idSAKG6Sx1

Code Mario in JavaScript with Kaboom.js!

https://youtu.be/2nucjefSr6I?list=TLPQMjIwMzIwMjLmp51WUPOnKw

HTML5 Canvas and JavaScript Mario Game Tutorial

https://youtu.be/4q2vvZn5aoo?list=TLPQMjIwMzIwMjLmp51WUPOnKw

JavaScript Game Tutorial - 2D Tower Defense

https://youtu.be/QxYg8-mhhhs?list=TLPQMjIwMzIwMjLmp51WUPOnKw

Javascript Side Scroller Game Tutorial

https://youtu.be/7JtLHJbm0kA

Pokémon JavaScript Game Tutorial with HTML Canvas

https://youtu.be/yP5DKzriqXA

------------------------------------------------------------------------------------------

Learn DOM Manipulation In 18 Minutes

https://youtu.be/y17RuWkWdn8

JavaScript DOM Crash Course - Part 1

https://youtu.be/0ik6X4DJKCc

------------------------------------------------------------------------------------------

JavaScript Programming - Full Course

https://youtu.be/jS4aFq5-91M

------------------------------------------------------------------------------------------

JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge (Full Course)

https://youtu.be/nZ1DMMsyVyI

Generator : 함수와 실행을 중간에 멈췄다가 재개할 수 있는 기능

function* fn() {
  console.log(1);
  yield 1;
  console.log(2);
  yield 2;
  console.log(3);
  console.log(4);
  yield 3;
  return "finish";
}

const a = fn();

a
a.next();

-------------------------------------------------------------------

Generator : 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능

next(), return(), throw()

-------------------------------------------------------------------

a.next();

a.return(`END`);

a.next();

function* fn() {
 try{
  console.log(1);
  yield 1;
  console.log(2);
  yield 2;
  console.log(3);
  console.log(4);
  yield 3;
  return "finish";
 } catch (e) {
  console.log(e);
 }
}

const a = fn();

a.next();
a.next();

a.throw(new Error('err'));

a.next();

-------------------------------------------------------------------

iterable
 - Symbol.iterator 메소드가 있다.
 - Symbo.iterator 는 iterator를 반환해야 한다.

iterator
 - next 메서드를 가진다.
 - next 메서드는 value와 done 속성을 가진 객체를 반환한다.
 - 작업이 끝나면 done은 true가 된다.

-------------------------------------------------------------------

const arr = [1, 2, 3, 4, 5];
const it = arr[Symbol.iterator]();
it.next();
it.next();
it.next();
it.next();
it.next();

for(let num of arr) {
  console.log(num)
};

-------------------------------------------------------------------

function* fn() {
  yield 4;
  yield 5;
  yield 6;
}

const a = fn();

a[Symbol.iterator]() === a;

for(let num of a) {
  console.log(num);
}

const str = 'hello';
str[Symbol.iterator]

const xx = str[Symbol.iterator]()

xx.next();

for(let num of xx) {
  console.log(num);
}

-------------------------------------------------------------------

Generator : next()에 인수 전달

function* fn() {
  const num1 = yield "첫번째 숫자를 입력해주세요";
  console.log(num1);

  const num2 = yield "두번째 숫자를 입력해주세요";
  console.log(num2);

  return num1 + num2;
}

const a = fn();

a.next();
a.next(2);
a.next(4);

-------------------------------------------------------------------

Generator : 값을 미리 만들어 두지 않음, 값을 필요할 때 마다 그때 그때 만든다. 필요한 순간까지 계산을 미룰 수 있다.

function* fn() {
  let index = 0;
  while (true) {
    yield index++;
  }
}

const a = fn();
a.next();

-------------------------------------------------------------------

Generator : yield* 을 이용하여 다른 Generator 호출

function* gen1() {
  yield "W";
  yield "o";
  yield "r";
  yield "l";
  yield "d";
}

function* gen2() {
  yield "Hello,";
  yield* gen1();
  yield "!";
}

console.log(...gen2());

-------------------------------------------------------------------

Generator : 제너레이터는 다른 작업을 하다가 다시 돌아와서
next() 해주면 진행이 멈췄던 부분 부터 이어서 실행

ex) Redux Saga

----------------------------------------------------------------------------------

async function getName() {
  return "Mike";
}

console.log(getName());

----------------------------------------------------------------------------------

async function getName() {
  return "Mike";
}

getName().then((name) => {
  console.log(name);
});

----------------------------------------------------------------------------------

async function getName() {
  return Promise.resolve("Tom");
}

getName().then((name) => {
  console.log(name);
});

----------------------------------------------------------------------------------

async function getName() {
  // return Promise.resolve("Tom");
  throw new Error("err..");
}

getName().catch((err) => {
  console.log(err);
});

----------------------------------------------------------------------------------

// await

function getName(name) {
  return new Promise(( resolve, reject) => {
    setTimeout(() => {
      resolve(name);
    }, 1000);
  });
}

async function showName() {
  const result = await getName("Mike");
  console.log(result);
}

console.log("시작");
showName();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};


f1()
  .then((res) => f2(res))
  .then((res) => f3(res))
  .then((res) => console.log(res))
  .catch(console.log);


----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
  const result1 = await f1();
  const result2 = await f2(result1);
  const result3 = await f3(result2);
  console.log(result3);
  console.log("종료");
}

order();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      // res("2번 주문 완료");
      rej(new Error("err..));
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
 try {
  const result1 = await f1();
  const result2 = await f2(result1);
  const result3 = await f3(result2);
  console.log(result3);
 } catch (e) {
  console.log(e);
 }
  console.log("종료");
}

order();

----------------------------------------------------------------------------------

const f1 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  });
};

const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
       res("2번 주문 완료");
      // rej(new Error("err..));
    }, 1000);
  });
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  });
};

console.log("시작");
async function order() {
 try {
  const result = await Promise.all([f1(), f2(), f3()]);
  console.log(result);
 } catch (e) {
  console.log(e);
 }
  console.log("종료");
}

order();

----------------------------------------------------------------------------------

setTimeout : 일정 시간이 지난 후 함수를 실행

clearTimeout : 예정된 작업을 없앤다.

setInterval : 일정 시간 간격으로 함수를 반복

clearInterval : 예정된 작업을 없앤다.

-----------------------------------------------------------------------------------

function fn() {
  console.log(3)
}

setTimeout(fn, 3000); // 3초 후에 log 찍어주기

-----------------------------------------------------------------------------------

setTimeout(function() {
  console.log(3)
}, 3000);

-----------------------------------------------------------------------------------

function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'Mike'); // 함수, 시간, 인수

-----------------------------------------------------------------------------------

clearTimeout : 예정된 작업을 없앤다.
// clearTimeout(tId);

const tId = function showName(name) {
  console.log(name);
}

setTimeout(showName, 3000, 'Mike'); // 함수, 시간, 인수

clearTimeout(tId); // 3초가 되기 전에 스케줄링 취소되어, 아무일도 일어나지 않는다.

-----------------------------------------------------------------------------------

function showName(name) {
  console.log(name);
}

const tId = setInterval(showName, 3000, 'Mike'); // setInterval : 계속 반복 수행, 3초 마다 Mike 찍힘

// 중간에 중단하려면, clearInterval(tId); 수행

-----------------------------------------------------------------------------------

setTimeout(function() {
  console.log(2) // 2번째 실행
}, 0); 
// 0초로 설정해도 바로 실행되지 않는다, 현재 실행중인 script가 종료된 이후에 실행
// 브라우저는 기본적으로 4ms 내외의 대기시간 존재

console.log(1);  // 1번째 실행

-----------------------------------------------------------------------------------

// setInterval, clearInterval

let num = 0;

function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
}

setInterval(showTime, 1000);

-----------------------------------------------------------------------------------

// setInterval, clearInterval

let num = 0;

function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
  if ( num> 5) {
    clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);

const user = {
  name : 'Mike'
}

user.name

user.hasOwnProperty('name');

user.hasOwnProperty('age');

-------------------------------------------------------------------------------------------------------

const user = {
  name : 'Mike',
  hasOwnProperty : function() {
console.log('hello')
  }
}

user.hasOwnProperty();

-------------------------------------------------------------------------------------------------------

const bmw = {
color : "red",
wheels : 4,
navigation : 1,
drive() {
  console.log("drive..");
},
};

const benz = {
color : "black",
wheels : 4,
navigation : 1,
drive() {
  console.log("drive..");
},
};

const audi = {
color : "blue",
wheels : 4,
drive() {
  console.log("drive..");
},
}; 

-------------------------------------------------------------------------------------------------------

const car = {
wheels : 4,
drive() {
  console.log("drive..");
},
};

const bmw = {
color : "red",
navigation : 1,
};

const benz = {
color : "black",
};

const audi = {
color : "blue",
}; 

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

bmw
bmw.color;
bmw.wheels;


-------------------------------------------------------------------------------------------------------

const car = {
wheels : 4,
drive() {
  console.log("drive..");
},
};

const bmw = {
color : "red",
navigation : 1,
};

bmw.__proto__ = car;

const x5 = {
color : "white",
name : "x5",
};

x5.__proto__ = bmw;

x5.name;

x5.color;

x5.navigation;

for( p in x5){
console.log(p);
}

x5;
Object.keys(x5);
Object.values(x5);

for( p in x5){
  if(x5.hasOwnProperty(p)){
console.log('o', p);
  } else {
  console.log('x', p);
  }
}


-------------------------------------------------------------------------------------------------------

const car = {
  wheels : 4,
  drive() {
console.log("drive..");
  },
};


const Bmw = function ( color ){
  this.color = color;
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

x5.__proto__ = car;
z4.__proto__ = car;

x5

5.wheels

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};


Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function() {
  console.log("drive..");
};

Bmw.prototype.navigation = 4;
Bmw.prototype.stop = function() {
  console.log("STOP!..");
};


const x5 = new Bmw("red");
const z4 = new Bmw("blue");

//x5.__proto__ = car;
//z4.__proto__ = car;


x5.wheels;
x5.drive();

x5.stop();

z4

z4 instanceof Bmw

z4.constructor === Bmw

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};

Bmw.prototype = {
  wheels : 4,
  drive() {
console.log("drive..");
  },
  navigation : 1,
  stop() {
    console.log("STOP!");
  },
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

z4.constructor === Bmw // false

-------------------------------------------------------------------------------------------------------

const Bmw = function ( color ){
  this.color = color;
};

Bmw.prototype = {
  constructor : Bmw,
  wheels : 4,
  drive() {
console.log("drive..");
  },
  navigation : 1,
  stop() {
    console.log("STOP!");
  },
};

const x5 = new Bmw("red");
const z4 = new Bmw("blue");

z4.constructor === Bmw  // true

-------------------------------------------------------------------------------------------------------

const Bmw = function (color) {
  this.color = color;
};

const x5 = new Bmw("red");

-------------------------------------------------------------------------------------------------------


const Bmw = function (color) {
  const c = color;
  this.getColor = function () {
    console.log(c);
  };
};

const x5 = new Bmw("red");

-------------------------------------------------------------------------------------------------------