ES6, 7, 8 정리

 

[1] Variables 
1. Var 
- var는 더이상 쓰지마라. 
- const를 써라. 대신 const의 하위 오브젝트 제어는 가능. 
- let도 지양 하지만 오브젝트를 변경해야 할 일이 있을 변수에는 사용. 그래도 웬만하면 const.

2. Hoisting / Block Scope 
- 지겨운 호이스팅  
- const, let 사용 시 호이스팅에 트랩에서 빠져 나올 수 있음 

3. Block Scope 
- f a{ f b{}} a에서 b의 object로 접근할 수 없고, b에서 a는 가능 
- 당연히 if, for 등 {} 버블 내에서는 모두 적용

 

4. 정리 
- const, let, hoisting, block scope를 기억해라.

 

[2] Functions

1. Arrow Functions

const names = ["lee", "going", "doing"]; 
const hearts = names.map((item, index) => item + " heart " + index); 
console.log(hearts); 

 

2. "this" in Arrow Functions 

// 1) e.g
const button = document.querySelector("button"); 
button.addEventListener("click", function() { 
  this.style.backgroundColor = red; 
  console.log("clikcked"); 
  //this는 click 이벤트 참조 
}); 
button.addEventListener("click", () => { 
  this.style.backgroundColor = red; 
  console.log("clikcked"); 
  //this는 window를 가르킴(바깥 버블 값) 
}); 
const handleClick = () => { 
  console.log(this); 
  //this는 당연히 window 
}; 
function handleClick(){ 
    console.log(this); 
    //this는 click 이벤트 참조 
  }; 
button.addEventListener("click", handleClick); 

// 2) e.g
//여전히 this는 윈도우를 가르킴 
const info = { 
  name: "doing", 
  age: 24, 
  addYear: () => { 
    this.age++; 
  } 
}; 
console.log(info); 
info.addYear(); 
info.addYear(); 
console.log(info);
//정상적으로 출력
const info = { 
  name: "doing", 
  age: 24, 
  addYear() { 
    this.age++; 
  } 
}; 
console.log(info); 
info.addYear(); 
info.addYear(); 
console.log(info);

 

3. Arrow Functions in the Real World

const emails = [
  "leedoing@gmail.com",
  "leegoing@naver.com",
  "lee@daum.net",
  "dodo@gmail.com"
];

//1. find
const foundMail = emails.find(item => item.includes("@gmail.com"));
const foundMail2 = emails.find(function(item) {
  return item.includes("@gmail.com");
});
console.log("find");
console.log(foundMail);
console.log(foundMail2);

//2. filter
const noGmail = emails.filter(email => !email.includes("@gmail"));
console.log("filter");
console.log(noGmail);

//3. forEach
const cleaned = [];
emails.forEach(email => cleaned.push(email.split("@")[0]));
console.log("forEach");
console.log(cleaned);

//4. map
const cleaned2 = emails.map(email => email.split("@")[0]);
console.log("map");
console.log(cleaned2);

//5. index
const cleaned3 = emails.map((email, index) => ({
  username: email.split("@")[0],
  points: index
}));
console.log("index");
console.log(cleaned3);
console.table(cleaned3);

//6. Default Value
const DEFAULT = "fxxk";

function sayHi(aName) {
  return "Hello " + (aName || DEFAULT);
}
console.log(sayHi());

function sayHi2(aName = DEFAULT) {
  return "Hello " + aName;
}
console.log(sayHi2());

const sayHi3 = (aName = DEFAULT) => "hello " + aName;
console.log(sayHi3());

 

 

[3] String

1. templete literals

// 1) e.g
"Hi "+syaHi" => `Hi ${sayHi}`

// 2) e.g
const add = (a, b) => a + b;
console.log(`Hi ${add(7, 7)}`);

 

2. HTML Fragments

// 1) e.g
const wrapper = document.querySelector(".wrapper");
const addWelcome = () => {
    const div = document.createElement("div");
    const h1 = document.createElement("h1");
    h1.innerText = "Hello";
    h1.className = "sexyTitle";
    div.append(h1);
    wrapper.append(div);
}

const addWelcome2 = () => {
    const hello = hello
    const div = `
        <div class="hello">
            <h1 class="title">${hello}</h1>
        </div>
    `
    wrapper.innerHTML = div;
}


// 2) e.g
const wrapper = document.querySelector(".wrapper");
const friends = ["me", "kwon", "park", "jung"];
const ul = document.createElement("ul");
const list = `
    <h1>People i love</h1>
    <ul>
        ${friends.map(friend => `<li>${friend}</li>`)}
        ${friends.map(friend => `<li>${friend}</li>`).join("")}
    </ul>
`;
wrapper.innerHTML = list;

 

3. Styled Components(feat. React)

// 1) e.g
const styled = css => console.log(css)
styled`border-radius:10px;
color:blue`;

// 2) e.g
const styled = aElement => {
  const el = document.createElement(aElement);
  return args => {
    const styles = args[0];
    console.log(styles);
    el.style = styles;
    return el;
  };
};

const title = styled("h1")`
  background-color: red;
  color: blue;
`;

const subtitle = styled("span")`
  color: green;
`;

title.innerText = "We just do it";
subtitle.innerText = "Styled cloned";

document.body.append(title, subtitle);

 

4. String Improvements

// 1) include
const isEmail = email => email.includes("@");
console.log(isEmail("leedoing@gmail.com"));

// 2) repeat
const cardNumber = "7070";
const displayName = `${"*".repeat(10)}${cardNumber}`;
console.log(displayName);

// 3) starts/endsWith
const name = "Mr.Lee";
console.log(name.startsWith("Mr"));
console.log(name.endsWith("Mr"));

 

 

[4] Array

// 1) Array.of() 
const friends = ["lee", "going", "doing", "fxxk"]; 
console.log(friends); 

const friends2 = Array.of("lee", "going", "doing", "fxxk"); 
console.log(friends2); 

// 2) Array.from(array-like object) 
const buttons = document.querySelectorAll("button"); 
const buttonsClass = document.getElementsByClassName("btn"); 
console.log(buttons); 
console.log(buttonsClass); 

//NodeList is possible be converted to Array 
buttons.forEach(button => { 
  button.addEventListener("click", () => console.log("I've been clicked btn")); 
}); 

//HTMLCollection List is not Array, So can't use a forEach 
// buttonsClass.forEach(button => { 
//   button.addEventListener("click", () => 
//     console.log("I've been clicked btnClass") 
//   ); 
// }); 

Array.from(buttonsClass).forEach(button => { 
  button.addEventListener("click", () => 
    console.log("I've been clicked btnClass") 
  ); 
}); 

const arr = Array.from(buttonsClass); 

arr.forEach(button => { 
  button.addEventListener("click", () => 
    console.log("I've been clicked btnClass") 
  ); 
}); 

// 3) Array.includes() 
const arr = ["hi", "hello"] 
arr.includes("hi") => true or false 

// 4) Array.find() / Array.findIndex() / Array.fill() 
const friends = [ 
  "moon@gmail.com", 
  "trump@gmail.com", 
  "putin@gmail.com", 
  "mb@gmail.com" 
]; 
// e.g) Array.find(), includes 
const target = friends.find(friend => friend.includes("mb")); 
console.log(target); 

// e.g) Array.findIndex(), includes 
// const targetIndex = friends.findIndex(friend => friend.includes("mb")); 
const check = () => friends.findIndex(friend => friend.includes("mb")); 
let targetIndex = check(); 
if (targetIndex !== 1) { 
  console.log(targetIndex); 

  const userName = friends[targetIndex].split("@")[0]; 
  const email = "korea.com"; 

  console.log(`${userName}@${email}`); 
  friends[targetIndex] = `${userName}@${email}`; 
} 
console.log(friends);

// e.g) Array.fill()
if (targetIndex !== -1) {
  friends.fill("*".repeat("5"), );
}
console.log(friends);

 

 

[5] Destructuring

// 1) Object Destructuring
const settings = {
  notifications: {
    // follow: true,
    alert: true,
    unfollow: false,
    message: {
      name: "lee",
      text: "hi"
    }
  },
  color: {
    theme: "dark"
  }
};
const {
  notifications: {
    follow = false,
    message: { name = false, text = false } = {}
  } = {},
  color: { theme = "light" } = {}
} = settings;
console.log(follow, name, text, theme);


// 2) Renaming
const settings = {
  color: {
    chosen_color: "dark"
  }
};
const chosenColor = settings.color.chosen_color || "light";
console.log(chosenColor);

let chosenColor = "blue";
({
  color: { chosen_color: chosenColor = "light" }
} = settings);
console.log(chosenColor);


// 3) Array Destructuring
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const [mon, tue, wed, thu = "Thu"] = days;
console.log(mon, tue, wed, thu);

const days = () => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const [mon, tue, wed, thu = "Thu"] = days();
console.log(mon, tue, wed, thu);


// 4) Function Destructuring
// 1) fxxk
function saveSettings(follow, alert, color, message) {
  console.log(follow, alert, color, message);
}
const message = {
  name: "lee",
  text: "fxxk"
};
saveSettings(true, true, "green", message);

// 2) better
saveSettings({
  follow: true,
  alert: true,
  color: true,
  message: {
    name: "lee",
    text: "fxxk"
  }
});
function saveSettings(settings) {
  console.log(settings);
}

// 3) coooool
function saveSettings({
  follow,
  alert,
  color = "blue",
  message: { name = "default", text = "fxxk" }
}) {
  console.log(follow, alert, color, name, text);
}

const saveSettings = ({
  follow,
  alert,
  color = "blue",
  message: { name = "default", text = "fxxk" }
}) => {
  console.log(follow, alert, color, name, text);
};


// 5) Value Shorthands
const follow = checkFollow();
const alert = checkAlert();
const settings = {
    notifications: {
        // infollow: follow,
        follow,
        alert
    }
}


// 6) Swapping and Skipping
// Swapping
let mon = "Sat";
let sat = "Mon";
[sat, mon] = [mon, sat];

// Skipping
const days = ["mon", "tue", "wed", "thu", "fri", "sun"];
const [, , , thu, , sun] = days;
console.log(thu, sun);

 

 

[6] Rest and Spread

// 1) Spread Basic
const friends = [1, 2, 3, 4];
const family = ["a", "b", "c"];

console.log(...friends);
console.log(friends + family);
console.log([...friends, ...family]);

const sexy = {
  name: "nico",
  age: 24
};
const power = {
  sexy: true,
  hello: "hello"
};
console.log({ ...sexy, ...power });

const sexyPower = { ...sexy, ...power };
console.log(sexyPower);

// 2) Spread Coool
const friends = ["lee", "doing"];
const newFriends = ["dal", ...friends];
console.log(newFriends);

const id = {
  username: "fxxk"
};
console.log({ ...id, password: 123 });

const first = ["mon", "tue", "wed"];
const weekend = ["sat", "sun"];
const fullWeek = [...first, "thu", "fri", ...weekend];
console.log(fullWeek);

const lastName = prompt("Last name");
const user = {
  username: "nico",
  age: 23,
  //lastName: lastName !== "" ? lastName : undefined
  ...(lastName !== "" && { lastName })
};
console.log(user);

// 3) Rest Parameters
const infiniteArgs = (...lee) => console.log(lee);
infiniteArgs("1", 2, true, "lalala", [1, 2, 3, 4]);

const bestFriendMaker = (firstOne, ...rest) => {
  console.log(`My best friend is ${firstOne}`);
  console.log(rest);
};
bestFriendMaker("lee", "doing", "going");


// 4) Spread + Rest
// case 1
const user = {
  name: "lee",
  age: 23,
  password: 12345
};
const killPassword = ({ password, ...rest }) => rest;
const cleanUser = killPassword(user);
console.log(cleanUser);

// case 2
const setCountry = ({ country = "KR", ...rest }) => ({ ...rest, country });
console.log(setCountry(user));

// case 3
const rename = ({ name: Name, ...rest }) => ({ Name, ...rest });
console.log(rename(user));

 

 

 

[7] For of Loop

// 1) forEach(Can't stop loop)
const friends = ["lee", "doing", "going", "dal", "rose"];
const addHeart = (c, i, a) => console.log(c, i, a);
friends.forEach(addHeart);
friends.forEach(friend => console.log(friend));

// 2) for...of(can stop loop) Support Array, Iterables, NodeList, Strings
for (const friend of friends) {
  console.log(friend);
}
for (const letter of "hello this") {
  console.log(letter);
}
for (const friend of friends) {
  if (friend === "dal") {
    break;
  } else {
    console.log(friend);
  }
}

 

 

 

[8] Promise

// 1) Async
const hello = fetch("http://google.com");
console.log("something");
console.log(hello);

// 2) Create Promise
const sexy = new Promise((resolve, reject) => {
  //   setTimeout(() => {
  //     resolve("Yes you are!");
  //   }, 3000);
  setTimeout(resolve, 3000, "Yes you are");
});
console.log(sexy);

// setTimeout(() => {
//   console.log(sexy);
// }, 1000);
setInterval(console.log, 3000, sexy);

// 3) Using Promise
const sexy = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "Yes you are");
  setTimeout(reject, 3000, "You are ugly");
});
sexy.then(result => console.log(result)).catch(err => console.log(err));

const thenFn = value => console.log(value);
sexy.then(thenFn);

// 4) Chaining Promise
const sexy = new Promise((resolve, reject) => {
  //   resolve(2);
  reject(2);
});
sexy
  .then(number => {
    console.log(number * 2);
    return number * 2;
  })
  .then(otherNumber => {
    console.log(otherNumber * 2);
  });

const timesTwo = number => number * 2;

sexy
  .then(timesTwo)
  .then(timesTwo)
  .then(timesTwo)
  .then(() => {
    throw Error("Something is wrong");
  })
  .then(lastNumber => console.log(lastNumber))
  .catch(err => console.log(err));

// 5) Promise.all
const p1 = new Promise(resolve => {
  setTimeout(resolve, 5000, "First");
});
const p2 = new Promise((resolve, reject) => {
  //   setTimeout(resolve, 1000, "Second");
  setTimeout(reject, 1000, "Go hell");
});
const p3 = new Promise(resolve => {
  setTimeout(resolve, 1000, "Third");
});
const motherPromise = Promise.all([p1, p2, p3]);

motherPromise
  .then(values => console.log(values))
  .catch(err => console.log(err));

// 6) Promise.race
const p1 = new Promise(resolve => {
  setTimeout(resolve, 10000, "First");
});
const p2 = new Promise((resolve, reject) => {
  //   setTimeout(resolve, 1000, "Second");
  setTimeout(reject, 5000, "Go hell");
});
const p3 = new Promise(resolve => {
  setTimeout(resolve, 1000, "Third");
});
const motherPromise = Promise.race([p1, p2, p3]);

motherPromise
  .then(values => console.log(values))
  .catch(err => console.log(err));

// 7) Finally
const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, "First");
})
  .then(value => console.log(value))
  .catch(e => console.log(`${e}`))
  .finally(() => console.log("I'm done"));

// 8) Result
fetch("https://yts.lt/api/v2/list_movies.json")
  .then(response => {
    console.log(response);
    return response.json();
  })
  .then(json => console.log(json))
  .catch(e => console.log(`${e}`));

 

 

[9] Await / Async

// 1) Async Await
const getMoviesPromise = () => {
  fetch("https://yts.lt/api/v2/list_movies.json")
    .then(response => {
      console.log(response);
      return response.json();
    })
    .then(json => console.log(json))
    .catch(e => console.log(`${e}`));
};
getMoviesPromise();

const getMoviesAsync = async () => {
  const response = await fetch("https://yts.lt/api/v2/list_movies.json");
  const json = await response.json();
  console.log(json);
};
getMoviesAsnyc();

// 2) try, catch, finally
const getMoviesAsync = async () => {
  try {
    const response = await fetch("https://yts.lt/api/v2/list_movies.json");
    const json = await response.json();
    console.log(json);
    // throw Error("fxxk");
  } catch (e) {
    console.log(e);
    // All of erros catched
  } finally {
    console.log("Done");
  }
};
getMoviesAsnyc();

// 3) Parallel Async Await
const getMoviesAsnyc = async () => {
  try {
    const [moviesResponse, movieDetailsResponse] = await Promise.all([
      fetch("https://yts.lt/api/v2/list_movies.json"),
      fetch("https://yts.lt/api/v2/movie_details.json?movie_id=10")
    ]);
    const [movies, movieDetails] = await Promise.all([
      moviesResponse.json(),
      movieDetailsResponse.json()
    ]);
    console.log(movies, movieDetails);
    // throw Error("fxxk");
  } catch (e) {
    console.log(e);
  } finally {
    console.log("Done");
  }
};
getMoviesAsnyc();

 

[10] Class

// 1) Introducion to Class
class User {
  constructor(name) {
    this.userName = name;
  }
  sayHello() {
    console.log(`Hello ${this.userName}`);
  }
}
const sexyUser = new User("Lee");
sexyUser.sayHello();

const baseObject = {
  userName: "Lee",
  sayHello: function() {
    console.log(`Hello ${this.userName}`);
  }
};
const sexyUser1 = baseObject;
sexyUser1.sayHello();


// 2) Extending Class
class User {
  constructor(userName, lastName, email, password) {
    this.userName = userName;
    this.lastName = lastName;
    this.email = email;
    this.password = password;
  }
  sayHello() {
    console.log(`Hello ${this.userName}`);
  }
  getProfile() {
    console.log(`${this.userName} ${this.email} ${this.password}`);
  }
  updatePassword(newPassword, currentPassword) {
    if (currentPassword === this.password) {
      this.password = newPassword;
    } else {
      console.log("Can't change password");
    }
  }
}
class Admin extends User {
  constructor(superAdmin) {
    this.superadmin = superAdmin;
  }
  deleteWebsite() {
    console.log("Deleting the whole website...");
  }
}
const sexyAdmin = new Admin("Doing", "Lee", "lee@gmail.com", "1234", true);
sexyAdmin.deleteWebsite();
console.log(sexyAdmin.email);


// 3) Super
// 1) e.g
class User {
  constructor({ userName, lastName, email, password }) {
    this.userName = userName;
    this.lastName = lastName;
    this.email = email;
    this.password = password;
  }
  sayHello() {
    console.log(`Hello ${this.userName}`);
  }
  getProfile() {
    console.log(`${this.userName} ${this.email} ${this.password}`);
  }
  updatePassword(newPassword, currentPassword) {
    if (currentPassword === this.password) {
      this.password = newPassword;
    } else {
      console.log("Can't change password");
    }
  }
}
const sexyUser = new User({
  username: "lee",
  lastName: "doing",
  email: "leedoing@gmail.com",
  password: "1234"
});

class Admin extends User {
  constructor({ userName, lastName, email, password, superAdmin, isActive }) {
    super({ userName, lastName, email, password });
    this.superAdmin = superAdmin;
    this.isActive = isActive;
  }
  deleteWebsite() {
    console.log("Deleting the whole website...");
  }
}
const sexyAdmin = new Admin({
  username: "lee",
  lastName: "doing",
  email: "leedoing@gmail.com",
  password: "1234",
  superAdmin: true,
  isActive: true
});
sexyAdmin.deleteWebsite();
console.log(sexyAdmin.email);

// 2) e.g
class Counter {
  constructor({ inintialNumber = 0, counterId, plusId, minusId }) {
    this.count = inintialNumber;
    this.counter = document.getElementById(counterId);
    this.plusBtn = document.getElementById(plusId);
    this.minusBtn = document.getElementById(minusId);
    this.addEventListners();
  }
  addEventListners() {
    this.plusBtn.addEventListener("click", this.increase);
    this.minusBtn.addEventListener("click", this.decrease);
  }
  increase() {
    this.count = this.count + 1;
    this.repaintCounter();
  }
  decrease() {
    this.count = this.count - 1;
    this.repaintCounter();
  }
  repaintCounter() {
    this.counter.innerText = this.count;
  }
}

new Counter({
  counterId: "count",
  plusId: "add",
  minusId: "minus"
});


// 4) WTF is this
// 1) e.g
class Counter {
  constructor({ inintialNumber = 0, counterId, plusId, minusId }) {
    this.count = inintialNumber;
    this.counter = document.getElementById(counterId);
    this.plusBtn = document.getElementById(plusId);
    this.minusBtn = document.getElementById(minusId);
    this.addEventListners();
  }
  addEventListners = () => {
    console.log(this);
    this.plusBtn.addEventListener("click", this.increase);
    this.minusBtn.addEventListener("click", this.decrease);
  };
  increase = () => {
    console.log(this);
    this.count = this.count + 1;
    this.repaintCounter();
  };
  decrease() {
    console.log(this);
    this.count = this.count - 1;
    this.repaintCounter();
  }
  repaintCounter() {
    this.counter.innerText = this.count;
  }
}

new Counter({
  counterId: "count",
  plusId: "add",
  minusId: "minus"
});

// 2) e.g
class Counter {
  constructor({ inintialNumber = 0, counterId, plusId, minusId }) {
    this.count = inintialNumber;
    this.counter = document.getElementById(counterId);
    this.counter.innerHTML = inintialNumber;
    this.plusBtn = document.getElementById(plusId);
    this.minusBtn = document.getElementById(minusId);
    this.addEventListners();
  }
  addEventListners = () => {
    console.log(this);
    this.plusBtn.addEventListener("click", this.increase);
    this.minusBtn.addEventListener("click", this.decrease);
  };
  increase = () => {
    console.log(this);
    this.count = this.count + 1;
    this.repaintCounter();
  };
  decrease = () => {
    console.log(this);
    this.count = this.count - 1;
    this.repaintCounter();
  };
  repaintCounter() {
    this.counter.innerText = this.count;
  }
}

new Counter({
  counterId: "count",
  plusId: "add",
  minusId: "minus"
});

new Counter({
  counterId: "count2",
  plusId: "add2",
  minusId: "minus2",
  inintialNumber: 111
});

 

 

[11] Symbol, Set and Map

[11] Symbol, Set and Map
// 0)
const set = new Set([]);
const weakSet = new weakSet({});
const map = new Map();

// 1) Symbol
const superBig = {
  [Symbol("nico")]: {
    age: 12
  },
  [Symbol("nico")]: {
    age: 12
  },
  hello: "bye"
};

superBig[nico].handsome = false;

// 2) Sets
const sexySet = new Set([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 8]);
console.log(sexySet.has(1));
console.log(sexySet.delete(2));
console.log(sexySet);
sexySet.clear();
console.log(sexySet);
sexySet.add("Hi");
console.log(sexySet);
console.log(sexySet.keys());

// 3) WeakSet
const weakSet = new WeakSet();
const sexy = {
  im: true
};
weakSet.add(sexy);

 

 

[12] Generators and Maps

// 1) Generators
function* listPeople() {
  yield "Dal";
  yield "Flynn";
  yield "Mark";
  yield "God";
  yield "Japan Guy";
}
const listG = listPeople();
console.log(listG);
console.log(listG.next());

const friends = ["Dal", "Flynn", "Mark"];
function* friendTeller() {
  for (const friend of friends) {
    yield friend;
  }
}
const friendLooper = friendTeller();
console.log(friendLooper.next());

//2) Proxy
const userObj = {
  username: "nico",
  age: 12,
  password: 1234
};
const userFilter = {
  get: (target, prop, receiver) => {
    return prop === "password" ? `${"*".repeat(5)}` : target[prop];
  },
  set: () => {
    // console.log("Somebody wrote something");
    return "";
  },
  deleteProperty: (target, prop) => {
    if (prop === "password") {
      return;
    } else {
      delete target[prop];
      // target[prop] = "DELETE";
    }
  }
};
const filteredUser = new Proxy(userObj, userFilter);
filteredUser.password;