[TIL] Day15
[SEB FE] Day15
๐ซ ๊ธ์์ผ 3์๊ฐ์ ์ด์ด ์ค๋ 5์๊ฐ ๊ฝ๊ฝ ์ฑ์์ ํ์ด๋ถ๊ณผ JS koans 50๋ฌธ์ ๋๊น์ง ํ์๋ค.
โย ๋์จํ ๋น๊ต ์ฐ์ฐ(==)์ ์ง์ํ๊ณ , ์๊ฒฉํ ๋น๊ต ์ฐ์ฐ(===) ์ฌ์ฉํ๊ธฐ
โย var, const, let ๋น๊ต
Hoisting
(ํธ์ด์คํ
): function์ด๋ var ์ ์ธ๋ฌธ ๋ฑ์ ํด๋น ์ค์ฝํ์ ์ ๋๋ก ์ฎ๊ธด ๊ฒ์ฒ๋ผ ๋์ํ๋ ํน์ฑTDZ
(Temporal Dead Zone): ์ค์ฝํ์ ์์ ์ง์ ๋ถํฐ ์ด๊ธฐํ ์์ ์ง์ ๊น์ง์ ๊ตฌ๊ฐvar
ํค์๋๋ ์ ์ธ ์ ์๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋ฏ๋ก var
์ฌ์ฉ ์ง์ย โย ํจ์ ์ ์ธ๋ฌธ & ํจ์ ํํ์ ์ฐจ์ด โ ํธ์ด์คํ (hoisting)
// ํจ์ ์ ์ธ๋ฌธ: function ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ํจ์ ์ ์ธ
function add (x, y) {
return x + y;
};
// ํจ์ ํํ์: ํจ์๋ฅผ ๋ณ์์ ํ ๋นํ ํํ
const add = function (x, y) {
return x + y;
};
โ๏ธย ํด๋ก์ (Closure)
function increaseBy(increaseByAmount) {
return function (numberToIncrease) {
return numberToIncrease + increaseByAmount;
};
}
const increaseBy3 = increaseBy(3);
const increaseBy5 = increaseBy(5);
increaseBy3(10); // 13
increaseBy5(10); // 15
increaseBy(8)(6) + increaseBy(5)(9); // 28
// ์ ์ญ ๋ณ์
let age = 27;
let name = "jin";
let height = 179;
function outerFn() {
let age = 24; // ์ง์ญ๋ณ์
name = "jimin"; // ์ ์ญ๋ณ์ name ๊ฐ์ด 'jin' -> 'jimin'์ผ๋ก ์ฌํ ๋น
let height = 178; // ์ง์ญ๋ณ์
function innerFn() {
age = 26; // ์ง์ญ๋ณ์ age ๊ฐ์ด 24 -> 26์ผ๋ก ์ฌํ ๋น
let name = "suga"; // ์ง์ญ๋ณ์
return height;
}
innerFn();
age; // outFn ๋ด์ 26(์ง์ญ๋ณ์)
name; // outerFn ๋ด์ ์ ์ญ๋ณ์ 'jimin'
// innerFn() ๋ด์ ์ ์ธ๋ ์ง์ญ๋ณ์๋ฅผ ํจ์ ๋ฐ์์ ์ฌ์ฉํ ์ ์์
}
const innerFn = outerFn();
age; // 27(์ ์ญ๋ณ์)
name; // 'jimin'(์ ์ญ๋ณ์)
innerFn(); // 178(์ง์ญ๋ณ์)
const add = (x, y) => {
return x + y;
};
add(10, 20); // 30
----------
// return ์๋ต
const subtract = (x, y) => x - y;
subtract(10, 20); // -10
----------
// ํ์ดํ ํจ์๋ฅผ ์ด์ฉํด์ ํด๋ก์ ํํ
const adder = (x) => {
return (y) => {
return x + y;
};
};
adder(50)(10); // 60
----------
const subtractor = (x) => (y) => {
return x - y;
};
subtractor(50)(10); // 40
โ๏ธย ์์ ์๋ฃํ
let name = "carpediem";
name.toUpperCase(); // "CARPEDIEM"
name; // "carpediem"
name = name.toUpperCase();
name; // "CARPEDIEM"
----------
let word = true;
let copyWord = word;
word = false;
word; // false;
copyWord; // true;
โ๏ธย ์ฐธ์กฐ ์๋ฃํ
heap
)์ ์ฃผ์๋ฅผ ๋ณ์์ ํ ๋นconst nums1 = [1, 2, 3]; // [1, 2, 3]์ด heap์ ์ ์ฅ, ์ด ์์น์ ์ฃผ์๊ฐ ๋ณ์ num1์ ์ ์ฅ
const nums2 = [1, 2, 3]; // [1, 2, 3]์ด heap์ ์ ์ฅ, ์ด ์์น์ ์ฃผ์๊ฐ ๋ณ์ num2์ ์ ์ฅ
nums1 === nums2; // false
// ์ฐธ์กฐ ์๋ฃํ(๋ฐฐ์ด, ๊ฐ์ฒด)์ ๋น๊ต๋ ์ฃผ์ ๋น๊ต
// heap์๋ ๋ ๊ฐ์ [1, 2, 3]์ด ์ ์ฅ๋์ด ์์ผ๋ฉฐ,
// ๊ฐ๊ฐ์ ๋ํ ์ฃผ์๊ฐ ๋ณ์ num1, num2์ ์ ์ฅ
const arr = ["peanut", "butter", "and", "jelly"];
// arr.slice๋ arr์ ๊ฐ์ ๋ณต์ฌํ์ฌ ์๋ก์ด ๋ฐฐ์ด์ ๋ฆฌํด
arr.slice(1); // ["butter", "and", "jelly"]
arr.slice(2, 2); // []
arr.slice(3, 0); // []
arr.slice(5, 1); // []
arr.slice(0); // ["peanut", "butter", "and", "jelly"] <- arr ์ ์ฒด ๋ณต์ฌ
----------
const arr = ["zero", "one", "two", "three", "four", "five"];
const assignedArr = arr;
assignedArr[5] = "changed in assignedArr";
arr[5]; // "changed in assignedArr"
const copiedArr = arr.slice(); // ์๋ณธ ๋ฐฐ์ด ๋ณ๊ฒฝ X
copiedArr[3] = "changed in copiedArr";
arr[3]; // "three"
โย ๋ฐฐ์ด๋ ๊ฐ์ฒด (typeof โ โobjectโ)
const emptyObj = {};
typeof emptyObj === 'object'; // true
emptyObj.length; // undefined
// ๊ฐ์ฒด์ ๊ธธ์ด๋ ์์. => undefined
----------
const obj = {
mastermind: "Joker",
henchwoman: "Adam West",
relations: ["Anarky", "Duela Dent", "Lucy"],
twins: {
"Jared Leto": "Suicide Squad",
"Joaquin Phoenix": "Joker",
"Heath Ledger": "The Dark Knight",
"Jack Nicholson": "Tim Burton Batman",
}
};
const assignedObj = obj;
assignedObj["relations"] = [1, 2, 3];
obj["relations"]; // [1, 2, 3] (์๋ณธ ๊ฐ์ฒด ๋ณ๊ฒฝ)
const copiedObj = Object.assign({}, obj); // Object.assgin() <- ์์ ๋ณต์ฌ
copiedObj.mastermind = "James Wood";
obj.mastermind; // "Joker"
obj.henchwoman = "Harley";
copiedObj.henchwoman = "Adam West"
delete obj.twin["Jared Leto"];
"Jared Leto" in copiedObj.twins; // false (์๋ณธ ๊ฐ์ฒด๊ฐ ์ญ์ ๋๋ฉด ๋ณต์ฌ๋ ๊ฐ์ฒด ๊ฐ๋ ์ญ์ )
โ๏ธย this
this
๋ method๋ฅผ ํธ์ถํ๋ ์์ ์ ๊ฒฐ์ ๋จthis
๋ ํจ์์ ํธ์ถ์ ๋ฐ๋ผ์ ๊ฐ์ด ๋ฌ๋ผ์ง๊ธฐ๋ ํจย โย method๋ '์ด๋ค ๊ฐ์ฒด์ ์์ฑ์ผ๋ก ์ ์๋ ํจ์โ
โ ํธ์ถ๋๋ ๊ฒ์ ์ด๋ ํ ๊ฐ์ฒด์ method์ธ๋ฐ, ๊ทธ '์ด๋ ํ ๊ฐ์ฒด'๋ฅผ ๋ฌป๋ ๊ฒ์ด this
ย โย ํ์ดํ ํจ์ ์์ ์ this
๊ฐ ์์
const spread = [1, 2, 3];
const arr = [0, spread, 4];
arr; // [0, [1, 2, 3], 4]
----------
const spread = [];
const arr = [0, spread, 1];
arr; // [0, [], 1]
----------
// Rest
function returnSecondArg(firstArg, secondArg) {
return secondArg;
};
returnSecondArg("only give first arg"); // undefined (secondArg์ ์ ๋ฌํด์ฃผ๋ parameter๊ฐ ์กด์ฌํ์ง ์์)
----------
function ParamsByRestParameter(...args) {
return args;
}
// spread syntax ๋์
์ด์ , arguments๋ก ๋น์ทํ๊ฒ ํจ์์ ์ ๋ฌ์ธ์๋ค์ ๋ค๋ฃฐ ์ ์์.
// arguments: ๋ชจ๋ ํจ์์ ์คํ์ ์๋์ผ๋ก ์์ฑ๋๋ ๊ฐ์ฒด
function paramsByArgumentsObj() {
return arguments;
}
const restParams = ParamsByRestParameter("first", "second", "third");
const argumentsObj = paramsByArgumentsObj("first", "second", "third");
restParams; // ['first', 'second', 'third']
Object.keys(argumentsObj); // ['0', '1', '2']
Object.values(argumentsObj); // ['first', 'second', 'third']
restParams === argumentsObj; // false
typeof restParams; // 'object'
typeof argumentsObj; // 'object'
Array.isArray(restParams); // true
Array.isArray(argumentsObj); // false
const argsArr = Array.from(argumentsObj); // Array.from(): ๋ฐฐ์ด๋ก ์ ํ
----------
function getAllParams(required1, required2, ...args) {
return [required1, required2, args];
}
getAllParams(123); // [123, undefined, []]
// ๊ฐ์ฒด ๋ถํด
const student = { name: "์ต์ด๋ณด", major: "๋ฌผ๋ฆฌํ๊ณผ" };
const { name, ...args } = student;
name; // "์ต์ด๋ณด"
args; // { major: "๋ฌผ๋ฆฌํ๊ณผ" }
----------
const user = {
name: "๊น์ฝ๋ฉ",
company: {
name: "Kakao",
department: "Development",
role: {
name: "Software Engineer",
},
},
age: 35,
};
const changedUser = {
...user,
name: "๋ฐํด์ปค",
age: 20,
};
const overwriteChanges = {
name: "๋ฐํด์ปค",
age: 20,
...user,
};
// result
expect(changedUser).to.eql({
name: "๋ฐํด์ปค",
company: {
name: "Kakao",
department: "Development",
role: {
name: "Software Engineer",
},
},
age: 20,
});
expect(overwriteChanges).to.eql({
name: "๊น์ฝ๋ฉ",
age: 35,
company: {
name: "Kakao",
department: "Development",
role: {
name: "Software Engineer",
},
},
});
// ...user ๊ฐ ์ด๋์ ์์นํด ์๋์ง์ ๋ฐ๋ผ ๊ฐ์ฒด ๊ฐ๋ค์ด ๋ฌ๋ผ์ง