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

** ⚠ 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

1. reference type

2. context vs scope

3. 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은 두개 추가댐

1. .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

2. 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보다는 좀더바뀌긴함
중요한 몇개만 살펴봄

1. 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"

2. 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

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

3. 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