전체 글

[ JS ] Generators and Maps

🔴 Generators const friends = ["Jeong", "Seung", "Ryong", "Hello", "World"]; function* friendTeller() { for (const friend of friends) { yield friend; } } const friendLooper = friendTeller(); > friendLooper.next() // { value: "Jeong", done: false } > friendLooper.next() // { value: "Sueng", done: false } > friendLooper.next() // { value: "Ryong", done: false } > friendLooper.next() // { value: "He..

[ JS ] Symbol, Set and Map

🔴 Symbols const user = { [Symbol("ryong")]: { age: 28 }, [Symbol("ryong")]: { age: 32 }, hello: "bye" }; console.log(Object.keys(user)); // ["hello"] console.log(Object.getOwnPropertySymbols(user)); // [Symbol(ryong), Symbol(ryong)] ⚪ symbol 내부에 description 파라미터가 서로 같더라도 서로 다른 symbol을 리턴한다. const numberArr = [1, 3, 3, 5, 7]; const objectArr = [ { name: 'Harry', age: 20 }, { name: 'Kim', age: 30 ..

[ JS ] Classes

🔴 Introduction to Classes class User { constructor(name) { this.username = name; } sayHello() { console.log(`Hello, my name is ${this.username}`); } } const myUser = new User("Ryong"); myUser.sayHello(); // Hello, my name is Ryong 🟠 Extending Classes class User { // this => User constructor(name, lastName, email, password) { this.username = name; this.lastName = lastName; this.email = email; thi..

[ JS ] Async / Await

🔴 Async Await // using then, catch const getMoviesPromise = () => { fetch("https://yts.am/api/v2/list_movies.json") .then(response => { console.log(response); return response.json(); }) .then(json => console.log(json)) .catch(error => console.log(error)); }; // using async, await const getMoviesAsync = async () => { // then => await const response = await fetch("https://yts.am/api/v2/list_movies..

[ JS ] Promises

🔴 Using Promises const test = new Promise((resolve, reject) => { // If Promise ends successfully, setTimeout(resolve, 2000, "Promise end successfully!"); // === resolve("Promise end successfully!"); // If Promise return error setTimeout(reject, 2000, "Promise return error!"); }); test.then(result => console.log(result)) // resolve => then❗ .catch(error => console.log(error)); // reject => catch❗..

[ JS ] For Loop

🔴 forEach ⚪ 반복되는 요소(iterable)의 각 요소들을 순서대로 item, index, array 등을 리턴한다. ⚪ 반복문을 중간에 멈출 수 없다. const friends = ["A", "B", "C", "D"]; const addHeart = (item, index, array) => console.log(item, index, array); /* A 0 ["A", "B", "C", "D"] B 1 ["A", "B", "C", "D"] C 2 ["A", "B", "C", "D"] D 3 ["A", "B", "C", "D"] */ friends.forEach(addHeart); 🟠 for ... of ⚪ 반복문을 조건에 따라 중간에 멈출 수 있다. const friends = ["A", ..

[ JS ] Rest And Spread

🔴 Introduction to Spread ⚪ spread는 변수를 가져가서 요소를 전개한다. const friends = [1, 2, 3, 4]; const family = ["a", "b", "c"]; console.log(friends); // [1, 2, 3, 4] => array console.log(...friends); // 1 2 3 4 => elements // spread merge console.log([friends, family]); // [ [1, 2, 3, 4], ["a", "b", "c"] ] console.log([...friends, ...family]); // [1, 2, 3, 4, "a", "b", "c"] 🟠 Spread Applications // spread a..

[ JS ] Destructuring

🔴 Object Destructuring ⚪ 큰 오브젝트에서 특정 변수나 그 안에 속한 작은 오브젝트에 접근할 수 있도록 하는 기법 const settings = { notifications: { follow: true, alerts: true, unfollow: false }, color: { theme: "dark" } }; // const 변수 생성 const { notifications: { follow }, color } = settings; console.log(follow); // true console.log(color); // {theme: "dark"} const settings = { notifications: { alerts: true, unfollow: false }, color:..

[ JS ] Array

🔴 Array.of ⚪ 배열 만들기 const friends = Array.of("a", "b", "c", "d"); console.log(friends); // ["a", "b", "c", "d"] 🟠 Array.from ⚪ Array-like object를 Array로 만들기 // 사전에 HTML에 btn이라는 class를 갖는 button 10개를 생성한다. const buttons = document.getElementByClass("btn"); Array.from(buttons).forEach(button => { button.addEventListener("click", () => console.log("I ve been clicked")); }; 🟡 Array.find && Array.fin..