hoxy,,coding,,? ya nadoo,,

JavaScript 개요

hongitaa — Sat, 19 Jun 2021 23:07:44 +0900

스크립트 언어란?

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용 됨.

매우 빠르게 배우고 짧은 소스코드 파일로 상호 작용하도록 고안되었음.

Java Script

웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어.

ECMA 스크립트 표준을 따르는 대표적인 웹 기술.

작성 방법

소스는 함수 단위로 작성하고, 이벤트 속성을 사용해서 구동 되게 함.

이벤트 속성은 태그마다 차이가 있음.

on이벤트명="실행할 함수명([전달값])"

1. inline 방식

태그에 직접 간단한 소스코드를 작성해서 실행 되게 하는 방법

<button onclick="window.alert('버튼 클릭 확인');">경고창 출력</button>
<button onclick="console.log('버튼 클릭 확인');">console 출력</button>
<h4 onmouseover="this.style.backgroudColor='red'">마우스 오버</h4>

2. internal 방식

script 태그 영역에 작성해서 실행되게 하는 방법

head 태그, body 태그에 작성 가능

<button onclick="testfn();">함수 실행 확인용 버튼</button>

<script type="text/Javascript">
  // 자바스크립트 주석

  // public void methodName(){} : Java
  // 자바스크립트에서 함수 작성 시 함수명 앞에 반환자료형(return type) 붙이지 않음
  function testfn() {
  	alert('testfn() 함수 실행 활인');
  }
</script>

3. external 방식

별도의 js 파일로 작성해서 가져다 사용하는 방법

 <script src="js/sample.js"></script>
 <button onclick="samp();">samp() 실행</button>

forEach & filter & map & sort & reduce

hongitaa — Fri, 11 Jun 2021 01:48:58 +0900

const companies = [
    {name: "Company One", category: "Finance", start: 1981, end: 2003},
    {name: "Company Two", category: "Retail", start: 1992, end: 2008},
    {name: "Company Three", category: "Auto", start: 1999, end: 2007},
    {name: "Company Four", category: "Retail", start: 1985, end: 2010},
    {name: "Company Five", category: "Technology", start: 2009, end: 2017},
    {name: "Company Six", category: "Finance", start: 2000, end: 2015},
    {name: "Company Seven", category: "Auto", start: 1986, end: 1998},
    {name: "Company Eight", category: "Technology", start: 2011, end: 2018},
    {name: "Company Nine", category: "Retail", start: 1980, end: 1989}
];

const ages = [33, 12, 20, 16, 5, 54, 21, 44, 61, 13, 15, 45, 25, 64, 32];

1. forEach

// basic for
for(let i = 0; i < companies.length; i++){
    console.log(companies[i]);
}

// forEach
companies.forEach(function(company) {
    console.log(company.name);
})

/*
Company One
Company Two
Company Three
Company Four
Company Five
Company Six
Company Seven
Company Eight
Company Nine
*/

2. filter

const canDrink2 = ages.filter(function(age){
    if(age >= 21){
        return true;
    }
})
console.log(canDrink2);
// [ 33, 54, 21, 44, 61, 45, 25, 64, 32] 

// more clean code
const canDrink3 = ages.filter(age => age >= 21);
console.log(canDrink3);


// Filter retail companies
const retailCompanies = companies.filter(function(company){
    if(company.category === 'Retail'){
        return true;
    }
})
console.log(retailCompanies);
/*
[
  { name: 'Company Two', category: 'Retail', start: 1992, end: 2008 },
  { name: 'Company Four', category: 'Retail', start: 1985, end: 2010 },
  { name: 'Company Nine', category: 'Retail', start: 1980, end: 1989 }
]
*/

// more clean code
const retailCompanies2 = companies.filter(company => company.category === 'Retail');
console.log(retailCompanies2);


// Get 80s companies
const eightiesCompanies = companies.filter(company => (company.start >= 1980 && company.start < 1990));
console.log(eightiesCompanies);
/*
[
  { name: 'Company One', category: 'Finance', start: 1981, end: 2003 },
  { name: 'Company Four', category: 'Retail', start: 1985, end: 2010 },
  { name: 'Company Seven', category: 'Auto', start: 1986, end: 1998 },
  { name: 'Company Nine', category: 'Retail', start: 1980, end: 1989 }
]
*/

// Get companies that lasted 10 years or more
const lastedTenYears = companies.filter(company => (company.end - company.start >= 10));
console.log(lastedTenYears);
/*
[
  { name: 'Company One', category: 'Finance', start: 1981, end: 2003 },
  { name: 'Company Two', category: 'Retail', start: 1992, end: 2008 },
  { name: 'Company Four', category: 'Retail', start: 1985, end: 2010 },
  { name: 'Company Six', category: 'Finance', start: 2000, end: 2015 },
  { name: 'Company Seven', category: 'Auto', start: 1986, end: 1998 }
] 
*/

3. map

// Create array of company names
const companyNames = companies.map(function(company){
    return company.name;
})
console.log(companyNames);

// more clean code
const companyNames2 = companies.map(company => company.name)
console.log(companyNames2);


const testMap = companies.map(
                        company => 
                        `${company.name} [${company.start} - ${company.end}]`);
console.log(testMap);
/*
[
  'Company One [1981 - 2003]',
  'Company Two [1992 - 2008]',
  'Company Three [1999 - 2007]',
  'Company Four [1985 - 2010]',
  'Company Five [2009 - 2017]',
  'Company Six [2000 - 2015]',
  'Company Seven [1986 - 1998]',
  'Company Eight [2011 - 2018]',
  'Company Nine [1980 - 1989]'
]
*/

const agesSquare = ages.map(age => Math.sqrt(age));
console.log(agesSquare);
/*
[
  5.744562646538029, 3.4641016151377544,
   4.47213595499958,                  4,
   2.23606797749979, 7.3484692283495345,
   4.58257569495584,    6.6332495807108,
  7.810249675906654,  3.605551275463989,
  3.872983346207417,  6.708203932499369,
                  5,                  8,
  5.656854249492381
]
*/
const agesTimesTwo = ages.map(age => age * 2);
console.log(agesTimesTwo);
/*
[ 66,  24,  40, 32, 10, 108, 42, 88, 122, 26, 30, 90, 50, 128, 64]
*/

const ageMap = ages
    .map(age => Math.sqrt(age))
    .map(age => age * 2);
console.log(ageMap);
/*
[
  11.489125293076057,  6.928203230275509,
    8.94427190999916,                  8,
    4.47213595499958, 14.696938456699069,
    9.16515138991168,   13.2664991614216,
  15.620499351813308,  7.211102550927978,
   7.745966692414834, 13.416407864998739,
                  10,                 16,
  11.313708498984761
]
*/

4. sort

// Sort companies by start year
const sortedCompanies = companies.sort(function(c1, c2){
    if(c1.start > c2.start){
        return 1;
    } else {
        return -1;
    }
});
console.log(sortedCompanies);

/*
[
  { name: 'Company Nine', category: 'Retail', start: 1980, end: 1989 },
  { name: 'Company One', category: 'Finance', start: 1981, end: 2003 },
  { name: 'Company Four', category: 'Retail', start: 1985, end: 2010 },
  { name: 'Company Seven', category: 'Auto', start: 1986, end: 1998 },
  { name: 'Company Two', category: 'Retail', start: 1992, end: 2008 },
  { name: 'Company Three', category: 'Auto', start: 1999, end: 2007 },
  { name: 'Company Six', category: 'Finance', start: 2000, end: 2015 },
  { name: 'Company Five', category: 'Technology', start: 2009, end: 2017},
  { name: 'Company Eight', category: 'Technology', start: 2011, end: 2018}
]
*/

// more clean code
const sortedCompanies2 = companies.sort((a,b) => (a.start > b.start ? 1 : -1));
console.log(sortedCompanies2);


// Sort ages
const sortAges = ages.sort((a, b) => a - b);
console.log(sortAges);
/*
 [ 5, 12, 13, 15, 16, 20, 21, 25, 32, 33, 44, 45, 54, 61, 64 ]
*/

const sortAges2 = ages.sort((a, b) => b - a);
console.log(sortAges2);
/*
[ 64, 61, 54, 45, 44, 33, 32, 25, 21, 20, 16, 15, 13, 12, 5]
*/

5. reduce

let ageSum = 0;
for(let i = 0; i < ages.length; i++){
    ageSum += ages[i];
}
console.log(ageSum);
// 460

const ageSum2 = ages.reduce(function(total, age) {
    return total + age;
}, 0);
console.log(ageSum2);
// 460

// more clean code
const ageSum3 = ages.reduce((total, age) => total + age, 0);
console.log(ageSum3);


// Get total years for all companies
const totalYears = companies.reduce(function(total, company){
    return total + (company.end - company.start);
}, 0);
console.log(totalYears);
// 122

// more clean code
const totalYears2 = companies.reduce((total, company) => total + (company.end - company.start), 0);
console.log(totalYears2);



// Combine Methods
const combined = ages
    .map(age => age * 2)
    .filter(age => age >= 40)
    .sort((a, b) => a - b)
    .reduce((a, b) => a + b, 0);

console.log(combined);
// 798

reduce()

hongitaa — Fri, 11 Jun 2021 01:48:18 +0900

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

@param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.

@param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.

Example

class Student {
    constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
    }
}
const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88)
];


const result = students.reduce((prev, curr) => {
    console.log('------');
    console.log(prev);
    console.log(curr);
    return prev + curr.score;
}, 0);    // I'll start with a zero
// Returned value enters prev the next time it
console.log(result / students.length); 
// -> 73.8

/*

------
prev 0
curr Student { name: 'A', age: 29, enrolled: true, score: 45 }
------
prev 45
curr Student { name: 'B', age: 28, enrolled: false, score: 80 }
------
prev 125
curr Student { name: 'C', age: 30, enrolled: true, score: 90 }
------
prev 215
curr Student { name: 'D', age: 40, enrolled: false, score: 66 }
------
prev 281
curr Student { name: 'E', age: 18, enrolled: true, score: 88 }
73.8

*/


// more clean code
const result = students.reduce((prev, curr) => prev + curr.score,0);
console.log(result / students.length);
// 73.8

prev : The returned value comes in.
curr : Items in an array are passed sequentially.

const numbers = [1, -1, 2, 3];

let sum = 0;
for (let n of numbers)
    sum += n;

console.log(sum);
// 5

// reduce ver
const sum2 = numbers.reduce((accumulator, currentValue) => {
	console.log('-----');
    console.log('a : ',accumulator);
    console.log('b : ',currentValue);
    console.log('a + b : ',accumulator + currentValue);
    return accumulator + currentValue;
}, 0);
/*
    -----
    a :  0
    b :  1
    a + b :  1
    -----
    a :  1
    b :  -1
    a + b :  0
    -----
    a :  0
    b :  2
    a + b :  2
    -----
    a :  2
    b :  3
    a + b :  5
*/

console.log(sum2);
// 5


// more clean code
const sum3 = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue
);

map()

hongitaa — Thu, 10 Jun 2021 23:33:10 +0900

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

Calls a defined callback function on each element of an array, and returns an array that contains the results.

@param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

@param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

Example

class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];
  
  const result = students.map((student) => student.score);
  
  console.log(result);
  // [ 45, 80, 90, 66, 88 ]

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const smilingDays = days.map(day => `  ${day}`);

// same code
const addSmile = day => `  ${day}`;
const smilingDays = days.map(addSmile);
console.log(smilingDays);
// [ '  Mon', '  Tue', '  Wed', '  Thurs', '  Fri' ]

const addIndexDays = days.map((day, index) => `#${index} ${day}`);
console.log(addIndexDays);
// [ '#0 Mon', '#1 Tue', '#2 Wed', '#3 Thurs', '#4 Fri' ]

const numbers = [1, -1, 2, 3];

const filtered = numbers.filter(n => n >= 0);
// can filter value in an array

const items = filtered.map(n => {
    const obj = { value : n };
    return obj;
})

console.log(items);
// [ { value: 1 }, { value: 2 }, { value: 3 } ]

// same code
const items2 = filtered.map(n => ({ value : n }));

// same code
const items3 = numbers
    .filter(n => n >= 0)
    .map(n => ({ value : n }));

4. filter and map chaining

const items4 = numbers
  .filter(n => n >= 0)
  .map(n => ({ value : n }))
  .filter(obj => obj.value > 1);
// can call the filter one more time 
// get an object and maybe want to get objects with value greater than 1

console.log(items4);
// [ { value: 2 }, { value: 3 } ]


const items5 = numbers
  .filter(n => n >= 0)
  .map(n => ({ value : n }))
  .filter(obj => obj.value > 1)
  .map(obj => obj.value);
// and again call the map method
// maybe map each object to a number
// so i can read the value property and return it

console.log(items5);
// [ 2, 3 ]

forEach()

hongitaa — Thu, 10 Jun 2021 21:44:18 +0900

 forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

Performs the specified action for each element in an array.

@param callbackfn A function that accepts up to three arguments.

forEach calls the callbackfn function one time for each element in the array.

@param thisArg An object to which the this keyword can refer in the callbackfn function.

If thisArg is omitted, undefined is used as the this value.

example.

let numbers = [1, 2, 3, 4, 5, 6, 7];

numbers.forEach(function(num) {
  console.log(num);
})

// same code
numbers.forEach(num => console.log(num));

let fruits2 = [' ',' ',' ',' ',' '];
let fruits3 = [' '];

fruits2.forEach(fruit => fruits3.push(fruit));
console.log(fruits3);
// [ ' ', ' ', ' ', ' ', ' ', ' ' ]

let sum = 0;
let numbers2 = [20, 11, 33, 10, 7, 77];

numbers2.forEach(addTotal);

function addTotal(num){
  sum += num;
}
console.log(sum);
// 158

// same code
numbers2.forEach(number => sum += number)
console.log(sum);
// 158

let number3 = [20, 11, 33, 10, 7, 77, 5];
number3.forEach((number, index, array) => {
  array[index] = number * 2;
})

console.log(number3);
// [40, 22, 66, 20, 14, 154, 10]

3. async & await

hongitaa — Thu, 10 Jun 2021 19:36:36 +0900

API to make Promise seem concise, simple and synchronous

clear style of using promise

async is a syntactic sugar that makes Promise easier to use.

1. async

async function fetchUser(){
    return new Promise((resolve, reject) => {
        // do network request in 10 secs...
        resolve('lexie');
    })
}

const user = fetchUser();
user.then(console.log);

if I put "async" keyword in front of the function, The code block automatically changes to Promise.

2. await ✨

await is only available inside async function

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
} 

async function getApple() {
    await delay(1000);
    // if happened some error here
    // throw new Error(`error: apple`); 
    return ' ';
}

async function getBanana(){
    await delay(1000);
    // if happened some error here
    // throw new Error(`error: banana`); 
    return ' ';
}

Make execute function

function pickFruits1() {
    return getApple()
    .then(apple => {
       return getBanana()
       .then(banana => `${apple} + ${banana}`);
    })
}

pickFruits1().then(console.log);

I can get + in 2 secs.

It's two returns, but it looks complicated.

So, let's fix this

async function pickFruits2(){
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}

pickFruits2().then(console.log);

I can get + in 2 secs.

And It's more simple.

But I don't need to wait in order to get apple and banana.

I want to get that at the same time.

So,

async function pickFruits3(){
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
} 

pickFruits3().then(console.log);

I can get + in 1 secs.

Because~

As soon as it is created, the function is executed.

In parallel, apples and bananas are obtained at the same time.

But it's not clean code

Finally, I can fix like this through the Promise API

function pickAllFruits(){
    return Promise.all([getApple(),getBanana()])
    .then(fruits => fruits.join(' + '));
}

pickAllFruits().then(console.log);

send function as an array type and receives an array of fruits.

I can get + in 1 secs.

+) Promise.race()

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
} 

async function getApple() {
    await delay(2000);
    return ' ';
}

async function getBanana(){
    await delay(1000);
    return ' ';
}


function pickOnlyOne(){
    return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

Among the promises passed to the array, only the first to return the value is passed on.

I can get in 1 sec.

There's more detail > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

2. Promise

hongitaa — Thu, 10 Jun 2021 17:28:07 +0900

Promise is JavaScript object for asynchronous operfation.

State : pending -> fulfilled or rejected

Producer vs Consumer

new Promise(executor)

A Promise object is created using the new keyword and its constructor.

1. Producer

// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    console.log('doing something...');
    setTimeout(() => {
        resolve('lexie');
       // reject(new Error('no network'));
    },2000);
});

This constructor takes a function, called the "executor function", as its parameter.

This function should take two functions as parameters.

The first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value.

The second (reject) is called when the task fails, and returns the reason for failure, which is typically an error object.

2. Consumer : then, catch, finally

promise
    .then((value) => {
        console.log(value);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {
        console.log('finally');
    });

then

: After doing well in Promise, Run when the resolve function is called.

catch

: Process functions rejected by Promise using catch.

finally

: It is a function that is performed at the end.

Promise Chaning

The then method returns a Promise which allows for method chaining.

If the function passed as handler to then returns a Promise, an equivalent Promise will be exposed to the subsequent then in the method chain. The below snippet simulates asynchronous code with the setTimeout function.

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
})

fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

=> Expect the number 5 to come out in 2 sec.

Promise.resolve('foo')
  // 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then
  .then(function(string) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += 'bar';
        resolve(string);
      }, 1);
    });
  })
  // 2. receive "foobar", register a callback function to work on that string
  // and print it to the console, but not before returning the unworked on
  // string to the next then
  .then(function(string) {
    setTimeout(function() {
      string += 'baz';
      console.log(string); // foobarbaz
    }, 1)
    return string;
  })
  // 3. print helpful messages about how the code in this section will be run
  // before the string is actually processed by the mocked asynchronous code in the
  // previous then block.
  .then(function(string) {
    console.log("Last Then:  oops... didn't bother to instantiate and return " +
                "a promise in the prior then so the sequence may be a bit " +
                "surprising");

    // Note that `string` will not have the 'baz' bit of it at this point. This
    // is because we mocked that to happen asynchronously with a setTimeout function
    console.log(string); // foobar
  });

=> logs, in order:
Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising
foobar
foobarbaz

Error Handling

const getHen = () => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(' '), 1000);
    });
const getEgg = hen => 
    new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error(`error ! ${hen} =>  `)), 1000);
    });
const cook = egg => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} =>  `), 1000);
    });

getHen()
    .then(hen => getEgg(hen))
    .then(egg => cook(egg))
    .then(meal => console.log(meal));

// more clean code
getHen() 
    .then(getEgg)
    .catch(error => {
        return ' ';
    })
    .then(cook)
    .then(console.log)
    .catch(console.log);

Result

I returned bread instead of eggs because there was an error in the process of getting eggs.

So in conclusion, I can cook with bread.

Let's change the last callback function code to Promise.

Before (using callback)

'use strict';

 class UserStorage {
     loginUser(id, password, onSuccess, onError){
         setTimeout(() => {
            if(
                (id === 'lexie' && password === 'sehong') ||
                (id === 'sehong' && password === 'lexie')
            ) {
                onSuccess(id);
            } else {
                onError(new Error('not found'));
            }
         },2000);
     }

     getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if(
                (user === 'lexie')
            ) {
                onSuccess({ name: 'lexie', role: 'admin'});
            } else {
                onError(new Error('not access'));
            }
         }, 1000);
     }
 }

 const userStorage = new UserStorage();
 const id = prompt('enter your id');
 const password = prompt('enter your password');
 userStorage.loginUser(
     id,
     password,
     user => {
         userStorage.getRoles(
                                user, 
                                userWithRole => {
                                    alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
                                },
                              error => console.log(error));
         },
     error => console.log(error)
 );

After (using Promise)

'use strict';

 // Callback Hell example -> Promise
 class UserStorage {
     loginUser(id, password){
         return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(
                    (id === 'lexie' && password === 'sehong') ||
                    (id === 'sehong' && password === 'lexie')
                ) {
                    resolve(id);
                } else {
                    reject(new Error('not found'));
                }
             },2000);
         })
     }

     getRoles(user){
         return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(user === 'lexie') {
                    resolve({ name: 'lexie', role: 'admin'});
                } else {
                    reject(new Error('not access'));
                }
             }, 1000);
         })
     }
 }

 const userStorage = new UserStorage();
 const id = prompt('enter your id');
 const password = prompt('enter your password');

 userStorage.loginUser(id, password)
 .then(userStorage.getRoles)
 .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
 .catch(console.log);

It has become cleaner and easier to read.

1. callback function - Synchronous & Asynchronous

hongitaa — Thu, 10 Jun 2021 14:07:20 +0900

JavaScript is synchronous.

Execute the code block by orger after hoisting.

hoisting: The declaration of a var or a function is lifted.

Let's see an example

console.log('1');   
// -> sync

setTimeout(() => console.log('2'), 1000);   
// -> async

console.log('3');   
// -> sync


// Synchronous callback
function printImmediately(print){
    print();
}
printImmediately(() => console.log('hello'));   
// -> sync


// Asynchronous callback
 function printWithDelay(print, timeout){
     setTimeout(print, timeout);
 }
 printWithDelay(()=> console.log('async callback'), 2000); 
 // -> async

I put a mixture of Sync functions and Async functions.

And the following results can be seen.

Sync functions are executed in batches first.

And Async functions are excuted on time set.

The method of using callbacks is a common approach to asynchronous programming.

Let's make it a simple login using a callback.

 // Callback Hell example
 
 // 1.
 class UserStorage {
     loginUser(id, password, onSuccess, onError){
         setTimeout(() => {
            if(
                (id === 'lexie' && password === 'sehong') ||
                (id === 'sehong' && password === 'lexie')
            ) {
                onSuccess(id);
            } else {
                onError(new Error('not found'));
            }
         },2000);
     }
     // 2. 
     getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if(
                (user === 'lexie')
            ) {
                onSuccess({ name: 'lexie', role: 'admin'});
            } else {
                onError(new Error('not access'));
            }
         }, 1000);
     }
 }

 // 3.
 const userStorage = new UserStorage();
 
 // 4.
 const id = prompt('enter your id');
 const password = prompt('enter your password');
 
 // 5.
 userStorage.loginUser(
     id,
     password,
     user => {
         userStorage.getRoles(
                                user, 
                                userWithRole => {
                                    alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
                                },
                              error => console.log(error));
         },
     error => console.log(error)
 );

1. Create a function that receives an ID and password and excecutes the function according to the match.

2. If the ID is lexie, create a function that tells you the permission.

3. Create a new UserStorage

4. Receive an ID and password

5. Pass id and password, onSuccess function and error function to execute login function

So, every new action is inside a callback. It too complecated and readability is bad..

That’s fine for few actions, but not good for many, so we’ll see other variants soon.

There's more detail > https://javascript.info/callbacks

kor ver > https://ko.javascript.info/callbacks

3. bulk Operation - insert / update / upsert / delete

hongitaa — Thu, 10 Jun 2021 00:15:14 +0900

Now let's put the data read from the csv file into the database

// bulk insert into mongodb
async function insertingData(arrData) {
  try {
    await client.connect();
    const testCollection = await client.db("restaurant").collection('location');
   	// -> This mean, I want to access 'location' collection in a database called 'restaurant'
    
    await testCollection.deleteMany({});  
    // -> will remove everything
    
    
    // insert 
    var bulk = testCollection.initializeUnorderedBulkOp();
    arrData.forEach(element => {
      console.log('element',element);
      // this element is thhe value I converted to an array last time.
      bulk.insert(element);
    });
    
    await bulk.execute();


    // update
     var bulk2 = testCollection.initializeUnorderedBulkOp();
     arrData.forEach(element => {
       bulk2.find({_id:'609ce32cd477b9020367a495'}).updateOne({$set: {restaurantDisplayName:'Lexie Bar'}});
       console.log('updated');
     });
     
     await bulk2.execute();


    // upsert 
    var bulk3 = testCollection.initializeUnorderedBulkOp();
    arrData.forEach(element => {
    bulk3.find({_id:'609ce32cd477b9020367a495'}).upsert().updateOne({$set:{restaurantPhone:'12341234'}});  
    // Update if there is a line that matches the _id I'm looking for
    
    bulk3.find({_id:'leaveTheDoorOpen'}).upsert().updateOne(
      {$set:{
            restaurantPhone:'12341234',
            restaurantDisplayName:'Bruno Mars Bar'}});
      /*
        -> Insert if no row matches the _id I'm looking for
        Look at Atlas, I can see that it was newly inserted 
        because there was no such data
        
        _id: "leaveTheDoorOpen"
        restaurantPhone: "12341234"
        
        like this!
      */
      console.log('upsert');
    });
    
    await bulk3.execute();


    // delete
     var bulk4 = testCollection.initializeUnorderedBulkOp();
     arrData.forEach(element => {
        bulk4.find({_id:'leaveTheDoorOpen'}).delete();
        console.log('deleted');
        // -> A document with this id has been deleted

        // update key to null
        bulk4.find({_id:'leaveTheDoorOpen'}).update({$unset:{restaurantPhone:""}});
        console.log('unset');
        // -> deleted only restaurantPhone key
      
     });
     await bulk4.execute();

  } finally {
    await client.close();
  }
} 


async function run(){
  await connectDb(); 
  const locationData = readCsv('./locations.csv');
  const csvArr = csvToArray(locationData);
  await insertingData(csvArr.slice(0,3));
}

run().catch(console.dir);

initializeUnorderedBulkOp()

: Initializes and returns a new Bulk() operations builder for a collection.

The builder constructs an ordered list of write operations that MongoDB executes in bulk.

2. How to read csv file and convert to Array

hongitaa — Wed, 9 Jun 2021 19:56:54 +0900

const fs = require('fs');

// 1. read file (csv)
const readCsv = (text: string): string => {
  const data = fs.readFileSync(text,'utf-8');
  console.log('data',data);
  // -> expect string type contents in csv file
  return data;
}


// 2. convert file to array
function csvToArray(file, separator=","){
   const [headersString, ...lines] = file.split("\n");
   // -> divide each line by line
   const headers = headersString.split(separator);
   // -> the top line of csv
   // top line involved keys so need split method 
   
   // make to array all the lines under the header
   const result = lines.map((lineString) => {
      const values = lineString.split(separator);
      const el = headers.reduce(function(object, header, index){
        if(!header.includes('.')){
          object[header] = values[index];
        }
        console.log('object',object);
        return object;
      },{});
      console.log('el',el);
      return el;
   })
   console.log('result', result);
   return result;
}

// execute method
async function run(){
  await connectDb(); 
  const locationData = readCsv('./locations.csv');
  const csvArr = csvToArray(locationData);
}

run().catch(console.dir);

reduce()

: Calls the specified callback function for all the elements in an array.

The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

map()

: Calls a defined callback function on each element of an array, and returns an array that contains the results.

For map methods and reduce methods, I will post in more detail in the JavaScript category.