๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 15 ~ 21, 2021
ํ์ฌ ์ํ
์ค๊ธ๋ ๋ฌด์ฌํ! ์ ๋ถํ๋๋ฆฝ๋๋ค!
ํ ๋ฒ ๋ ๋ ธ๋ค๊ฐ ๋ค์ ์ ๋ ๊ฒ์ธ ๋งํผ ๋ด ๋จธ๋ฆฌ์ ๋ ์ ๋ค์ด์๊ธฐ ๋ฐ๋๋ค.
์์๊ฐ์, ์ฌ์ฐ๊ฐ์ ์ ๋
์
์ค๊ธ์ ๋ค๋ก ๊ฐ ์๋ก ์ด๋ ต๋ค. ํนํ 11๊ฐ๋ถํฐ ์์ํ๊ณ ์ด๋ ค์ ๋ค.
๋ฐ๋ณตํด์ ๋ด์ผ ํ๋ค. ๋ค๋ฅธ ์ฌ๋ ๊ฐ์๋ ๋ณด์!
var
let
const
scope ๋ด๋ถ ์ด๋์๋ ๋ณ์ ์ ์ธ์ด ์ต์์์ ์ ์ธ๋ ๊ฒ์ฒ๋ผ ํ๋ํ๋ค.
๋ฌธ์ ๋ var
, let
, const
์ scope๊ฐ ๋ค๋ฅด๋ค๋ ์ ์ด๋ค.
์ด ์์ญ์ ์ ์ธ๋ ๋ณ์๋ ์ฌ์ฉํ ์ ์๋ค.
ํ ๋นํ๊ธฐ ์ ์ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ code๊ฐ ์์ธก์ด ๊ฐ๋ฅํ๋ฉฐ, ์ ์ฌ์ ์ธ bug๋ฅผ ์ค์ผ ์ ์์ผ๋ฏ๋ก let
๊ณผ const
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
ํจ์๋ช
์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ๋ง๋ ๋ค.
new
์ฐ์ฐ์๋ก ํธ์ถํ๋ค.
์์ฑ์ ํจ์๋ ๋ถ์ด๋นต ํ๊ณผ ๊ฐ์ผ๋ ํ์ํ ์ฌ๋ฃ๋ฅผ ๊ฐ์ง๊ณ ์ฐ์ด๋ด๊ธฐ๋ง ํ๋ฉด ๋๋ค.
์์ฑ์ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ผ์ผ์ด ๊ฐ์ฒด literal์ ๋ง๋ค์ง ์๊ณ ๊ฐ์ฒด๋ฅผ ๋ง๋ค ์ ์๋ค.
function User(name, age){
// this = {} : new ํจ์๋ช
();์ด ์คํ๋๋ฉด ์๋๋๋ code
this.name = name;
this.age = age;
// return this; : new ํจ์๋ช
();์ด ์คํ๋๋ฉด ์๋๋๋ code
}
new ํจ์๋ช
();
function User(name, age){
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name); // ์ฌ๊ธฐ์์ this๋ vip๋ฅผ ๊ฐ๋ฆฌํด
}
}
let vip = new User("Mai", 40);
vip.sayName(); // "Mai"
function Item(title, price) {
// this = {}
this.title = title;
this.price = price;
this.showPrice = function () {
console.log(`๊ฐ๊ฒฉ์ ${price}์์
๋๋ค :)`);
};
// return this;
};
const item1 = new Item("๊ณต์ฑ
", 3000);
const item2 = new Item("์ฐ์ฐ", 5000);
const item3 = new Item("๊ฐ๋ฐฉ", 7000);
console.log(item1, item2, item3);
// โฌ๏ธ Output
// Item {title: "๊ณต์ฑ
", price: 3000, showPrice: ๐}
// Item {title: "์ฐ์ฐ", price: 5000, showPrice: ๐}
// Item {title: "๊ฐ๋ฐฉ", price: 7000, showPrice: ๐}
item3.showPrice(); // "๊ฐ๊ฒฉ์ 7000์์
๋๋ค :)"
Object.assign(A, B)
// ๐ต
// (1)
const user = {
name : "Mai",
age : 30
}
const user2 = Object.assign({}, user); // user ๊ฐ์ฒด๊ฐ user2์ ์ด๋ฆ์ผ๋ก ๋ณต์ ๋จ
Object.assign({ gender : "female" }, user); // : user ๊ฐ์ฒด์ gender๋ผ๋ property๊ฐ ์๊น
// (2)
Object.assign({ name : "May", user }, user); // user ๊ฐ์ฒด์ name property๊ฐ ๋ฎ์ด์ฐ๊ธฐ ํจ (name : "Mai")
// (3)
Object.assign(user, info1, info2); // info1์ด ๋จผ์ user์ ๋ณํฉํ๊ณ , ์ด๊ฒ์ด info2์ ๋ณํฉ๋จ
Object.keys()
: ๊ฐ์ฒด์ key๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํObject.values()
: ๊ฐ์ฒด์ ๊ฐ์ ๋ฐฐ์ด๋ก ๋ฐํObject.entries()
: ๊ฐ์ฒด์ key์ ๊ฐ์ ๋ชจ๋ ๋ฐฐ์ด๋ก ๋ฐํObject.fromEntries()
: key์ ๊ฐ์ด ๋ฐฐ์ด๋ก ๋ฌถ์ธ ๋ฐฐ์ด์ ๊ฐ์ฒด๋ก ๋ฐํ// ๐ต ์ด๋ค ๊ฒ key๊ฐ ๋ ์ง ๋ชจ๋ฅด๋ ์ํฉ์์ ๊ฐ์ฒด ๋ง๋ค ๋ ์ ์ฉํ code
function makeObj(key, val) {
return {
[key]: val,
};
}
const obj = makeObj('๋์ด', 33);
console.log(obj); // { '๋์ด': 33 }
property์ ์ฐ์ฐ๋ ๊ฐ์ด ์ฌ์ฉ๋ ์ ์๋ค.
let a = "age"
const user = {
name : "Mike",
[a] : 30 // age : 30
}
const user = {
[4 + 7]: 'sum',
['Hi, ' + 'this is me']: 'Hello',
};
console.log(user); // { '11': 'sum', 'Hi, this is me': 'Hello' }
key๋ฅผ ์ซ์๋ boolean์ผ๋ก ์ ์ ์ ์์ผ๋, ๊ฒฐ๊ตญ ๋ฌธ์ํ์ผ๋ก ๋ฐํ๋๋ค.
๊ทธ๋์ ๋ฌธ์๋ก ํ์ฉํ๋ฉด ๋๋ค.
์ด ์ธ์ key๋ก Symbol()
์ ์ธ ์๋ ์๋ค.
Symbol()
Symbol()
์ ์ ์ผํ ์๋ณ์๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํจ// ๐ต
const a = Symbol();
const b = Symbol();
a === b; // false
a == b; // false
// ๐ต symbol์ ์ด๋ฆ์ด ๊ถ๊ธํ๋ฉด description ์ฌ์ฉ
const id = symbol("id์
๋๋ค.");
id.description; // "id์
๋๋ค."
Symbol.for()
: ์ ์ญ symbolSymbol()
์ ๋งค๋ฒ ๋ค๋ฅธ Symbol()
์ ์์ฑํ์ง๋ง, Symbol.for()
๋ ํ๋๋ฅผ ์์ฑํ ๋ค key๋ฅผ ํตํด ๊ฐ์ symbol์ ๊ณต์ ํจ// ๐ต
const id1 = Symbol.for("id");
const id2 = Symbol.for("id");
id1 === id2; /// true
// ๐ต symbol์ ์ด๋ฆ์ด ๊ถ๊ธํ๋ฉด keyfor ์ฌ์ฉ
Symbol.keyFor("id1") // "id"
// ๐ต ๋ฉ๋ฆฌ ๋จ์ด์ ธ์๋ ๊ฐ์ฒด์ showName์ด๋ผ๋ method๊ฐ ์๋์ง ๊ณ ๋ฏผํ์ง ์์๋ ๋๊ณ , ๋ค๋ฅธ ์ฌ๋์ด ๋ง๋ property๋ฅผ ๋ฎ์ด์ฐ๊ธฐํ ๊ฑฑ์ ๋ ํ ํ์ ์์ด ์์
ํ ์ ์๋ code
// ๋ค๋ฅธ ๊ฐ๋ฐ์๊ฐ ๋ง๋ค์ด ๋์ ๊ฐ์ฒด
const user = {
name: 'Mai',
age: 30,
};
// ๋ด ์์
// user.showName = function () {}; ์ด๋ ๊ฒ ํ์ง ๋ง๊ณ
const showName = Symbol('show name');
user[showName] = function () {
console.log(this.name);
};
// ์ฌ์ฉ์๊ฐ ์ ์ํ๋ฉด ๋ณด๋ message
for (let key in user) {
console.log(`Her ${key} is ${user[key]}.`);
}
// โฌ๏ธ Output
// "Her name is Mai."
// "Her age is 30."
// ๋ด๊ฐ ๊ถ๊ธํดํ๋ showName๋ ์ ์ด๋ณด๋ฉด
user[showName](); // "Mai"
toString()
()
์์ ์๋ฌด๊ฒ๋ ์ฐ์ง ์์ผ๋ฉด ์ซ์๋ฅผ ๋ฌธ์๋ก ๋ฐ๊พธ์ด ์ค()
์์ 2๋ฅผ ์ฐ๋ฉด 2์ง๋ฒ์ผ๋ก, 8์ ์ฐ๋ฉด 8์ง๋ฒ์ผ๋ก, 16์ ์ฐ๋ฉด 16์ง๋ฒ์ผ๋ก ๋ฐ๊พธ์ด ์คMath.PI
: 3.141592653589793Math.ceil()
: ์ฌ๋ฆผMath.floor()
: ๋ด๋ฆผMath.round()
: ๋ฐ์ฌ๋ฆผ// ๐ต ์๋์ ์ซ์๋ฅผ ์์์ ๋์งธ ์๋ฆฌ๊น์ง ํํํ๊ธฐ (์
์งธ ์๋ฆฌ์์ ๋ฐ์ฌ๋ฆผ)
let userRate = 30.1234;
// (1) 100 ๊ณฑํ ๊ฐ์ Math.round method๋ฅผ ์ฐ๊ณ ๋ค์ 100์ผ๋ก ๋๋๊ธฐ
Math.round(userRate * 100) / 100 // 30.12
// (2) toFixed() ์ฌ์ฉ
userRate.toFixed(2); // "30.12"
Number(userRate.toFixed(2)) // 30.12
toFixed()
: ()
์์ ์ด ์ซ์๊น์ง ํํ (๋จ, ๋ฌธ์๋ก ๋ฐํํ๋ฏ๋ก ์ฃผ์)let userRate = 30.1234;
userRate.toFixed(0); // "30"
userRate.toFixed(6); // "30.123400"
isNaN()
: ์ซ์์ธ์ง ์๋์ง ํ๋จํ ๋ ์ฌ์ฉํจ (๊ทธ๋ฅ NaN์ด ์๋๋ผ isNaN()
์ผ๋ก ์ฌ์ฉํด์ผ ํจ)x == NaN // false
x === NaN // false
NaN == NaN // false
isNaN(x) // true
isNan(3) // false
parseInt()
Number()
์ ๋์ผํ๋ parseInt()
๋ ๋ฌธ์๋ ์ผ๋ถ ์ฒ๋ฆฌํจ (Number()
์ ๋ฌธ์๋ฅผ ๋ฃ์ผ๋ฉด 'NaN'์) (๋จ, parseInt()
๋ ์ซ์๋ก ์์ํ์ง ์์ผ๋ฉด 'NaN'์ ๋ฐํํจ)let margin = "10px";
parseInt(margin); // 10
Number(margin); // NaN
let redColor = "f3";
parseInt(redColor); // NaN
parseInt(redColor, 16); // 243
parseInt(11, 2) // 3
parseFloat()
: parseInt()
์ ๊ฑฐ์ ๋์ผํ์ง๋ง ๋ถ๋ ์์์ ์๋ฆฌ๋ ๋ฐํํจlet padding = "18.5%";
parseInt(padding); // 18
parseFloat(padding); // 18.5
Math.random()
: 0 ~ 1 ๋ฌด์์ ์ซ์ ์์ฑ// ๐ต 1 ~ 100 ์ค ์์์ ์ซ์ ๋ฝ๊ธฐ
Math.floor(Math.random() * 100) + 1
// ๐ต ๋ฌด์์ ์ ๋ฝ๊ธฐ
// ๊ทธ ์์ 100 ๊ณฑํ๊ธฐ (1 ~ 50 ์ค ์์์ ์ซ์๋ฅผ ๋ฝ๊ณ ์ถ๋ค๋ฉด 50 ๊ณฑํ๊ธฐ)
// Math.floor๋ก ์์์ ์์ ๊ธฐ
// ์ด๋ 0์ด ๋์ฌ ์ ์์ผ๋ฏ๋ก 1 ๋ํ๊ธฐ
๐งโ ๊ทธ๋ผ Math.ceil()
์ ์จ์ ๋์ '+1'์ด ์๋ '-1'์ ํด ์ค๋ ๋๋ ๊ฑฐ๊ฒ ์ง? ๐ง
Math.max()
: ์ต๋๊ฐMath.min()
: ์ต์๊ฐMath.abs()
: ์ ๋๊ฐMath.pow(n, m)
: ๊ฑฐ๋ญ์ ๊ณฑ// ๐ต 2โด ๊ตฌํ๊ธฐ
Math.pow(2, 4); // 16
Math.sqrt(n, m)
: ์ ๊ณฑ๊ทผ// ๐ต โ16 ๊ตฌํ๊ธฐ
Math.sqrt(16); // 4
1) ๋ฐ์ดํ
HTML์ class๋ช
๋ฑ ํฐ๋ฐ์ดํ๋ก ๊ฐ์ธ์ ธ์๋ ๋ด์ฉ์ด ์์ผ๋ฏ๋ก ์์๋ฐ์ดํ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ํธํ๋ค.
์์ด๋ก ๋ ๋ฌธ์ฅ์ apostrophe๊ฐ ์์ผ๋ฏ๋ก ํฐ ๋ฐ์ดํ๋ก ๊ฐ์ธ๋ ๊ฒ ํธํ๋ค.
2) backtick
backtick ์ฌ๋ฌ ์ค์ ์ธ ์ ์์ง๋ง ๋ฐ์ดํ๋ ํ ์ค๋ก๋ง ์จ์ผ ํ๋ค. (\n
์ฌ์ฉ)
3) methods
length
let hi = "์๋
ํ์ธ์.";
hi.length // 6
hi[2] // "ํ"
toUpperCase()
: alphabet์ ๋ชจ๋ ๋๋ฌธ์๋ก ๋ณ๊ฒฝํจtoLowerCase()
: alphabet์ ๋ชจ๋ ์๋ฌธ์๋ก ๋ณ๊ฒฝํจstr.indexOf(text)
if
๋ฌธ ์ธ ๋ ์ฃผ์)let hi = "Hi, guys. Nice to meet you.";
if (hi.indexOf("Hi")) {
console.log("์ ๊ฒฐ๊ณผ๊ฐ 0์ด๊ณ , 0์ if๋ฌธ์์ false์ด๊ธฐ ๋๋ฌธ์ ์ด ๋ฌธ์ฅ์ด ์ฐํ์ง ์์");
}
// โ
if (hi.indexOf("Hi")) > -1 {
console.log("์ ๊ฒฐ๊ณผ๊ฐ true์ฌ์ ์ด ๋ฌธ์ฅ์ ๋ณผ ์ ์์");
}
str.slice(n, m)
let desc = "abcdefg";
desc.slice(2) // "cdefg"
desc.slice(0, 5) // "abcde"
desc.slice(2, -2) // "cde"
str.substring(n, m)
str.slice(n, m)
๊ณผ ๋น์ทํ์ง๋ง n๊ณผ m์ ๋ฐ๊ฟ๋ ๋์ํจstr.substr(n, m)
: n๋ถํฐ ์์ํด m๊ฐ๋ฅผ ๋ฐํํ๋ฉฐ m ๋ฒ์งธ๋ฅผ ํฌํจํ์ง๋ ์๊ณ ๊ทธ ์ ๊น์ง ์
)str.trim()
str.repeat(n)
: ๋ฌธ์์ด์ n๋ฒ ๋ฐ๋ณตํจstr.slice(n, m)
str.includes()
: ์์์ ์๊ด ์์ด ๊ดํธ ์์ ๋ฌธ์๊ฐ ํฌํจ๋์ด ์๋์ง ํ์ธ4) ๋ฌธ์์ด ๋น๊ต
ASCII ํ๋๋ก ๋น๊ตํ ์ ์๋ค.
a < z, ์๋ฌธ์ < ๋๋ฌธ์
"a" < "c" // true
"a".codePointAt(0); // 97
String.fromCodePoint(97) // "a"
๋ฌธ์์ด์ ์ธ ์ ์๋ methods๋ฅผ ์ด์ฉํด ํ์ด๋ณด๊ธฐ
// ๐ต list์์ ์ซ์๋ฅผ ์ ์ธํ๊ณ ๋ฌธ์๋ง newList์ ๋ฐํํ๊ธฐ
let list = [
"01. ๋ค์ด๊ฐ๋ฉฐ",
"02. JS์ ์ญ์ฌ",
"03. ์๋ฃํ",
"04. ํจ์",
"05. ๋ฐฐ์ด"
];
let newList = [];
for (let i = 0 ; i < list.length ; i++) {
newList.push(list[i].slice(4));
}
console.log(newList); // ["๋ค์ด๊ฐ๋ฉฐ","JS์ ์ญ์ฌ","์๋ฃํ","ํจ์","๋ฐฐ์ด"]
// ๐ต hasCola์ ๋งค๊ฐ ๋ณ์์ ๊ธ์น์ด์ธ '์ฝ๋ผ'๊ฐ ํฌํจ๋์ด ์๋์ง ํ์ธํ๊ธฐ
// (1)
function hasCola(str) {
if (str.indexOf("์ฝ๋ผ")) {
console.log("๊ธ์น์ด ์์");
} else {
console.log("ํต๊ณผ");
}
}
hasCola("์ฌ์ด๋ค๊ฐ ์งฑ์ด์ง"); // if๋ฌธ์์ -1์ true์ด๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ณผ๊ฐ "๊ธ์น์ด ์์"
hasCola("์ฌ์ด๋ค ์ง์ง ์ฝ๋ผ ์งฑ"); //
hasCola("์ฝ๋ผ"); // if๋ฌธ์์ 0์ false์ด๊ธฐ ๋๋ฌธ์ if์ ๋ชป ๋ค์ด๊ฐ๊ณ else๋ก ๋๊ฐ์ ธ์ "ํต๊ณผ"
// โ ๋ฐ๊ฟ์ฃผ๋ฉด
// (2)
function hasCola(str) {
if (str.indexOf("์ฝ๋ผ") > -1) {
console.log("๊ธ์น์ด ์์");
} else {
console.log("ํต๊ณผ");
}
}
hasCola("์ฌ์ด๋ค๊ฐ ์งฑ์ด์ง"); // "ํต๊ณผ"
hasCola("์ฌ์ด๋ค ์ง์ง ์ฝ๋ผ ์งฑ"); // "ํต๊ณผ"
hasCola("์ฝ๋ผ"); // "๊ธ์น์ด ์์"
// (3)
function hasCola(str) {
if (str.includes("์ฝ๋ผ")) {
console.log("๊ธ์น์ด ์์")
} else {
console.log("ํต๊ณผ");
}
}
hasCola("์ฌ์ด๋ค๊ฐ ์งฑ์ด์ง"); // "ํต๊ณผ"
hasCola("์ฌ์ด๋ค ์ง์ง ์ฝ๋ผ ์งฑ"); // "๊ธ์น์ด ์์"
hasCola("์ฝ๋ผ"); // "๊ธ์น์ด ์์"
1) ๋ณต์ต
push()
๋ค์ ์ฝ์
, pop()
๋ค๋ฅผ ์ญ์ , unshift()
์์ ์ญ์ , shift()
์์ ์ญ์ 2) ๊ทธ ์ธ methods
arr.splice(n, m)
: n ~ m์ ์์๋ฅผ ์ง์ (m ๋ฒ์งธ๋ฅผ ํฌํจํ์ง๋ ์์ (๊ทธ ์ ๊น์ง ์
))arr.splice(n, m, x)
: n ~ m์ ์์๋ฅผ ์ง์ฐ๊ณ x๋ฅผ ์ถ๊ฐํจ// ๐ต
// (1)
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200); // index 1๋ถํฐ 3๊น์ง๋ ์ง์ฐ๊ณ ๊ทธ ์๋ฆฌ์ 100๊ณผ 200์ ์ฝ์
console.log(arr); // [1, 100, 200, 5]
// (2) ๋ ๋ฒ์งธ ์ธ์์ 0์ ๋ฃ์ผ๋ฉด ์๋ฌด๊ฒ๋ ์ญ์ ๋์ง ์๊ณ ์ถ๊ฐ๋๊ธฐ๋ง ํจ
let arr = ["๋๋", "์ด๊ตญ์ข
", "์
๋๋ค."];
arr.splice(1, 0, "๋ํ๋ฏผ๊ตญ", "์์ฌ");
console.log(arr); // ["๋๋","๋ํ๋ฏผ๊ตญ","์์ฌ","์ด๊ตญ์ข
","์
๋๋ค."]
arr.splice()
: ์ญ์ ๋ ์์๋ฅผ ๋ฐํํจlet arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);
console.log(arr); // [1, 4, 5]
console.log(result); // [2, 3]
arr.slice(n, m)
let arr = [1, 2, 3, 4, 5];
arr.slice(1, 4); // 2, 3, 4
arr.concat(arr2, arr3 ...)
: ์ธ์๋ก ์ฃผ์ด์ง ๋ฐฐ์ด์ด๋ ๊ฐ์ ํฉ์ณ์ ์ ๋ฐฐ์ด๋ก ๋ฐํํจlet arr = [1, 2];
arr.contact([3, 4]); // [1, 2, 3, 4]
arr.contact([3, 4], [5, 6]); // [1, 2, 3, 4, 5, 6]
arr.contact([3, 4], 5, 6); // [1, 2, 3, 4, 5, 6]
arr.forEach(๐)
for
๋ฌธ์ด๋ for ... of
๋ฌธ ์ธ์ forEach
๋ก๋ ๋ฐ๋ณตํ ์ ์์let arr = ["Ian", "Mai", "H & C"];
arr.forEach((name, index) => { // index๋ ์๋ตํด๋ ๋จ
console.log(`${index + 1}. ${name}`);
});
arr.indexOf
let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3) // 7
arr.lastIndexOf(3) // 7
arr.lastIndexOf()
: ๋ง์ง๋ง์ผ๋ก ๋ฐ๊ฒฌํ ๋ฌธ์์ด์ index๋ฅผ ๋ฐํํจ (์์ผ๋ฉด '-1'์ ๋ฐํํจ)arr.includes()
: index ์์ด ํฌํจํ๋์ง๋ง ํ์ธํ๊ณ ์ถ์ ๋ ์ฌ์ฉ (true or false)arr.find(๐)
let arr = [1, 2, 3, 4, 5, 6];
const result = arr.find((item) => {
return item % 2 === 0;
});
console.log(result); // 2 (4์ 6์ ๋ฐํํ์ง ์์)
// ๐ต ๋ฏธ์ฑ๋
์์ธ user ๋ฐํํ๊ธฐ
let userList = [
{ name : "Mai", age: 37 },
{ name : "Ian", age: 38 },
{ name : "H & C", age: 7 }
];
const result = userList.find((user) => {
if (user.age < 19) {
return true;
}
return false;
});
console.log(result); // {"name": "H & C", "age": 7}
arr.findIndex(๐)
// ๐ต ๋ฏธ์ฑ๋
์์ธ user์ index ๋ฐํํ๊ธฐ
let userList = [
{ name : "Mai", age: 37 },
{ name : "Ian", age: 38 },
{ name : "H & C", age: 7 }
];
const result = userList.findIndex((user) => {
if (user.age < 19) {
return true;
}
return false;
});
console.log(result); // 2
arr.filter(๐)
arr.find(๐)
์ ๋์ผํจconst arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item) => {
return item % 2 === 0;
});
console.log(result); // [2, 4, 6]
๐งโ find
๋ ์ซ์๋ก ๋ฐํ๋๋๋ filter
๋ ๋ฐฐ์ด๋ก ๋ฐํ๋๋ค...? ๊ฐ์ array methods์ธ๋ฐ... 2์ [2]๋ ๊ฐ์ง ์์๋ฐ... ํท๊ฐ๋ฆฌ๊ฒ! ์ด๋ ๊ฒ ์ ํ ์ด์ ๊ฐ ์์ ํ
๋ฐ ๊ทธ๊ฒ ๋ญ์ง ๋ชจ๋ฅด๊ฒ ๋คใ
ใ
๐ง
arr.reverse()
: ์ญ์์ผ๋ก ์ฌ์ ๋ ฌํจ (์ต๊ทผ์ ๊ฐ์
ํ user ์์ผ๋ก ์ ๋ ฌํ ๋, ์ต๊ทผ์ ์์ฑ๋ ๊ธ ์์ผ๋ก ์ ๋ ฌํ ๋ ์์ฃผ ์ฐ์)arr.map(๐)
: ํจ์๋ฅผ ๋ฐ์ ํน์ ๊ธฐ๋ฅ์ ์ํํ๊ณ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํจlet userList = [
{ name : "Mai", age: 37 },
{ name : "Ian", age: 38 },
{ name : "H & C", age: 7 }
];
let newUserList = userList.map((user, index) => {
return Object.assign({}, user, {
id : index + 1,
isAdult : user.age > 19,
});
});
console.log(newUserList);
arr.join()
let arr = ["์๋
", "๋๋", "๋ฉ์ดํธ์ผ"];
let result = arr.join("โค๏ธ");
console.log(result); // "์๋
โค๏ธ๋๋โค๏ธ๋ฉ์ดํธ์ผ"
arr.split()
: ๋ฌธ์์ด์ ๋๋ ์ ๋ฐฐ์ด๋ก ๋ง๋ค์ด์ค// (1)
const users = "Mai, Ian, H & C";
const result = users.split(",");
console.log(result); // ["Mai"," Ian"," H & C"]
// (2)
let str = "Hello, this is KARI.";
const result = str.split("");
console.log(result); // ["H","e","l","l","o",","," ","t","h","i","s"," ","i","s"," ","K","A","R","I","."]
Array.isArray()
typeof
๋ฅผ ์ ์ฉํ๋ฉด ๋ชจ๋let me = {
name : "Mai",
age : 31
};
let us = ["Mai", "Ian", "H & C"];
console.log(typeof me); // "object"
console.log(typeof us); // "object"
console.log(Array.isArray(me)); // false
console.log(Array.isArray(us)); // true
arr.sort(๐)
// ๐ต '27, 8, 5, 13'์ ์ค๋ฆ์ฐจ์์ผ๋ก ์ ๋ ฌํ๊ธฐ
let arr = [27, 8 , 5, 13];
arr.sort();
console.log(arr); // [13, 27, 5, 8] : ์์๋ฆฌ๊ฐ 1, 2์ฌ์ 13๊ณผ 27์ด ์์ ์ด
// โ
// (1) ํจ์๋ฅผ arr ์ธ๋ถ์ ์์ฑ
let arr [27, 8, 5, 13];
function fn(a, b) {
return a-b; // 'a-b'๊ฐ ์์๋ฉด a๊ฐ b ๋ค์, 0์ด๋ฉด ๊ทธ๋๋ก, ์์๋ฉด a๊ฐ b ์์ ์ค๋๋ก ์ ๋ ฌํ๊ธฐ ์ํด ํ์ํ ํจ์
}
arr.sort(fn);
console.log(arr); // [5, 8, 13, 27]
// (2) ํจ์๋ฅผ arr ๋ด๋ถ์ ์์ฑ
let arr [27, 8, 5, 13];
arr.sort((a-b) => {
// ์ฌ๊ธฐ์ 'console.log'๋ฅผ ์ฐ์ด๋ณด๋ฉด ๋ฐฐ์ด์ ์์๋ค์ด ๋ ์์ฉ ๋ฌถ์ฌ ์์ (์ ์ซ์๊ฐ a, ๋ค ์ซ์๊ฐ b)
return a-b;
});
console.log // [5, 8, 13, 27]
// (3) Lodash ํ์ฉ
// '<script src="lodash.js"></script>' ์์ฑํ๊ณ ์จ์ผ ํจ
let arr = [27, 8 , 5, 13];
_.sortBy(arr);
console.log(arr);// [5, 8, 13, 27]
arr.map(๐)
์ด๋ arr.filter(๐)
๋์ ์จ์ ๋ฐฐ์ด์ ๋ฐํํ ์ ์์// ๐ต ๋ฐฐ์ด์ ๋ชจ๋ ์ ํฉ์น๊ธฐ
let arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, crr) => {
return prev + crr;
}, 0); // ์ฌ๊ธฐ์์ '0'์ ์ด๊ธฐ๊ฐ์ธ๋ฐ, ์ํ๋ ๊ฒ์๋ก ๋ฐ๊พธ์ด๋ ๋จ e.g. 100, [] ๋ฑ
console.log(result); // 15
// ๐ต ์ฑ์ธ์ ์ด๋ฆ๋ง ๋์ถํ๊ธฐ
let userList = [
{ name : "Ian", age: 45 },
{ name : "Mai", age: 44 },
{ name : "H", age: 18 },
{ name : "C", age: 16 }
];
let result = userList.reduce((prev, cur) => {
if (cur.age > 18) {
prev.push(cur.name);
}
return prev;
}, []);
console.log(result); // ["Ian","Mai"]
// ๐ต ์ฌ์ฉ์์ ๋์ด์ ํฉ ๊ตฌํ๊ธฐ
let userList = [
{ name : "Ian", age: 45 },
{ name : "Mai", age: 44 },
{ name : "H", age: 18 },
{ name : "C", age: 16 }
];
let result = userList.reduce((prev, cur) => {
return (prev += cur.age);
}, 0);
console.log(result); // 123
// ๐ต ์ด๋ฆ์ ๊ธธ์ด๊ฐ ์ธ ๊ธ์์ธ ์ฌ๋ ๊ตฌํ๊ธฐ
let userList = [
{ name : "Ian", age: 45 },
{ name : "Mai", age: 44 },
{ name : "H", age: 18 },
{ name : "C", age: 16 }
];
let result = userList.reduce((prev, cur) => {
if (cur.name.length === 3) {
prev.push(cur.name);
} return prev;
}, []);
console.log(result); // ["Ian","Mai"]
cf. arr.reduceRight()
๋ arr.reduce
์ ๋น์ทํ๋ ๋ฐฐ์ด์ ๋์์๋ถํฐ ์์๋จ
let str = "Ian - Mai - H - C";
let [user1, user2, user3, user4] = str.split(" - ");
console.log(user1); // "Ian"
console.log(user2); // "Mai"
console.log(user3); // "H"
console.log(user4); // "C"
let [a, b, c] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
// โ
let [a=3, b=4, c=5] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 5
let [user1, , user2, user3, user4] = ["Ian", "Krystal", "Mai", "H", "C"];
console.log(user1); // "Ian"
console.log(user2); // "Mai"
console.log(user3); // "H"
console.log(user4); // "C"
let user = {name: "Mai", age: 30};
let {name, age} = user; // 'let {age, name} = user;'๋ผ๊ณ ์์๋ฅผ ๋ฐ๊ฟ๋ 'let name = user.name, let age = user.age'์ธ ๊ฒ์ ๋ณํจ ์์
console.log(name); // "Mai"
console.log(age); // 30
let user = {name: "Mai", age: 30};
let {name:userName, age:userAge} = user;
console.log(userName); // "Mai"
console.log(userAge); // 30
let user = {name: "Mai", age: 30};
let {name, age, gender} = user;
console.log(name); // "Mai"
console.log(age); // 30
console.log(gender); // undefined
// โ
let user = {name: "Mai", age: 30};
let {name, age, gender = "gender"} = user;
console.log(name); // "Mai"
console.log(age); // 30
console.log(gender); // "gender"
function showName(...names){
console.log(names);
}
showName(); // []
showName("Ian"); // ["Ian"]
showName("Ian, Mai"); // ["Ian", "Mai"]
// ๐ต ์ ๋ฌ ๋ฐ์ ์ ๋ชจ๋ ๋ํ๊ธฐ (1)
function add(...numbers) {
let result = 0; // ์ด๊ธฐ ๊ฐ์ 0
numbers.forEach((num) => (result += num));
console.log(result);
}
add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55
// ๐ต ์ ๋ฌ ๋ฐ์ ์ ๋ชจ๋ ๋ํ๊ธฐ (2)
function add(...numbers) {
let result = numbers.reduce((prev, cur) => prev + cur);
console.log(result);
}
add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55
// ๐ต user ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด ์ฃผ๋ ์์ฑ์ ํจ์ ๋ง๋ค๊ธฐ
function User(name, age, ...skills) {
this.name = name;
this.age = age;
this.skills = skills;
}
const user1 = new User("Ian", 30, "TS", "React");
const user2 = new User("Mai", 29, "Three", "React");
const user3 = new User("H", 16, "English");
const user4 = new User("C", 14, "French");
console.log(user1);
console.log(user2);
console.log(user3);
console.log(user4);
arr.push()
, arr.splice()
, arr.concat9)
์ด๋ฐ method๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฒ๊ฑฐ๋ก์ด๋ฐ ์ ๊ฐ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ๋ฉด ์ฌ์Object.assign
์ธ ํ์ ์์let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2]; // '...arr1' = 1, 2, 3์ด๊ณ '...arr2' = 4, 5, 6
console.log(result); // [1, 2, 3, 4, 5, ,6]
// ๐ต arr1์ [4, 5, 6, 1, 2, 3]์ผ๋ก ๋ง๋ค๊ธฐ
// (1)
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr2.reverse().forEach((num) => {
arr1.unshift(num);
});
console.log(arr1);
// (2)
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1 = [...arr2, ...arr1];
console.log(arr1);
// ๐ต fe์ lang์ skills๋ก ํ์ฌ ๊ฐ์ฒด ๋ง๋ค๊ธฐ
// (1)
let user = { name: "Mai"};
let info = { age: 30 };
let fe = ["Three", "React"];
let lang = ["Korean", "English"];
user = Object.assign({}, user, info, {
skills: [],
});
fe.forEach((item) => {
user.skills.push(item);
});
lang.forEach((item) => {
user.skills.push(item);
});
console.log(user);
// (2)
let user = { name: "Mai"};
let info = { age: 30 };
let fe = ["Three", "React"];
let lang = ["Korean", "English"];
user = {
...user,
...info,
skills : [
...fe, ...lang],
};
console.log(user);
โป ๋ณ์, hoisting, ํจ์ ์ ์ธ๋ฌธ์ ํน์ง์ ๋ํ ์ ํ ํ์ต ํ์
๐งโ ์ค... ์ด๋ ต๋ค.. ๋ค์ ๋ด์ผ๊ฒ ๋ค... ๐ง
function makeCounter() {
let num = 0; // 2๏ธโฃ ๊ทธ ์ซ์๋ ์ธ๋ถ ํจ์์ ๋ณ์์, 5๏ธโฃ '์๋ํ'์ ์ฑ๊ณตํ ๊ฒ (์ค์ง counter๋ฅผ ์ฆ๊ฐ์ํค๊ณ ๋ฐํ๋ฐ์ ์๋ง ์์)
return function () {
return num++;
};
}
let counter = makeCounter(); // 1๏ธโฃ counter์ makeCounter๊ฐ returnํ๋ ํจ์์ธ function () { return num++; };์ ๋ฃ์, ์ด ํจ์๋ ์ซ์๋ฅผ ๋ฐํํ๋๋ฐ 4๏ธโฃ ์ด๋ ๊ฒ counter๊ฐ ์์ฑ๋ ์ดํ์ ๊ณ์ ๊ธฐ์ตํ๊ณ ์๊ธฐ ๋๋ฌธ์ 0, 1, 2, ์ด๋ ๊ฒ ์ฆ๊ฐํ ์ ์๋ ๊ฒ์
console.log(counter()); // 0 3๏ธโฃ ์ด๊ธฐ ๊ฐ์ธ 0 ์ดํ์ 1์ฉ ๋ํด์ง๋ ๊ฑด ๋ด๋ถ ํจ์์์ (return num++) ์ธ๋ถ ํจ์์ธ makeCounter() { let num = 0; ์ฆ ์ธ๋ถ ํจ์์ num์ ์ ๊ทผํ๋ ๊ฒ
console.log(counter()); // 1
console.log(counter()); // 2
setTimeout(๐, time);
// ๐ต ํจ์๋ฅผ 3์ด ํ์ ์คํํ๊ธฐ
function fn() {
console.log(3)
}
setTimeout(fn, 3000); // 3000๋ 3์ด์
// โ ์ด๋ ๊ฒ ์ ์ด๋ ๋จ
setTimeout(function() {
console.log(3)
}, 3000);
// ๐ต ์ธ์ ์ถ๊ฐํ๊ธฐ
function showName(name) {
console.log(name);
}
setTimeout(showName, 3000, "Mai"); // ์์๋๋ก ํจ์, ์๊ฐ, ์ธ์์ด๋ฉฐ ์ด ์ธ์๋ showName ํจ์์ ์ฒซ ๋ฒ์งธ ์ธ์ (name) ๋ก ์ ๋ฌ๋จ
clearTimeout(tId)
: ์์ ๋ ์์
์ ์์ฐ// ๐ต showName ํจ์ ์คํํ์ง ์๊ธฐ
const tId = function showName(name) {
console.log(name);
clearTimeout(tId);
}
setTimeout(showName, 3000, "Mai");
๐งโ mozilla๋ฅผ ๋ณด๋ cancel property๊ฐ์ ๊ณณ์ ์ฌ์ฉํ๋ ๋ฏํจ ๐ง
setInterval
setTimeout
๊ณผ ์ฌ์ฉ ๋ฐฉ๋ฒ ๋์ผclearInterval(tId)
๋ฅผ ์ฌ์ฉํ๋ฉด ๋จ// ๐ต 3์ด๋ง๋ค Mai ๋์ค๊ฒ ํ๊ธฐ
function showName(name) {
console.log(name);
}
const tId = setInterval(showName, 3000, "Mai");
// ๐ต ์ฌ์ฉ์๊ฐ ์ ์ํ ์ง ์ผ๋ง๋ ์ง๋ฌ๋์ง 1์ด์ ํ ๋ฒ์ฉ 5์ด ๋์ ๋ถ๋ฌ์ค๊ธฐ
let num = 0;
function showTime() {
console.log(`์ ์ํ ์ง ${num++}์ด๊ฐ ์ง๋ฌ์ต๋๋ค.`);
if (num > 5) {
clearInterval(tId);
}
}
const tId = setInterval(showTime, 1000);
JS์์๋ ํจ์๋ฅผ ์ด๋์์ ์ด๋ป๊ฒ ํธ์ถํ๋์ง์ ์๊ด ์์ด this
๊ฐ ๋ฌด์์ธ์ง ์ง์ ํ ์ ์๋ค.
call
this
๋ฅผ ํน์ ๊ฐ์ผ๋ก ์ง์ ํ ์ ์์// ๐ต ์ด๋ฆ ๋ถ๋ฌ์ค๊ธฐ
const mai = {
name : "Mai",
};
const ian = {
name : "Ian",
};
function showThisName() {
console.log(this.name);
}
showThisName(); // (๋น ๊ฐ) : ์ฌ๊ธฐ์์ this๋ window๋ฅผ ๊ฐ๋ฆฌํค๋๋ฐ, window.name์ ๋น ๊ฐ์ด๋ผ์ ์๋ฌด๊ฒ๋ ๋จ์ง ์์
showThisName.call(mai) // Mai : ์ด๋, ํจ์๋ฅผ ํธ์ถํ๋ฉด์ call์ ์ฌ์ฉํ๊ณ this๋ก ์ฌ์ฉํ ๊ฐ์ฒด์ธ mai๋ฅผ ์ ๋ฌํ๋ฉด ํด๋น ํจ์๊ฐ ์ฃผ์ด์ง ๊ฐ์ฒด์ method์ธ ๊ฒ์ฒ๋ผ ์ฌ์ฉํ ์ ์์. call์ ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ this๋ก ์ฌ์ฉํ ๊ฐ์ด๊ณ , ๋งค๊ฐ๋ณ์๊ฐ ๋ ์์ผ๋ฉด ๊ทธ ๋งค๊ฐ๋ณ์๋ก ํธ์ถํ๋ ํจ์๋ก ์ ๋ฌ๋จ (this๊ฐ mai๊ฐ ๋ ๊ฒ)
showThisName.call(ian) // Ian : this๊ฐ ian์ด ๋จ
// ๐ต ์ด๋ฆ์ ์ฃผ์์ ์ง์
์ถ๊ฐํ๊ธฐ
const mai = {
name : "Mai",
};
const ian = {
name : "Ian",
};
function update(address, occupation) { // update๋ address์ occupation์ ๋ฐ์์ ๊ฐ์ฒด ์ ๋ณด๋ฅผ ์๋ก์ด date๋ก updateํด์ค
this.address = address;
this.occupation = occupation;
};
update.call(mai, "Swiss", "professor"); // ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ this๋ก ์ฌ์ฉ๋ ๊ฐ, ๋ ๋ฒ์งธ์ ์ธ ๋ฒ์งธ๋ ํจ์๊ฐ ์ฌ์ฉํ ๋งค๊ฐ๋ณ์๋ฅผ ์์๋๋ก ๊ธฐ์ฌํ ๊ฒ
console.log(mai);
update.call(ian, "Italy", "photographer");
console.log(ian);
apply
call
๊ณผ ๋์ผํจcall
์ ์ผ๋ฐ์ ์ธ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์ง๋ง, apply
๋ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐฐ์ด๋ก ๋ฐ์apply
๋ ๋ฐฐ์ด ์์๋ฅผ ํจ์์ ๋งค๊ฐ๋ณ์๋ก ์ฌ์ฉํ ๋ ์ฉ์ดํจ// ๐ต ์์ ๋์ผํ ๊ฐ์ ์ป๋ call์ด ์๋ apply ์ฌ์ฉํ๊ธฐ
const mai = {
name : "Mai",
};
const ian = {
name : "Ian",
};
function update(address, occupation) {
this.address = address;
this.occupation = occupation;
};
update.call(mai, ["Swiss", "professor"]); // ๋ฐฐ์ด๋ก ์ ์ด์ผ ํจ
console.log(mai);
update.call(ian, ["Italy", "photographer"]); // ๋ฐฐ์ด๋ก ์ ์ด์ผ ํจ
console.log(ian);
// ๐ต ๋ค์ ์์ ์ต์๊ฐ๊ณผ ์ต๋๊ฐ ๊ตฌํ๊ธฐ
const nums = [3, 10, 1, 6, 4];
// (1)
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);
// (2)
const minNum = Math.min.call(null, ...nums);
const maxNum = Math.max.call(null, ...nums);
// = Math.max.apply(null, [3, 10, 1, 6, 4])
// (3)
const minNum = Math.min.apply(null, nums);
const maxNum = Math.max.apply(null, nums);
// = Math.max.call(null, 3, 10, 1, 6, 4)
console.log(minNum);
console.log(maxNum);
bind
: ํจ์์ this ๊ฐ์ ์๊ตฌํ ๋ฐ๊ฟ ์ ์์// ๐ต "hello, Mai" ๋์ถํ๊ธฐ
const user = {
name: "Mai",
showName: function () {
console.log(`hello, ${this.name}`);
},
};
// (1)
user.showName(); // "hello, Mai"
let fn = user.showName;
fn(); // ๋ฐ๋ฉด ์ด๋ ๊ฒ ํ๋ฉด "hello, "๋ง ๋์ค๋๋ฐ ๊ทธ ์ด์ ๋ method๋ ์ ์์ ์๋ ๊ฒ this์ธ๋ฐ ์์์ (let fn = ) fn์ ํ ๋นํ ๋ this๋ฅผ ์์ด๋ฒ๋ ธ๊ณ ํธ์ถํ ๋ fn()๋ง ํธ์ถํ๋๊น this๊ฐ ์๋ ๊ฒ
//(2)
fn.call(user); // "hello, Mai"
// (3)
fn.apply(user); // "hello, Mai"
// (4)
let boundFn = fn.bind(user);
boundFn(); // "hello, Mai"
๐งโ ์ ๊ทธ๋ฅ fn.bind(user);
๋ ์ ๋์ง? ๐ง
์ถ์ฒ : ์๋ฐ์คํฌ๋ฆฝํธ ์ค๊ธ ๊ฐ์ข #14 ์์, ํ๋กํ ํ์
(Prototype)
// ๐ต for ... in์ผ๋ก ๊ฐ์ฒด์ property ์ํํ๊ธฐ
const car = {
wheels: 4,
drive() {
console.log("drive..");
},
};
const bmw = {
color: "red",
navigation: 1,
};
bmw.__proto__ = car; // bmw ๋ณ์์๋ ์์ง๋ง car์ ์๋ wheels์ drive ์ ๋ณด๋ bmw๊ฐ ๊ฐ๊ฒ ๋จ
const x5 = {
color: "white",
name: "x5",
};
x5.__proto__ = bmw;
for(p in x5) {
console.log(p);
}
// โฌ๏ธ Output
// "color"
// "name"
// "navigation"
// "wheels"
// "drive"
// ํ์ง๋ง key, value ๋ฑ ๊ฐ์ฒด ๊ด๋ จ method๋ ์์๋ property๋ ์ ๋์ด
Object.keys(x5); // ["color", "name"]
Object.values(x5); // ["white", "x5"]
// ๐ต for ... in์ผ๋ก ๊ฐ์ฒด์ property ์ ๋ฌด ํ์ธํ๊ธฐ
for (p in x5) {
if (x5.hasOwnProperty(p)) {
console.log("o", p);
} else {
console.log("x", p);
}
}
// โฌ๏ธ Output
// "o" "color"
// "o" "name"
// "x" "navigation"
// "x" "wheels"
// "x" "drive"
// ๐ต ๋น์ทํ ๊ฐ์ฒด๋ฅผ ๊ฐ๋จํ๊ฒ ๋ง๋ค ์ ์๋ ์์ฑ์ ํจ์์ ์ฌ์ฉํ๊ธฐ
const car = {
wheels: 4.
drive() {
console.log("drive..");
},
};
const Bmw = function (color) {
this.color = color;
};
const x5 = new Bmw("red");
const z4 = new Bmw("blue");
x5.__proto__ = car;
z4.__proto__ = car;
// โ ๊ฐ์ ๋์์ธ๋ฐ ์ผ์ผ์ด '__proto__' ์ ์จ๋ ๋๊ฒ code ๋ณ๊ฒฝ
const Bmw = function (color) {
this.color = color;
};
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
console.log("drive..");
};
const x5 = new Bmw("red");
const z4 = new Bmw("blue");
instanceof
const Bmw = function (color) {
this.color = color;
};
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function () {
console.log("drive..");
};
const x5 = new Bmw("red");
const z4 = new Bmw("blue");
z4 instanceof Bmw // true
z4.constructor === Bmw // true : ์์ฑ์๋ก ๋ง๋ค์ด์ง instance ๊ฐ์ฒด์๋ constructor๋ผ๋ property๊ฐ ์กด์ฌํจ
// โ ๊ฐ์ ๋์์ธ๋ฐ ํ ๋ฒ์ ์ฐ๋๋ก code๋ฅผ ๋ณ๊ฒฝ...ํ ์ ์์ผ๋ ์ด๋ ๊ฒ ๋ฎ์ด์ฐ๊ธฐ ํ๋ฉด constructor๊ฐ ์ฌ๋ผ์ง. ๊ทธ๋์ ์์ ๊ฐ์ด ์ฐ๋ ์ง, ์๋๋ฉด ๋ฐ๋ก constructor๋ฅผ ์ ์ด์ฃผ์ด์ผ ํจ. ์ฆ JS๋ constructor๋ฅผ ๋ช
ํํ๊ฒ ๋ณด์ฅํ์ง ์์์ ๊ฐ๋ฐ์์ ์ํด ์ธ์ ๋ ์์ ๋ ์ ์์.
Bmw.prototype = {
constructor: Bmw, // ์ถ๊ฐ๋ก ์ ์ ๊ฒ
wheels: 4,
drive() {
console.log("drive..");
},
};
// ๐ต closure๋ฅผ ์ฌ์ฉํด ์ด๊ธฐ์ ์ค์ ํ color ๊ฐ์ ๋ฐ์ ์๋ง ์๊ณ ๋ณ๊ฒฝ์ ๋ชป ํ๊ฒ ํ๊ธฐ
const Bmw = function (color) {
this.color = color;
};
const x5 = new Bmw("red");
// ์ code๋ x5.color = "black" ๋ฑ์ผ๋ก color๋ฅผ ๋ฐ๊ฟ ์ ์์
// โ closure๋ฅผ ์จ์ ๋ณ๊ฒฝํ๋ฉด
const Bmw = function (color) {
const c = color;
this.getColor = function () {
console.log(c);
};
};
const x5 = new Bmw("red"); //getColor ํจ์๊ฐ ์์ฑ๋ ๋น์์ context ๊ธฐ์ตํ๊ณ ์์
class
new
๋ฅผ ์์ฑํ์ง ์์์ ๋ "undefined"์ ๊ทธ์น๋ ๊ฒ ์๋, "TypeError"๊ฐ ๋ฐ์ํจ (error๋ฅผ ์ธ์งํ ์ ์์)for ... in
๋ฌธ์์ ์ ์ธ๋จextends
keyword๋ฅผ ์ฌ์ฉํจ// ๐ต class๋ก car๋ฅผ ๋ง๋ค๊ณ extends๋ก bmw์ ์์ํ๊ธฐ
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
drive() {
console.log("drive..");
}
stop() {
console.log("STOP!");
}
}
class Bmw extends Car {
park() {
console.log("PARK");
}
}
const z4 = new Bmw("blue"); // __proto__์ f park()๊ฐ ์๊ณ , __proto__์ __proto__์ drive์ stop์ด ์์
super
// ๐ต ์์ class์ ์๋ ํจ์๋ ์ฌ์ฉํ๊ณ , ๋ถ๋ชจ class์ ์๋ ํจ์๋ ์ฌ์ฉํ๊ธฐ
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
drive() {
console.log("drive..");
}
stop() {
console.log("STOP!");
}
}
class Bmw extends Car {
park() {
console.log("PARK");
}
stop() {
super.stop(); // ๋ถ๋ชจ class์ธ Car์ stopํจ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ
console.log("OFF");;
}
}
const z4 = new Bmw("blue");
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
drive() {
console.log("drive..");
}
stop() {
console.log("STOP!");
}
}
class Bmw extends Car {
constructor(color) { // ์์ ์์ฑ์๋ ๋ถ๋ชจ ์์ฑ์๋ฅผ ํธ์ถํด์ผ ํ๋ฏ๋ก constructor์ super์ ์ ์ด์ this.property๋ก ํ ๋นํด ์ฃผ์ด์ผ ํจ, constructor์ super์ color๋ฅผ ๋ฐ์ Car์ ๋๊ฒจ์ฃผ์ด์ผ z4์ color ์ ๋ณด๊น์ง ์ ๋์ด
super(color);
}
park() {
console.log("PARK");
}
}
const z4 = new Bmw("blue");
promise
const pr = new Promise((resolve, reject) => { code });
callback ํจ์
: ์ด๋ค ์ผ์ด ์๋ฃ๋ ์ดํ์ ์คํํ๋ ํจ์// ๐ต 3์ด ํ ๊ฒฐ๊ณผ์ ๋ฐ๋ฅธ ํจ์ ๋ณด์ฌ์ฃผ๊ธฐ
const pr = new Promsie ((resolve, reject) => {
setTimeout(() => {
resolve("OK")
}, 3000)
});
pr.then(
function (result) {}, // ์ดํ๋์์ ๋ ์คํ
function (reject) {} // ๊ฑฐ๋ถ๋์์ ๋ ์คํ
finally () {} // ์ดํ์ด๋ ๊ฑฐ๋ถ๋ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋๋ฉด ์คํ
);
// โ ์๋์ ๊ฐ์ด ์ ๋ ๊ฒ ๊ฐ๋
์ฑ์ ์ข๊ณ , ์ฒซ ๋ฒ์งธ ํจ์๋ฅผ ์คํํ๋ค๊ฐ ๋๋ error๋ ์ก๊ธฐ ์ฌ์
const pr = new Promise ((resolve, reject) => {
setTimeout(() => {
resolve("OK")
}, 3000)
});
pr.then(
function (result) {},
).catch(
function (reject) {},
).finally(
function () {
console.log("--- ์ฃผ๋ฌธ ๋ ---") // loading ํ๋ฉด๊ฐ์ ๊ฑธ ์์จ ๋ ์ ์ฉํจ
}
)
// ๐ต 1๋ฒ๋ถํฐ 3๋ฒ๊น์ง ์์๋๋ก ์ ํ ์ฃผ๋ฌธํ๊ธฐ
// (1) callback hell ํ์์ผ๋ก ์์ฑ
const f1 = (callback) => {
setTimeout(function () {
console.log("1๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
callback();
}, 1000);
};
const f2 = (callback) => {
setTimeout(function () {
console.log("2๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
callback();
}, 3000);
};
const f3 = (callback) => {
setTimeout(function () {
console.log("3๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
callback();
}, 2000);
};
console.log("์์");
f1(function () {
f2(function () {
f3(function () {
console.log("๋");
});
});
});
// (2) promise chaining ํ์์ผ๋ก ์์ฑ (์ฝ 6์ด ์ ๋ ๊ฑธ๋ฆผ)
const f1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("2๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("3๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 2000);
});
};
console.log("์์");
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(() => {
console.log("๋");
});
// (3) Promise.all์ ์ฌ์ฉํ์ฌ ์์ฑ (์ธ ์ ํ์ด ๋์์ ์ฃผ๋ฌธ๋๋ฉด ๊ฐ์ฅ ์ค๋ ๊ฑธ๋ฆฌ๋ ์ ํ์ ๋ดค์ ๋ ์ต๋ 3์ด๊ฐ ๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ณผ๊ฐ ๋นจ๋ฆฌ ๋์ถ๋จ)
const f1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("2๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("3๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 2000);
});
};
console.time("x"); // ์๋ console.timeEnd()์ ๊ฐ์ด ์์ ์๊ฐ์ ์ธก์ ํ ์ ์์
Promise.all([f1(), f2(), f3()]) // f1(), f2(), f3()๊ฐ ๋ชจ๋ ์๋ฃ๋์ด์ผ then ๋ถ๋ถ์ด ์คํ๋จ
.then(res => {
console.log(res);
console.timeEnd("x");
});
Promise.all()
Promise.race()
Promise.all()
์ ๋ชจ๋ ์์
์ด ์๋ฃ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง๋ง, Promise.race()
๋ ํ๋๋ผ๋ 1๋ฑ์ผ๋ก ์๋ฃ๋๋ฉด ๋๋// ์ ์์ ์ ์ด์ด์
// (4)
Promise.race([f1(), f2(), f3()]) // f1(), f2(), f3()๊ฐ ๋ชจ๋ ์๋ฃ๋์ด์ผ then ๋ถ๋ถ์ด ์คํ๋จ
.then(res => {
console.log(res);
});
async
๋ away
๋ฅผ ํตํด promise
ํจ์๋ฅผ chain์ผ๋ก ํธ์ถํ๋ ๊ฒ๋ณด๋ค ๊ฐ๋
์ฑ์ด ์ข์์ง๋ค.
async
: function
์์ ๋ถ์ฌ์ฃผ๋ฉด ํญ์ promise
๋ฅผ ๋ฐํํจ// (1)
async function getName () {
return "Mai";
}
console.log(getName()); // Promise { 'Mai' }
getName().then((name) => {
console.log(name); // "Mai"
});
// (2)
async function getName () {
return Promise.resolve("Mai");
}
getName().then((name) => {
console.log(name); // "Mai"
});
// (3)
async function getName () {
throw new Error("err...");
}
getName().catch((err) => {
console.log(err); // Error: 'err...'
});
await
async
ํจ์ ๋ด๋ถ์์๋ง ์ฌ์ฉํ ์ ์์ (๋ค๋ฅธ ๋ฐ์ error ๋ฐ์ํจ)await
ํจ์ ์์ Promise
๊ฐ ์ค๊ณ , ์ด๊ฒ ๋ค ์ฒ๋ฆฌ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆผPromise ... then
๋ณด๋ค await
๋ก ์ฐ๋ ๊ฒ ๊ฐ๋
์ฑ์ด ๋ ์ข์// ๐ต 1์ด ํ์ "Mai"๊ฐ ์ฐํ
function getName(name) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(name);
}, 1000);
});
}
async function showName() {
const result = await getName("Mai");
console.log(result);
}
console.log("์์");
showName();
// ๐ต 1๋ฒ๋ถํฐ 3๋ฒ๊น์ง ์์๋๋ก ์ ํ ์ฃผ๋ฌธํ๊ธฐ
// (5) await, async๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ
const f1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("2๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
// rej(new Error("err..."));
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("3๋ฒ ์ฃผ๋ฌธ ์๋ฃ");
}, 2000);
});
};
console.log("์์");
async function order() {
try { // async await๋ฅผ ์ธ ๋ ์ค๋ฅ๋ฅผ ๋๋นํด ๊ฐ์ธ์ฃผ๋ try ... catch๋ฌธ
const result1 = await f1();
const result2 = await f2(result1);
const result3 = await f3(result2);
console.log(result3);
} catch (e) {
console.log(e); // ์ด ๋ถ๋ถ์์ ์ ์ ํ error๋ฅผ ์ฒ๋ฆฌํด์ฃผ๊ณ ๋์ด๊ฐ๋ฉด ๋จ
}
console.log("์ข
๋ฃ");
}
order();
// Promise.all๊ณผ ํจ๊ป ์ฌ์ฉํ๊ธฐ
// ์ ์์ ์ ์ด์ด์
console.log("์์");
async function order() {
try {
const result = await Promise.all([f1(), f2(), f3()]);
console.log(result);
} catch (e) {
console.log(e);
}
console.log("์ข
๋ฃ");
}
order(); // [ '1๋ฒ ์ฃผ๋ฌธ ์๋ฃ', '2๋ฒ ์ฃผ๋ฌธ ์๋ฃ', '3๋ฒ ์ฃผ๋ฌธ ์๋ฃ' ]
function
๋ฐ๋ก ์์ '*'๋ฅผ ๋ถ์yield
์์ ํจ์์ ์ฌ์ฉ์ ๋ฉ์ถ ์ ์์next()
method๊ฐ ์์ผ๋ฉฐ ์ฌ์ฉํ๋ฉด ๊ฐ์ฅ ๊ฐ๊น์ด yield๊น์ง ๊ฐ๊ณ ๋ฉ์ถคyield
์ค๋ฅธ์ชฝ ๊ฐ์ (๊ฐ์ ์๋ตํ๋ฉด "undefined"์)next()
์ธ์ return()
๊ณผ throw()
method๋ฅผ ๊ฐ์ง๊ณ ์์Symbol.iterator
method๊ฐ ๊ตฌํ๋์ด ์์ด์ผ ํจwhile (true)
๋ฌธ์ ์ฌ์ฉํ๋ฉด์ break
๋ฅผ ์ฐ์ง ์์๋ ๋จfor ... of
๋ฌธ์ผ๋ก ์ํํ ์ ์์// ๐ต it๋ผ๋ ๋ณ์ ์์ arr๊ฐ ๊ฐ์ง๊ณ ์๋ Symbol.iterator method๋ฅผ ์คํํ๊ธฐ
const arr = [1, 2, 3, 4, 5];
const it = arr[Symbol.iterator]();
it.next(); // {value: 1, done: false} ...
// ๐ต for ... of๋ฌธ์ผ๋ก ์ํํ๊ธฐ
for (let num of arr) {
console.log(num)
};
// ๐ต
function* fn() {
yield 4;
yield 5;
yield 6;
}
const a = fn();
a[Symbol.iterator]() === a; // true : a๋ผ๋ generator์ Symbol.iterator๋ผ๋ method๋ฅผ ์คํํ ๊ฐ์ด ์๊ธฐ ์์ ๊ณผ ๊ฐ๋ค๋ ๋ง
for (let num of a) { // for ... of๊ฐ ์์๋๋ฉด a[Symbol.iterator]()๋ฅผ ํธ์ถํ๊ณ ์ด๊ฒ ์์ผ๋ฉด error๊ฐ ๋ฐ์ํ ํ ๋ฐํ๋ iterator์ next method๋ฅผ ํธ์ถํ๋ฉด์ done์ด true๊ฐ ๋ ๋๊น์ง ๋ฐ๋ณตํจ
console.log(num);
} // 4, 5, 6
// ๐ต next() method์ ์ธ์ ์ ๋ฌํ๊ธฐ
function* fn() {
const num1 = yield "์ฒซ ๋ฒ์งธ ์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.";
console.log(num1);
const num2 = yield "๋ ๋ฒ์งธ ์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.";
console.log(num2);
return num1 + num2;
}
const a = fn();
a.next() // {value: "์ฒซ ๋ฒ์งธ ์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.", done: false}
a.next(4) // ์ธ์๊ฐ num1์ ์ ์ฅ๋จ, {value: "๋ ๋ฒ์งธ ์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.", done: false}
a.next(7) // ์ธ์๊ฐ num2์ ์ ์ฅ๋จ, {value: 7, done: true}
// ๐ต ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํด๋ ๋ฌด๋ฆฌ ๊ฐ์ง ์๋ generator
function* fn() {
let index = 0;
while (true) {
yield index++;
}
}
const a = fn(); // a.next();๋ฅผ ์ฌ์ฉํ ๋๋ง ์ฐ์ฐ๋ผ์ break๊ฐ ์๋ ๋ฌดํ ๋ฐ๋ณต๋ฌธ์์๋ ๋ป์ง ์์
// ๐ต yield๋ก ๋ค๋ฅธ generator ๋ถ๋ฅด๊ธฐ
function* gen1() {
yield "W";
yield "O";
yield "R";
yield "L";
yield "D";
}
function* gen2() {
yield "Hello,";
yield* gen1();
yield "!";
}
console.log(...gen2()); // "Hello," "W" "O" "R" "L" "D" "!"