[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;
'잡부생활 > 프로그래밍' 카테고리의 다른 글
CSS flex, grid 정리 (0) | 2019.11.15 |
---|---|
Babel 6/7 (0) | 2019.07.22 |
Node Callback / Promise / async&await (0) | 2019.04.10 |