// Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(','); console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(','); console.log(result); // const result = fruits.split(',', 2); // console.log(result); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array..

/** * Shorthand property names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer * */ { const ellie1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩 const ellie2 = { name: name, age: age, }; // ✨ const ellie3 = { name, age, }; console.log(ellie1, ellie2, ellie3); console.clear(); } /** * Destructuring Assignment * https://..

class Counter { constructor(runEveryFiveTimes) { this.counter = 0; this.callback = runEveryFiveTimes; } increase() { this.counter++; console.log(this.counter); if (this.counter % 5 === 0) { this.callback && this.callback(this.counter); } } } function printSomething(num) { console.log(`Wow! ${num}`); } function alertNum(num) { alert(`alert! ${num}`); } const printCounter = new Counter(printSometh..

// async & await // clear style of using promise :) // 1. async async function fetchUser() { // do network reqeust in 10 secs.... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await ✨ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() { await delay(2000); return '🍎'; } async function getBanana() ..

'use strict'; // Promise is a JavaScript object for asynchronous operation. // State: pending -> fulfilled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. // doing some heavy work (network, read files) const promise = new Promise((resolve, reject) => { console.log('doing something...'); setTimeout(() => { resolve('ellie'); // re..

'use strict'; // JavaScript is synchronous. // Execute the code block by orger after hoisting. // hoisting: var, function declaration console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(() => console.log('hello')); // Asynchronous callback function printWithDelay(print, timeout) { set..

자 이번엔 유저가 이름을 제출하면, 브라우저에 나타나있는 form을 없애(사라지게 해)보자. 이걸 구현하기 위한 방법이 있는데, HTML 요소 자체를 아예 없애버리거나 다른 방법으로는 CSS를 이용해서 숨기는 것이다. 그래서 우리는 CSS에 hidden이라는 classname을 만들어 주자. .hidden { display: none; } 이 classname이 하는 일은 display: none 이거 뿐이다. 간단하다. 어떤 요소에게든 이 classname을 주면, 그 요소를 숨기게 될 것이다. 유저가 이름을 form을 통해 제출했을 때, 기본 동작은 막아주고 form을 제출했을 때 브라우저에 안보이게끔 하기 위해서 const username = loginInput.value; loginForm.cla..