interacting

[Git] Stash 정리

Carrot — Mon, 29 Mar 2021 01:17:23 +0900

git stash를 사용하여 완료되지 않은 작업을 stash stack 에 임시 저장 할 수 있음

`git stash` === `git stash push`

커밋처럼 -m flag를 추가하여 메시지를 설정할 수 있다.

❯ git status -s
 M working.txt # 워킹 디렉토리에 있는 파일
M  staging.txt # staging된 파일

❯ git stash push -m "working + staging"
Saved working directory and index state On master: working + staging

❯ git status -s
# 변경사항이 stash stack에 들어가면서 working & staging 모두 비워짐

❯ git stash list
stash@{0}: On master: working + staging

`git stash apply`

Stash를 적용할 때 Staged 상태였던 파일을 자동으로 다시 Staged 상태로 만들어 주지 않는다.
그래서 git stash apply 명령을 실행할 때 --index 옵션을 주어 Staged 상태까지 적용한다. 그래야 원래 작업하던 상태로 돌아올 수 있다.
위의 상황에서 git stash apply를 하면

❯ git status -s
 M working.txt 
 M staging.txt # staged 상태였던 파일도 워킹 디렉토리로 내려옴

git stash apply --index를 하면

❯ git status -s
 M working.txt
M staging.txt # staged 된 상태 그대로 유지

apply 옵션은 단순히 Stash를 적용하는 것뿐이다. Stash는 여전히 스택에 남아 있다.
git stash drop명령을 사용하여 해당 Stash를 제거한다.
그리고 git stash pop이라는 명령도 있는데 이 명령은 Stash를 적용하고 나서 바로 스택에서 제거해준다.
꼭 깨끗한 워킹 디렉토리나 Stash 할 때와 같은 브랜치에 적용해야 하는 것은 아니다.
어떤 브랜치에서 Stash 하고 다른 브랜치로 옮기고서 거기에 Stash를 복원할 수 있다.
그리고 꼭 워킹 디렉토리가 깨끗한 상태일 필요도 없다. 워킹 디렉토리에 수정하고 커밋하지 않은 파일들이 있을 때도 Stash를 적용할 수 있다. 만약 충돌이 있으면 알려준다.

`git stash push -m --keep-index`

이 옵션을 이용하면 이미 Staging Area에 들어 있는 파일을 Stash 하지 않는다.

`git stash -u`

-u 옵션은 —include-untracked 의 줄임표현이다.
언트래킹 파일들도 stashing area에 추가하고 싶을 때 사용한다.

출처

Git - Stashing과 Cleaning
드림코딩 Git 마스터 과정

[JS] Deep Equality checking of Two Objects

Carrot — Sun, 20 Sep 2020 02:26:36 +0900

JSON.stringify 을 사용하지 않고 두 Object가 같은지 비교(deep-equal)

Deep Equality checking of Two Objects

function compareObjectsDeepEqual(original, target) {
  const isObject = obj => typeof obj === "object" && obj !== null;

  if (!isObject(original) || !isObject(target)) {
    return original === target;
  }

  const keysOfOriginal = Object.keys(original);
  const keysOfTarget = Object.keys(target);

  if (keysOfOriginal.length !== keysOfTarget.length) {
    return false;
  }

  for (let key of keysOfOriginal) {
    if (!keysOfTarget.includes(key)) {
      return false;
    }

    if (isObject(original[key])) {
      if (!compareObjectsDeepEqual(original[key], target[key])) {
        return false;
      }
    } else {
      if (original[key] !== target[key]) {
        return false;
      }
    }
  }

  return true;
}

테스트 케이스들

empty : const original = {}, target = {} ▶ true
falsy value : const original = { name: "" }, target = { name: 0 } ▶ false

nested ▶ true

const original = {
  name: "Judy",
  work: {
    company: "zootopia",
    since: { year: 2017, month: 1, day: 1 },
  },
};
const target = {
  name: "Judy",
  work: {
    company: "zootopia",
    since: { year: 2017, month: 1, day: 1 },
  },
};

null : const original = { name: null }, target = { name: null }) ▶ true

Array : ▶ true

const original = { name: "Judy", array: ["0", "1", "2"] };
const target = { name: "Judy", array: ["0", "1", "2"] };

Array + Type of value ▶ false

const original = { name: "Judy", array: ["0", "1", "2"] };
const target = { name: "Judy", array: [0, 1, 2] };

Do not check for a property in the object's prototype chain ▶ false

Object.prototype.test = "Don't check me!";

const original = { name: "Judy", test: "Don't check me!" };
const target = { name: "Judy" };

Complex nested object + array ▶ true

const original = {
 name: "Judy",
 array: [{ A: "apple", B: ["beer", "blue"] }],
 string: "STRING ",
};
const target = {
 name: "Judy",
 array: [{ A: "apple", B: ["beer", "blue"] }],
 string: "STRING ",
};

Order of original and target (Two-way)
const original = original, target) ▶ false
const original = target, original) ▶ false
```
const original = {
  A: "apple",
  B: ["beer", "blue"],
};
const target = {
  A: "apple",
};
```

[JS/알고리즘] Sort Colors : Dutch national flag problem

Carrot — Mon, 7 Sep 2020 09:16:32 +0900

`Dutch national flag problem`

array[0] ~ [low-1] zeros (red)  
array[low] ~ [mid-1] onew (white)  
array[mid] ~ [high] unknown  
array[high+1] ~ [length-1] twos (blue)

처음에 모든 요소는 unknown 상태이기 때문에
low = 0

mid = 0

high = length-1

이다.

Dutch national flag problem

75. Sort Colors

Given an array with n objects colored red, white or blue, sort them in-place so that objects of the same color are adjacent, with the colors in the order red, white and blue.

Here, we will use the integers 0, 1, and 2 to represent the color red, white, and blue respectively.

Note: You are not suppose to use the library's sort function for this problem.

Example:
Input: [2,0,2,1,1,0]
Output: [0,0,1,1,2,2]

var sortColors = function (nums) {
  const { length } = nums;
  let low = 0; // red
  let mid = 0; // white
  let high = length - 1; // blue

  while (mid <= high) {
    if (nums[mid] === 0) {
      swap(nums, low, mid);
      low++;
      mid++;
    } else if (nums[mid] === 1) {
      mid++;
    } else {
      swap(nums, mid, high);
      high--;
    }
  }
};

function swap(array, a, b) {
  const temp = array[a];
  array[a] = array[b];
  array[b] = temp;
}

출처1 : en.wikipedia.org/wiki/Dutch_national_flag_problem

출처2 : www.geeksforgeeks.org/sort-an-array-of-0s-1s-and-2s/

출처3 : leetcode.com/problems/sort-colors/

[JS/알고리즘] Find First and Last Position of Element in Sorted Array

Carrot — Mon, 7 Sep 2020 07:29:30 +0900

`BST`

이미 sorted 된 데이터의 경우, BST를 이용해 O(log n)의 시간복잡도로 타겟을 찾을 수 있다.

34. Find First and Last Position of Element in Sorted Array

Given an array of integers nums sorted in ascending order, find the starting and ending position of a given target value.

Your algorithm's runtime complexity must be in the order of O(log n).

If the target is not found in the array, return [-1, -1].

Example 1:
Input: nums = [5,7,7,8,8,10], target = 8
Output: [3,4]

Example 2:
Input: nums = [5,7,7,8,8,10], target = 6
Output: [-1,-1]

const searchRange = function (nums, target) {
  const { length } = nums;
  let firstIndex = 0;
  let lastIndex = length - 1;

  while (firstIndex <= lastIndex) {
    const midIndex = Math.floor((firstIndex + lastIndex) / 2);

    if (nums[midIndex] === target) {
      firstIndex = midIndex;
      lastIndex = midIndex;
      break;
    }

    if (nums[midIndex] < target) {
      //타겟이 더 크므로 뒷부분에서 탐색
      firstIndex = midIndex + 1;
    } else {
      lastIndex = midIndex - 1;
    }
  }

  // while문을 끝까지 순회 했으나 target을 못찾은 경우
  if (firstIndex > lastIndex) {
    return [-1, -1];
  }

  //중간에 break되어서 나왔을 경우, 앞뒤로 같은 값 있는지 탐색
  while (nums[firstIndex - 1] === target) firstIndex--;
  while (nums[lastIndex + 1] === target) lastIndex++;

  return [firstIndex, lastIndex];
};

출처 : leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array/

[JS/알고리즘] Merge Two Sorted Lists

Carrot — Mon, 7 Sep 2020 06:51:42 +0900

`Linked List` + `Merge Sort`

Merge sort의 기본개념은 Divide and conquer이다.
따라서 Quick sort와 마찬가지로 재귀를 통해 구현 할 수 있다.

이미 정렬된 두 파티션들이 있다면,
두 파티션의 첫요소를 검사하여 더 작은 요소를 뺀다.

Linked List 와 연결하여서 푸는 문제이기때문에
더 작은 요소를 가지고 있는 링리를 헤드로 삼고,
헤드로 삼은 링리의 다음 노드와, 헤드가 되지못한 링리 두가지를 다시 함수에 넣는다.

21. Merge Two Sorted Lists

Merge two sorted linked lists and return it as a new sorted list.

The new list should be made by splicing together the nodes of the first two lists.

Example:
Input: 1->2->4, 1->3->4  
Output: 1->1->2->3->4->4

/**
 * Definition for singly-linked list.
 * function ListNode(val, next) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.next = (next===undefined ? null : next)
 * }
 */

/**
 * @param {ListNode} l1
 * @param {ListNode} l2
 * @return {ListNode}
 */

const mergeTwoLists = function(l1, l2) {
  if (!l1) return l2;
  if (!l2) return l1;

  if(l1.val < l2.val) {
    l1.next = mergeTwoLists(l1.next, l2);
    return l1;
  } else {
    l2.next = mergeTwoLists(l1, l2.next);
    return l2;
  }
};

출처 : leetcode.com/problems/merge-two-sorted-lists/

[JS] Promise.all()은 병렬일까 직렬일까

Carrot — Sat, 22 Aug 2020 21:20:57 +0900

하나의 async function 내에서는 await 키워드를 만날 때마다
말 그대로 기다렸다가(await) 비동기처리가 완료 된 후 직렬로 다음 task를 처리한다.

만약에 async 라이브러리를 구현했던 과제 중에 each나 times 처럼
여러 비동기 task를 병렬적으로 시작시키려면 어떻게 해야할까?

만약 Promise.all 가 병렬로 동작한다면 요걸 쓰면 될 것 같다!!
그래서 한번 확인해보았다.

async/await 직렬처리

function nSecondsLater(n) {
  console.log(`  n=${n} Start`);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`✅ ${n} Seconds Later`);
    }, n * 1000);
  });

}

const arr = [0, 1, 2, 3]


async function asyncWaterfall() {
  for (let n of arr) {
    const promise = await nSecondsLater(n);
    console.log(promise);
  }
  console.log("DONE!");
}

asyncWaterfall();

async/await : for of문을 사용하여 순회 할 경우
아래와 같이 waterfall 형태로 실행된다.

asyncWaterfall

Promise.all()을 이용한 병렬처리

function asyncParallel() {
  const promises = arr.map(n =>
    nSecondsLater(n).then(console.log)
  );
  Promise.all(promises).then(() => console.log("DONE!"));
}

asyncParallel();

위와 같이 Promise.all()을 이용하여 한번에 처리할 경우
아래와 같이 원하는 대로 병렬로 동작한다!

asyncParallel

추가!
+ async/await 없이 waterfall 구현하기

function asyncWaterfall2() {
  const promise = arr.reduce((accPromise, n) => {
    return accPromise.then(() => {
      return nSecondsLater(n).then(console.log);
    });
  }, Promise.resolve());
  promise.then(() => console.log("DONE!"));
}

asyncWaterfall2();

여전히 아직은 비동기 문법들이 익숙친 않지만 여러가지 예제코드를 자주 짜봐야겠당

[Udemy] JavaScript: The Advanced Concepts - 섹션 9:Asynchronous JavaScript

Carrot — Sat, 22 Aug 2020 21:18:30 +0900

섹션 9:Asynchronous JavaScript

132. Section Overview

//1
setTimeout(()=>{console.log('1', 'is the loneliest number')}, 0)
setTimeout(()=>{console.log('2', 'can be as bad as one')}, 10)

//2
Promise.resolve('hi').then((data)=> console.log('2', data))

//3
console.log('3','is a crowd')

// --output--
// 3 is a crowd
// 2 hi            // Promise
// -- program return undefined --
// 1 is the loneliest number    // setTimeout 0
// 2 can be as bad as one        // setTimeout 10

Web API - DOM 이벤트 핸들러, fetch(), setTimeout() ...

135. Promises

A promis is an object that may produce a single value some time in the future.

either a resolved value, or a reason that it’s not resolved (rejected)

states : pending / fulfilled / rejected

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

callback pyramid of dom

movePlayer(100, 'Left', function () {
  movePlayer(400, 'Left', function () {
    movePlayer(10, 'Right', function () {
      movePlayer(330, 'Left', function () {
      });
    });
  });
});

콜백의 중첩 예시

really really complicated code!

promise exercise

const promise = new Promise((resolve, reject) => {
  if (true) {
    resolve('Stuff Worked');
  } else {
    reject('Error, it broke');
  }
});

promise
  .then(result => result + '!')
  .then(result2 => {
    console.log(result2);
  })

출력결과

Stuff Worked!
Promise {<fulfilled>: undefined}

then의 첫번째 인자는 앞단 promise 의 resolve 된 결과가 담김

promise
  .then(result => {
    //throw "에러1"
    return result + '!'
  })
  .then(result2 => {
    throw "에러2"
    console.log(result2);
  })
  .catch((err) => console.log(err))

.catch가 에러2 잡아서 출력함

catch구문 이전에 있는 에러만 잡을수있음

const promise = new Promise((resolve, reject) => {
  if (false) {
    resolve('Stuff Worked');
  } else {
    reject('Error, it broke');
  }
});


// Uncaught (in promise) Error, it broke

.then 안해도 reject된값 바로나오넹..?

promise all

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'ONE');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'TWO');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'THREE');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values);
  })

(3000ms 후) until promises were resolved

(3) ["ONE", "TWO", "THREE"]

promise먼저 선언한담에
3초 되기 전에 promise.all.then하면 pending 상태로 나옴

3초 지나고 나서 all 하면 바로 출력

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
  'o_o?'
];

Promise.all(urls.map(url => {
  return fetch(url).then(resp => resp.json());
}))
  .then(results => {
    console.log(results[0]);
    console.log(results[1]);
    console.log(results[2]);
  })
  .catch(() => console.log("ERROR!"));

// --output--
// Promise {<pending>}
// GET chrome-extension://laookkfknpbbblfpciffpaejjkokdgca/o_o? net::ERR_FILE_NOT_FOUND
// ERROR!

이상한 url 이 있어서 fetch 에서 오류가 나면 catch로 잡을 수 있음

fetch('https://jsonplaceholder.typicode.com/users') // return Promise

136. ES8 - Async Await

async function : a function that returns a promise.

benefit of async/await is that it makes code easier to read.

1단계 : callback pyramid of dom

movePlayer(100, 'Left', function () {
  movePlayer(400, 'Left', function () {
    movePlayer(10, 'Right', function () {
      movePlayer(330, 'Left', function () {
      });
    });
  });
});

2단계 : Promise

movePlayer(100, 'Left')
  .then(() => movePlayer(400, 'Left'))
  .then(() => movePlayer(10, 'Right'))
  .then(() => movePlayer(330, 'Left'))

3단계 : Async/Await

async function playerStart() {
  const firstMove = await movePlayer(100, 'Left'); // pause
  await movePlayer(400, 'Left'); // pause
  await movePlayer(10, 'Right'); // pause
  await movePlayer(330, 'Left'); // pause
}

more realistic example (use fetch function)

// Promise
fetch('https://jsonplaceholder.typicode.com/users')
  .then(resp => resp.json())
  .then(console.log)

// Async/Await
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  console.log(data);
}

++ response.json()에 대해

response.json() does return a promise as well (as it waits for the body to load)

Why does .json() return a promise? : https://stackoverflow.com/questions/37555031/why-does-json-return-a-promise

more realistic example 2 (Promise.all)

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
];

// Promise.all
Promise.all(urls.map(url =>
  fetch(url).then(resp => resp.json())
))
  .then(results => {
    console.log("Users  : ", results[0]);
    console.log("Posts  : ", results[1]);
    console.log("Albums  : ", results[2]);
  })
  .catch("Oooops!");

// Async/Await
const getData = async function () {
  const [users, posts, albums] =
    await Promise.all(urls.map(url =>
      fetch(url).then(resp => resp.json())
    ));

  console.log("Users  : ", users);
  console.log("Posts  : ", posts);
  console.log("Albums  : ", albums);
}

error handing

Promise.all 에서 처럼 error 발생 시, catch 하려면

=> use try...catch block!

// try...catch on Async/Await
const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'weird url',    // 여기서 에러날거임
  'https://jsonplaceholder.typicode.com/albums',
];

const getData = async function () {
  try {

    const [users, posts, albums] =
      await Promise.all(urls.map(url =>
        fetch(url).then(resp => resp.json())
      ));

    console.log("Users  : ", users);
    console.log("Posts  : ", posts);
    console.log("Albums  : ", albums);

  } catch (err) {

    console.log("Oooops!", err)

  }
}

// --output-- => Oooops! TypeError: Failed to fetch

async/await은 새로운 신택스니까 although intimidating at first 하긴 하지만
유용하게 사용할 수 있음!!

137. ES9 (ES2018)

전 버전에 비해서 알아야할 three main new features 가 있다

Object spread operator

//Object spread operator
const animals = {
  tiger: 23,
  lion: 5,
  monkey: 2,
  quokka: 1204
}

const { tiger, ...restAnimals, quokka } = animals;
 // SyntaxError: Rest element must be last element

const { tiger, ...restAnimals } = animals;
// --output--
// tiger -> 23
// restAnimals -> {lion: 5, monkey: 2, quokka: 1204}

function objectSpread(p1, p2, p3) {
  console.log(p1);
  console.log(p2);
  console.log(p3);
}

const { tiger, lion, ...restAnimals } = animals;

objectSpread(tiger, lion, restAnimals);
// --output--
// 23
// 5
// {monkey: 2, quokka: 1204}

138. ES9 (ES2018) - Async

finally

const urls = [
  'http://swapi.dev/api/people/1/',
  'http://swapi.dev/api/people/2/',
  'http://swapi.dev/api/people/3/',
  'http://swapi.dev/api/people/4/',
]

Promise.all(urls.map(url =>
  fetch(url).then(person => person.json())
))
  .then(people => {
    console.log('1', people[0]);
    throw Error;
    console.log('2', people[1]);
    console.log('3', people[2]);
    console.log('4', people[3]);
  })
  .catch(err => console.log('ughhhhh fix it!', err))
  .finally(() => console.log('extra'))

// --output--
// 1 {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}
// ughhhhh fix it! ƒ Error() { [native code] }
// extra

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

finally() 메소드는 Promise 객체를 반환합니다.
Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행됩니다.
이것은 Promise가 성공적으로 수행 되었는지 거절되었는지에 관계없이 Promise가 처리 된 후에 코드가 무조건 한 번은 실행되는 것을 제공합니다.

요것을 쓰는 이유 : Promise의 then()과 catch() 핸들러에서의 코드 중복을 피하게 합니다.

p.then(onFulfilled, onRejected) 인 것과 달리
p.finally(onFinally) 요렇게 쓰임.

onFinally에 들어가는 function은 어떠한 인수도 전달받지 않는다.
왜냐하면 이행/거부 여부를 판단할 수 없기 때문에!

for await of

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
];

const getData = async function () {
  try {
    const [users, posts, albums] =
      await Promise.all(urls.map(url => {
        const response = await fetch(url);
        return response.json();
      }));

    console.log("Users  : ", users);
    console.log("Posts  : ", posts);
    console.log("Albums  : ", albums);
  } catch (err) {
    console.log('Ooooops!!', err);
  }
}

// do exactly what this one does above by 
// using by "for await of"
const getData2 = async function () {
  const arrayOfPromises = urls.map(url => fetch(url));

  for await (let request of arrayOfPromises) {
    const data = await request.json();
    console.log(data);
  }
}

`Promise.all`

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

반환한 프로미스의 이행 결과값은 (프로미스가 아닌 값을 포함하여) 매개변수로 주어진 순회 가능한 객체에 포함된 모든 값을 담은 배열입니다.

주어진 프로미스 중 하나라도 거부하면, 다른 프로미스의 이행 여부에 상관없이 첫 번째 거부 이유를 사용해 거부합니다.

Promise.all은 주어진 순회 가능한 객체가 비어있는 경우에만 동기적으로 이행됩니다.

var p = Promise.all([]); // 즉시 이행함
var p2 = Promise.all([1337, "hi"]); // 프로미스가 아닌 값은 무시하지만 비동기적으로 실행됨
console.log(p);
console.log(p2);
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p2);
});

// 출력
// Promise { <state>: "fulfilled", <value>: Array[0] } // p
// Promise { <state>: "pending" } // p2
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] } // p2

--- MDN 예제가 매우 도움이 되는구만☺

139. Job Queue

Promise는 최근에 추가되어서
이 추가사항을 수용accommodate 하기 위해서
기존의 Event Loop를 변경해야했다.

ECMA script에서는 Promise 를 위해서 원래 가지고 있던 Callback Queue 을 사용하는 것 대신에 다른 큐가 필요하다고 했다.

그거슨 바로 ‘Job Queue’이다! (혹은 Microtask Queue)

Job Queue는 콜백큐에 비해서 smaller 하지만 더 높은 우선순위를 가진다.
(Event Loop가 처리할 때)

JAVASCRIPT RUNTIME 다이어그램을 다시 보자

Event Loop 는 먼저 Jop Queue 를 체킹하고
콜스택이 비었을때 요거 먼저 처리한다.

// Callback Queue
setTimeout(() => {
  console.log('1', 'is the loneliest number')
}, 0);
setTimeout(() => {
  console.log('2', 'can be as bad as one')
}, 0);

// 2 Job Queue - Microtask Queue
Promise.resolve('hi').then((data) => console.log('2', data));

// 3
console.log('3', 'is a crowd');

---output---

3 is a crowd >> 비동기가 아닌 애는 먼저 처리되고
2 hi >> 이벤트큐: 헤이잡큐!! 뭐갖고있는거있니? / 잡큐: ㅇㅇ이거있엉
undefined >> JS file 끗
1 is the loneliest number >> 이벤트큐: 헤이잡큐!! 뭐갖고있는거있니? / 잡큐: ㄴㄴ없엉!! 이제 콜백큐한테 가도돼!!
2 can be as bad as one

어떤 레거시 브라우저는 잡큐가 없기도하지만 대부분 스탠다드를 따른다.

140. Parallel, Sequence and Race

multiple promises를 처리하는데 있어서 세 가지 방법이 있다.

in parallel (start all at the same time)
sequential (they're all dependent on each other)
race (one comes back first and ignores the rest.)

const promisify = (item, delay) =>
  new Promise((resolve) =>
    setTimeout(() =>
      resolve(item), delay));

const a = () => promisify('a', 100);
const b = () => promisify('b', 5000);
const c = () => promisify('c', 3000);

위의 3개의 multiple promises를 각 방법으로 처리해보자

1) Parallel

async function parallel() {
  const promises = [a(), b(), c()];
  const [output1, output2, output3] = await Promise.all(promises);
  return `parallel is done: ${output1} ${output2} ${output3}`
}

parallel().then(console.log);

// --output--
// (0초후) Promise {<pending>}
// (5초후) parallel is done: a b c

2) Race

async function race() {
  const promises = [a(), b(), c()];
  const output1 = await Promise.race(promises);
  return `race is done: ${output1}`;
}

race().then(console.log);

// -- output --
// (  0초후) Promise {<pending>}
// (0.1초후) race is done: a

3) Sequential

async function sequence() {
  const output1 = await a();
  const output2 = await b();
  const output3 = await c();
  return `sequence is done ${output1} ${output2} ${output3}`
}

sequence().then(console.log);
// -- output --
// (  0초후) Promise {<pending>}
// (8.1초후) sequence is done a b c

+ 셋 다 한꺼번에 하면...?

parallel().then(console.log);
sequence().then(console.log);
race().then(console.log);

// -- output --
// (  0초후) 01:12:56.033 Promise {<pending>}
// (0.1초후) 01:12:56.139 race is done: a
// (  5초후) 01:13:01.033 parallel is done: a b c
// (8.1초후) 01:13:04.166 sequence is done a b c

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts

[Udemy] JavaScript: The Advanced Concepts - 섹션 3:Javascript Foundation II

Carrot — Sat, 15 Aug 2020 02:27:17 +0900

** ⚠ priv | 강의노트 카테고리에 있는 내용은 발행이 목적이 아니기 때문에 전혀 정제되어있지 않습니당.**

섹션 3:Javascript Foundation II

29. Execution Context

Creation Phase

argument object created with any arguments
initializes this keyword to point called or to the global object if not specified

Executing Phase

Variable Environment created - memory space for variable and functions created
initializes all variables to undefined and places them into memory with any new functions

35. Function Invocation

// Function Expression
var canada = () => {
  console.log('cold');
}

// Function Declaration
function india() {
  console.log('warm');
}

// Function Invocation/Call/Execution
canada();
india();

canada function (Function Expression) is defined at runtime
when we actually run/call/execute/invoke the function.

ㄴ 함수표현식은 runtime 때 정의됨.
변수 호이스팅이 일어나므로 canada라는 변수가 undefined로 생성되었다가, 함수가 실제로 실행될 때 내용이 변수에 담김

india function (Function Declaration) 은 함수 호이스팅이 일어나서
호이스팅되면서 내용이 바로 정의됨

That is when the compiler initially looks at the code
and starts hoisting and allocating memory.

글고 얘는 실행컨텍스트가 만들어질때 (긍께 함수가 실행되는 순간),
this 키워드랑 arguments 도 같이 만들어짐

36. arguments Keyword

글로벌 컨텍스트말고 걍 함수 실행될 때 사용 가능
글로벌 컨텍스트에서 사용하면 에러남 (arguments is not defined)

The keyword arguments can be dangerous to use in your code as is. In ES6, a few methods were introduced that can help better use arguments. => ...arg

얜 array가 아니라 array like object임

그래서 array 메서드못씀

var args = Array.from(arguments);
var args = [...arguments];    // 펼치기 연산자, 전개 구문

Rest Parameters

function f(a, b, ...theArgs) {
  // ...
}

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.
rest 파라미터는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.
단, Rest파라미터는 항상 제일 마지막 파라미터로 있어야 한다.
ES6 의 arrow function 에서는 arguments 프로퍼티가 아예 없음
따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest 파라미터를 사용해야 한다.

++ spread 연산자

function sandwich(a, b, c) {
  console.log(a); // ' '
  console.log(b); // ' '
  console.log(c); // ' '
}

const food = [' ', ' ', ' '];

// Old way
sandwich.apply(null, food);

// ✅ ES6 way
sandwich(...food);

앞에서 살펴본 Rest 파라미터는 Spread 문법을 사용하여 파라미터를 정의한 것을 의미한다. 형태가 동일하여 혼동할 수 있으므로 주의가 필요하다.

// spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
foo(1, ...[2, 3], 4, ...[5]);

https://poiemaweb.com/es6-extended-parameter-handling

37. Variable Environment

function one() {
  var isValid = true; // local env
  console.log("one: ", isValid);  // true
  two(); // new execution context!
}

function two() {
  var isValid; // undefined
  console.log("two: ", isValid);  // undefined
}

var isValid = false; // global
console.log("글로벌: ", isValid); // false

one();

/*
   two() isValid = undefined
   one() isValid = true
   global() isValid = false
   ------------------------
   CALL STACK
*/

38. Scope Chain

39. [[scope]]

The execution context tells the engine
which lexical environment it is currently working in
and the lexical scope determines the available variables.

스코프체인을 통해 부모env의 변수에 접근이 가능하다.

Lexical Environment === [[scope]]

[[scopes]] 프로퍼티를 통해서 스코프체인확인 가능

40. Exercise: JS is Weird

function weird() {
  height = 50;    //  
  return height;
}

weird();

2번째 줄에서 일어나는일
weird :ㅇㅁㅇ? our variable env에는 height가 없어..
그러고 글로벌 env로 가서 물어봄
글로벌 : ㅇㅁㅇ? 나도 없어 근데 하나필요하다니까 하나만들어드림

그니까 weird 함수의 variable env 에 저장되는게 아님..
We call this leakage of global variables.

저 코드를 실제로 실행해보면
window.height 라고 전역객체에 생성되어잇듬...!

요거 방지하려면 ‘use strict’을 쓰면 됨
고러면 height is not defined 라고 레퍼런스에러가 남

함수표현식에서 익명함수가 아니라 기명함수를 쓰면
```
var hey = function doodle(){
    // doodle();
    return "HEY";
}

hey();
doodle();
```
doodle안에서 doodle이라는 이름으로 자기자신(함수)에는 접근 가능하지만
외부에서는 doodle로 접근 못함

긍께 doodle 이라는 이름은 자기자신의 스코프에 enclosed 되어있음

hey 는 글로벌 컨텍스트에 있기땜시
글로벌에서도 hey로 부를 수 있고
당근 doodle 안에서도 hey로 부를 수 있음

43. Global Variables

    <script>var x = 1;</script>
    <script>var y = 2;</script>
    <script>var z = 3;</script>
    <script>var x = 5000;</script>

전역변수를 지양해야함
다른 파일에서도 정의하면 앞선 전역변수x를 overwrite하게됨

Avoid polluting the global namespace or scope when possible.

44. IIFE

IIFE - Immediately Invoked Function Expression 즉시실행함수

로컬스코프안에 가두기위해 사용

var script1 = (function () {
  function foo() { return "Hi"; }
  return { foo };
})();

script1.foo();    // Hi

이런식으로도 사용 가능

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts

[Udemy] JavaScript: The Advanced Concepts - 섹션 15:Appendix II: Intermediate Javascript

Carrot — Thu, 13 Aug 2020 04:30:00 +0900

** ⚠ priv | 강의노트 카테고리에 있는 내용은 발행이 목적이 아니기 때문에 전혀 정제되어있지 않습니당.**

섹션 15:Appendix II: Intermediate Javascript

207. Advanced Functions

Closures

a function ran. the function executed. It’s never going to execute again.
BUT it’s going remember that there reference to those variables.
so the child scope always access to the parent scope.

Currying

const multiply  = (a,b) => a*b;
const curriedMultiply = (a) => (b) => a*b;
curriedMultiply(3);    // this part returns a function "(b) => 3*b"

Compose

const compose = (f,g) => (a) => f(g(a));

const sum = (num) => num + 1;

compose(sum, sum)(5);    // result : 7

Avoiding Side Effects, functional purity!

avoiding side effects and always returning we create something that we call deterministic .

deterministic - 결정론적
같은 input이면 항상 same value 를 리턴한다.

It's a very important concept and that's a key principle in avoiding bugs.

208. Advanced Arrays

square brackets []

map, filter, reduce

pure simple functions

It always returns of value.
And there are no side effects.

we’re not changing the array.
just making a new copy of the array.
never mutating the data

209. Advanced Objects

reference type
context vs scope
instantiation

class Player {
  constructor(name, type) {
    console.log("Player ", this);
    this.name = name;
    this.type = type;
  }
  introduce() {
    console.log(`Hi I am ${this.name}, I am a ${this.type}`);
  }
}

class Wizard extends Player {
  constructor(name, type) {
    //console.log("Wizard ", this); // 이렇게쓰면 에러남
    // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    super(name, type);
    console.log("Wizard ", this);
  }
  play() {
    console.log(`WEEEEEE I'm a ${this.type}`);
  }
}

const wizard1 = new Wizard("Judy", "Dark Wizard");
const wizard2 = new Wizard("Nick", "Healer");

wizard1.play(); // WEEEEEE I'm a Dark Wizard
wizard2.introduce(); // Hi I am Nick, I am a Healer

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

파생된 클래스에서 this 에 접근하려면
super 생성자를 먼저 호출해야지만 가능하다.

// classical inheritance

var Player = function(name, type) {
    this.name = name;
    this.type = type;
}

Player.prototype.introduce = function {
    console.log(`Hi I am ${this.name}, I am a ${this.type}`);
}

var wizard1 = new Player("Judy", "Dark Wizard");
var wizard2 = new Player("Nick", "Healer");

wizard1.play = function(){
    console.log(`WEEEEEE I'm a ${this.type}`);
};

wizard2.play = function(){
    console.log(`WEEEEEE I'm a ${this.type}`);
};

210. ES7

ES7은 별거 없음

ES6는 뭐가 많이 바뀌었었는데 ES7은 두개 추가댐

.includes() method

added on string and array

const pets = ["cat", "dog", "bat"];
pets.includes("dog");    // true
pets.includes("bird");    // false

"Hello".includes("o");    // true
"Hello".includes("a");    // false

exponential operator

const square = (x) => x**2;
square(2);    // 4
square(5);    // 25

const cube = (y) => y**3;
cube(3);    // 27
cube(4);    // 64

console.log(10 ** -2);    // 0.01

The exponentiation operator (**) returns the result of raising the first operand to the power of the second operand.

211. ES8

ES7보다는 좀더바뀌긴함
중요한 몇개만 살펴봄

padStart

str.padStart(targetLength [, padString])

.padEnd()

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

Trailing commas in functions

ECMAScript 2017 allows trailing commas in function parameter lists.

the ending comma is now valid

function f(p) {}
function f(p,) {} 

(p) => {};
(p,) => {};

원래는 배열리터럴에서만 허용됐었고,
ES5에서 객체리터럴에서도 허용됨,
ES7부터 함수의 파라미터에도 허용됨

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Trailing_commas

-> 버전 관리 이력이 간단해지고 코드 편집이 더 편해진다는 장점이 있습니다.

Object.values, Object.entries

Object.values : 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다.

Object.entries : 객체가 가지는 (열거 가능한) 속성의 [key, value] 쌍의 배열을 반환합니다.

Obj 를 배열로 변환해서 사용

let obj = {
  username0 : "Santa",
  username1 : "Rudolf",
  username2 : "Mr.Grinch",
}

Object.keys(obj).forEach((key, index) => {
  console.log(key, obj[key], index);
});
// username0 Santa 0
// username1 Rudolf 1
// username2 Mr.Grinch 2

Object.values(obj).forEach((value) => {
  console.log(value);
});
// Santa
// Rudolf
// Mr.Grinch

Object.entries(obj);
// [ 
//   ["username0", "Santa"], 
//   ["username1", "Rudolf"], 
//   ["username2", "Mr.Grinch"]
// ]

Object.entries(obj).map(val => val[1]+val[0].replace("username", ""));

//["Santa0", "Rudolf1", "Mr.Grinch2"]

213. ES10 (ES2019)

`arr.flat()`

nested Array -> flat Array (중첩배열 평탄화)

[1,[2,3],[4,5]].flat()

// [ 1,2,3,4,5 ]

[1, 2,[3,4,[5]]].flat()

// [ 1, 2, 3, 4, [5] ]

[1, 2,[3,4,[5]]].flat(2)
// [1, 2, 3, 4, 5]

arr.flat(depth)
depth기본값은 1

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

const arr5 = [1, 2, , , 5, 6];
arr5.flat();
// [1, 2, 5, 6] 배열의 구멍도 제거

// Turn the trapped 3 number into: [3]
const trapped = [[[[[[[[[[[[[[[[[[[[[[[[[[3]]]]]]]]]]]]]]]]]]]]]]]]]];

//Solution
console.log(trapped.flat(Infinity))
// Infintiy is actually a LARGE number in JavaScipt. 
// It represents the maximum amount of memory that we can hold for a number! 
// Learn more here: 
// https://riptutorial.com/javascript/example/2337/infinity-and--infinity

const jurassicPark = [
  [" ", " "],
  " ",
  " ",
  [[" ", " "]],
  [[[[" "]]]],
  [" ", " "]
];

jurassicPark.flat(50);
// (9) [" ", " ", " ", " ", " ", " ", " ", " ", " "]

`arr.flatMap()`

이는 깊이 1의 flat 이 뒤따르는 map 과 동일하지만, flatMap 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.

const jurassicParkChaos = jurassicPark.flatMap(
  creature => creature + " "
);

// jurassicParkChaos
//(6) [" , ", " ", " ", " , ", " ", " , "]

`str.trimStart()`

const userEmail1 = "        judy@email.com";
const userEmail2 = "nick@email.com        ";

userEmail1.trimStart();
// "judy@email.com"

userEmail2.trimEnd();
// "nick@email.com"

`Object.fromEntries`

const inventory = [
  ["potato", 23],
  ["apple", 40],
  ["broccoli", 15]
];

const obj = Object.fromEntries(inventory);
// {potato: 23, apple: 40, broccoli: 15}

Object.entries(obj);
// 이렇게 하면 inventory랑 같은 모양으로 다시 바뀜
// 긍께 fromEntries <-> entries 이런 늬낌

`try` & `catch`

catch(error) 에서 error 파라미터 생략가능

214. Advanced Loops

for of

iterating - array, strings
we are able to iterate over individual items

for (item of obj){ console.log(item);} 
// Uncaught TypeError: obj is not iterable

for in - properties

enumerating - object

enumerable
( enumerate : 열거하다)

it allows us to see the property

216. Modules

code reusablility

global namespace

dependency resolution

Inline Script -> Script Tags -> IIFE ->

Common JS + browserify

// js1
module.exports = function add (a,b){
    return a + b;
};

// js2
var add = require("./add");

module bundler

ES6 + Webpack2

// js1
export const add = (a,b) => A + b;
// or
export default function add() {
    return a + b;
}

// js2
import { add } from "./add";
// or
import add from "./add";

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts

[JS] Prevent Stack Overflow

Carrot — Thu, 6 Aug 2020 05:53:59 +0900

Exercise: Fix This Code

//fill array with 60000 elements
const list = new Array(60000).join('1.1').split('.');

function removeItemsFromList() {
    var item = list.pop();

    if (item) {
        removeItemsFromList();
    }
};

removeItemsFromList();

위의 recursive function 은 stack overflow 를 발생시킨다.

recursive call around 는 유지하면서 stack overflow 를 피하려면 어떻게 고쳐야할까?

Solution Code

const list = new Array(60000).join('1.1').split('.');

function removeItemsFromList() {
    var item = list.pop();

    if (item) {
      setTimeout(removeItemsFromList, 0);
    }
};

removeItemsFromList();

문제 코드 실행 시, 크롬 브라우저에서 스택오버플로 발생

솔루션 코드 실행 시, 정상적으로 모든 작업 마침

setTimeout 에 의해 과정이 끝난 뒤 콜백함수 실행했기때문!!!

솔루션_코드_실행되는_과정.gif

(해당 이미지는 http://latentflip.com/loupe 이용해서 만들었고,
이해를 위해 setTimeout 의 delay 를 추가했습니다!)

문제 출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts

interacting

[Git] Stash 정리

git stash === git stash push

git stash apply

git stash push -m --keep-index

git stash -u

[JS] Deep Equality checking of Two Objects

Deep Equality checking of Two Objects

테스트 케이스들

[JS/알고리즘] Sort Colors : Dutch national flag problem

Dutch national flag problem

75. Sort Colors

[JS/알고리즘] Find First and Last Position of Element in Sorted Array

BST

34. Find First and Last Position of Element in Sorted Array

[JS/알고리즘] Merge Two Sorted Lists

Linked List + Merge Sort

21. Merge Two Sorted Lists

[JS] Promise.all()은 병렬일까 직렬일까

async/await 직렬처리

Promise.all()을 이용한 병렬처리

[Udemy] JavaScript: The Advanced Concepts - 섹션 9:Asynchronous JavaScript

섹션 9:Asynchronous JavaScript

132. Section Overview

135. Promises

promise exercise

promise all

136. ES8 - Async Await

137. ES9 (ES2018)

Object spread operator

138. ES9 (ES2018) - Async

finally

for await of

Promise.all

139. Job Queue

140. Parallel, Sequence and Race

1) Parallel

2) Race

3) Sequential

+ 셋 다 한꺼번에 하면...?

[Udemy] JavaScript: The Advanced Concepts - 섹션 3:Javascript Foundation II

섹션 3:Javascript Foundation II

29. Execution Context

Creation Phase

Executing Phase

35. Function Invocation

36. arguments Keyword

Rest Parameters

37. Variable Environment

38. Scope Chain

39. [[scope]]

40. Exercise: JS is Weird

43. Global Variables

44. IIFE

[Udemy] JavaScript: The Advanced Concepts - 섹션 15:Appendix II: Intermediate Javascript

섹션 15:Appendix II: Intermediate Javascript

207. Advanced Functions

Closures

Currying

Compose

208. Advanced Arrays

209. Advanced Objects

210. ES7

.includes() method

exponential operator

211. ES8

padStart

Trailing commas in functions

Object.values, Object.entries

213. ES10 (ES2019)

arr.flat()

arr.flatMap()

str.trimStart()

Object.fromEntries

try & catch

214. Advanced Loops

216. Modules

Common JS + browserify

ES6 + Webpack2

[JS] Prevent Stack Overflow

`git stash` === `git stash push`

`git stash apply`

`git stash push -m --keep-index`

`git stash -u`

`Dutch national flag problem`

`BST`

`Linked List` + `Merge Sort`

`Promise.all`

`.includes()` method

`Object.values`, `Object.entries`

`arr.flat()`

`arr.flatMap()`

`str.trimStart()`

`Object.fromEntries`

`try` & `catch`