- this๋ ํจ์ ์ ์ธ ์์ ์ ์ ํด์ง๋๊ฒ ์๋๋ผ ํธ์ถ ์์ ์ ์ ํด์ง.
- ์ผ๋ฐ์ ์ผ๋ก ํจ์์คํ ์์ ์์ ๊ฐ์ฒด์ method์ด๋ฉด ๋ถ๋ชจ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํด ์๋๋ฉด ์ ์ญ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํด.
- ์์ฑ์ ํจ์๋ก ํธ์ถ์ this๋ ์๋ก ์์ฑ๋ ์ธ์คํด์ค ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํด.
- ์ ์ญ์์ this์ ์ ๊ทผํ ๊ฒฝ์ฐ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํด.
- arrow function ์์์ this์ ์ ๊ทผํ ๊ฒฝ์ฐ this๋ ํจ์ ์ ์ธ ์์ ์ ์์ ์ปจํ ์คํธ(๋ถ๋ชจ ํจ์) this๋ฅผ ๊ฐ๋ฆฌํด.
- strict mode์์๋ ์๋ฌต์ ์ผ๋ก this๊ฐ window ๋๋ global๋ก ํ ๋น๋ ๊ฒฝ์ฐ undefined๊ฐ ํ ๋น๋จ.
-
์์ํ ํ์ ์ Number, Boolean, null, undefined, String, Symbol(ES6), BigInt(ES11)๊ฐ ์๊ณ ,
-
์ฐธ์กฐํ ํ์ ์ ๊ฐ์ฒด(Object), ๋ฐฐ์ด(Array), ํจ์(function), ์ ๊ท ํํ์(regExp)๋ฑ์ด ์๋ค.
-
์์ํ ํ์ ์ pass by value์ด๊ธฐ ๋๋ฌธ์ ๊ฐ์ด ๋ณ๊ฒฝ ๋๊ฑฐ๋ ๋ณต์ฌ๋๋ฉด ์๋ก์ด ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น ๋๋ค.
-
์ฐธ์กฐํ ํ์ ์ pass by reference์ด๊ธฐ ๋๋ฌธ์ ๊ฐ์ด ๋ณ๊ฒฝ ๋๊ฑฐ๋ ๋ณต์ฌ๋์ด๋ ์๋ก์ด ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น ๋์ง์๊ณ ๊ธฐ์กด ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฐธ์กฐ ํ๊ฒ ๋๋ค.
-
๊ธฐ์กด ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฐธ์กฐํ๊ธฐ๋๋ฌธ์ ๋ง์ฝ ๋ณต์ฌํ ๊ฐ์ ํ๋กํผํฐ๋ฅผ ๋ณ๊ฒฝํ์์ ๋ณต์ฌ๋ ๊ฐ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ค.
-
์ฐธ์กฐํ ํ์ ์ ์์ํ ํ์ ์ฒ๋ผ pass by value๋ก ์ฌ์ฉํ ๋ ค๋ฉด ์ ๊ฐ์ฐ์ฐ์๋ Object.assign์ผ๋ก ์์ ๋ณต์ฌ๊ฐ ์๋ ๊น์ ๋ณต์ฌ๋ฅผ ํด์ผํ๋ค.
let str = 'str'
let copiedStr = string
let obj = { foo: '1', bar: '2' }
let copiedObj = obj
console.log(str, copiedStr) // 'str str'
copiedStr = 'string'
console.log(str, copiedStr) // 'str string'
console.log(obj, copiedObj) // '{ foo: '1', bar: '2' } { foo: '1', bar: '2' }'
copiedObj.foo = 3
console.log(obj, copiedObj) // '{ foo: '3', bar: '2' } { foo: '3', bar: '2' }'
const deepCopiedObj = { ...obj } // ์ ๊ฐ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ๊น์ ๋ณต์ฌ
console.log(obj, deepCopiedObj) // '{ foo: '3', bar: '2' } { foo: '3', bar: '2' }'
deepCopiedObj.foo = 30
console.log(obj, deepCopiedObj) // '{ foo: '3', bar: '2' } { foo: '30', bar: '2' }'
javascript function๋ ๋ ์์ปฌ ์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ ์์ด ํธ์ถ๋ ์์ ์ด ์๋๋ผ ํจ์๊ฐ ์์ฑ๋ ์ํฉ์์ ์ค์ฝํ๊ฐ ๊ฒฐ์ ๋๋ค.
const x = 'global'
function a() {
console.log(x)
}
function b() {
const x = 'local'
a()
}
a() //global
b() //local์ด ์๋๋ผ global
substring
์ฒซ๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ์์ index ๋ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ๋ง์ง๋ง index
substr
์ฒซ๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ์์ index ๋ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ๊ธธ์ด
slice
substring์ ๋์ผํ์ง๋ง ํ๋ผ๋ฏธํฐ์ ์์๋ฅผ ์ ๋ ฅํ ์ ์์
const target = 'hello world'
const substring = target.substring(2, 5) // 2๋ฒ์งธ ์ธ๋ฑ์ค ๋ถํฐ 5 ์ธ๋ฑ์ค ์ ๊น์ง return: "llo"
const slice = target.slice(2, -6) // 2๋ฒ์งธ ์ธ๋ฑ์ค ๋ถํฐ ๋ค์์ 6๋ฒ์งธ ์ธ๋ฑ์ค ์ ๊น์ง return: "llo"
const substr = target.substr(2, 5) // 2๋ฒ์งธ ์ธ๋ฑ์ค ๋ถํฐ 5 ๊ธ์ return: "llo w"
apply
1๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก this์ ๋ฐ์ธ๋ฉํ ๊ฐ์ ๋ฐ๊ณ 2๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก ๋ฐฐ์ด์ ๋ฐ์์ ํจ์์ ํ๋ผ๋ฏธํฐ๋ก ๋ฟ๋ ค์ค
call
1๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก this์ ๋ฐ์ธ๋ฉํ ๊ฐ์ ๋ฐ๊ณ 2๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ถํฐ ํจ์์ 1๋ฒ์งธ ํ๋ผ๋ฏธํฐ๊ฐ ๋จ
bind
call๊ณผ ๋๊ฐ์ง๋ง ํจ์ ์คํ์ด ์๋จ
var val1 = 30
var val2 = 50
const obj = {
val1: 40,
val2: 90,
sum(a, b) {
return this.val1 + this.val2 + a + b
},
}
console.log(obj.sum(0, 100)) //230
console.log(obj.sum.call(window, 0, 100)) //180
console.log(obj.sum.apply(window, [0, 100])) //180
throttle: ํจ์๊ฐ ํธ์ถ๋ ํ ์ผ์ ์๊ฐ์ด ์ง๋๊ธฐ ์ ์ ๋ค์ ํธ์ถ๋์ง ์๋๋ก ํ๋ ๊ฒ
debounce: ์ฐ์๋์ด ํธ์ถ๋๋ ํจ์ ์ค ํธ์ถ๋ ๋ง์ง๋ง ํจ์๋ง ํธ์ถํ๋๋ก ํ๋ ๊ฒ
throttle์ ๋งจ์ฒ์ ํจ์๊ฐ ์คํ๋ํ ์ผ์ ์๊ฐ์ ๊น์ง ๋ค์ ํธ์ถ๋์ง ์์ง๋ง debounce๋ ์ผ์ ์๊ฐ๋์ ํธ์ถ๋์ง ์์์ผ์ง ํธ์ถ๋ ๋ง์ง๋ง ํจ์๊ฐ ์คํ๋๋ค
throttle์ ์คํฌ๋กค ์ด๋ฒคํธ ์ฒ๋ฆฌ์ ์ฃผ๋ก ์ฌ์ฉํ๊ณ debounce๋ ajax ๊ฒ์์ ์ฃผ๋ก ์ฌ์ฉํ๋ค
- ์ด๋ฒคํธ ์์(Event Delegation)์ด๋ ๋ค์์ ์์ ์๋ฆฌ๋จผํธ์ ๊ฐ๊ฐ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฐ์ธ๋ฉํ๋ ๋์ ๋ถ๋ชจ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฐ์ธ๋ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
- ๋ถ๋ชจ Element์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ฐ์ธ๋ฉ ํ ํ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ ํตํด ์ ๋ฌ๋ฐ์ event ์ธ์๋ฅผ ํตํด event๊ฐ ํธ๋ฆฌ๊ฑฐ๋ Element๋ฅผ ํ์ธํ๋ค.
- null์ ํ๋ก๊ทธ๋๋จธ๊ฐ ์๋์ ์ผ๋ก ๋ณ์์ ๊ฐ์ด ์์์ ํํํ๊ณ ์ถ์ ๋ ํ ๋นํ๋ ๊ฐ์ด๋ค.
- ๋ํ ๊ฐ์ฒด ์ฐธ์กฐ ๋งํฌ๋ฅผ ๋๊ธฐ ์ํด์๋ ์ฌ์ฉํ ์ ์๋ค, ํด๋น ๊ฐ์ฒด ๋ณ์๋ฅผ null๋ก ๋ณ๊ฒฝํ๋ฉด ๊ฐ๋น์ง ์ปฌ๋ ์ ์ด ์คํ๋๋ฉฐ ํด๋น ๊ฐ์ฒด๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์์ ์ ๊ฑฐํ๋ค.
- ์ ์ธ๋ง ๋์ด์ง๊ณ ํน์ ๊ฐ์ด ํ ๋น๋์ง ์๋ ๊ฒฝ์ฐ javascript ์์ง์ ์ํด ์๋์ผ๋ก ํ ๋น๋๋ ๊ฐ์ด๋ค.
- ํน๋ณํ ํ ๋น๋ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ ๋ค๋ฅธ ์ธ์ด๋ค์ฒ๋ผ null์ด ์๋๊ณ undefiend๊ฐ ํ ๋น๋๋ค.
- ๋ํ ๊ฐ์ฒด๊ฐ ์์ ํ์ง ์์ ํ๋กํผํฐ์ ์ ๊ทผํ๊ฒ ๋ ๊ฒฝ์ฐ์๋ undefined๊ฐ ๋ฐํ๋๋ค.
- undeclared ๋ณ์๋ ์ ์ธํ์ง ์์ ์๋ณ์์ ๊ฐ์ ํ ๋นํ ๋ณ์์ด๋ค.
- ์๋ฅผ ๋ค์ด undeclaredVar = โfooโ ์ ๊ฐ์ด var, let, const keyword๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์ ์ธ๋ ๋ณ์์ด๋ค.
- undeclared ๋ณ์๋ ๊ธ๋ก๋ฒ ๋ณ์๋ก ์์ฑ ๋๋ค.
- null์ ํ๋ก๊ทธ๋๋จธ๊ฐ ํ ๋นํ๋ ๊ฒ์ด๋ฉฐ ๋ณ์์ ๊ฐ์ด ์์์ ํํํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
- ๋ฐ๋ฉด undefined๋ javascript ์์ง์ ์ํด ์๋์ผ๋ก ํ ๋น๋๋ค.
- ํด๋ก์ ๋ ์คํ์ด ์ข ๋ฃ๋ ์ธ๋ถ ํจ์์ context์ ์ ๊ทผํ๋ ๋ด๋ถํจ์๋ฅผ ๋งํ๋ค.
- ๋ด๋ถํจ์๋ ์ธ๋ถํจ์์ context์ ์ ๊ทผํ ์ ์๊ณ , ์ธ๋ถํจ์๋ ๋ด๋ถํจ์์ context์ ์ ๊ทผํ ์ ์์ผ๋ฉฐ, ์ธ๋ถํจ์์ context๋ ์ธ๋ถํจ์์ ์คํ์ด ์ข ๋ฃ๋ผ๋ context์ ์ ๊ทผํ๋ ๋ด๋ถํจ์๊ฐ ์๋ฉธ๋ ๋๊น์ง ๊ฐ์ด ์๋ฉธ๋์ง ์๋ ํน์ฑ์ด์๋ค.
- ํด๋ก์ ๋ JavaScript ํจ์์ ๋ ์์ปฌ ์ค์ฝํ ์ฑ์ง์ ํ์ฉํ ํจํด์ด๋ค.
function generateCounter() {
let count = 0
return () => ++count
}
const counter = generateCounter()
counter() // 1
counter() // 2
- ํธ์คํธ ๊ฐ์ฒด(Host object)๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ ์ ๊ณตํ๋ window, XmlHttpRequest, HTMLElement ๋ฑ์ DOM ๋ ธ๋ ๊ฐ์ฒด์ ๊ฐ์ด ํธ์คํธ ํ๊ฒฝ์ ์ ์๋ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค.
- ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ํ๊ฒฝ๊ณผ ๋ธ๋ผ์ฐ์ ์ธ๋ถ์์ ๋์ํ๋ ํ๊ฒฝ์ ์๋ฐ์คํฌ๋ฆฝํธ(Node.js)๋ ๋ค๋ฅธ ํธ์คํธ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ex) window, document, location, history, XMLHttpRequest, querySelectorAll, ...
- ๋ค์ดํฐ๋ธ ๊ฐ์ฒด(Native Object)๋ ECMAScript ๋ช ์ธ์์ ์ ์๋ object๋ก Javascript์ ๋ชจ๋ ์์ง์ ๊ตฌํ๋ ํ์ค๊ฐ์ฒด์ด๋ค.
- ex) Date, Math, parseInt, eval, ...
- ๊ธฐ๋ฅ ๊ฒ์ถ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํธ์ถํ์ฌ ๊ธฐ๋ฅ X๊ฐ ๋ธ๋ผ์ฐ์ ์ ์กด์ฌํ๋์ง ํ์ธํ๋๊ฒ์ด๋ค.
if('localStorage' in window)
- ๊ธฐ๋ฅ ์ถ๋ก ๋ ๊ธฐ๋ฅ ๊ฒ์ถ์ฒ๋ผ ๋ธ๋ผ์ฐ์ ๊ฐ ํน์ ๊ธฐ๋ฅ์ ์ง์ํ๋์ง ์ฒดํฌํ๋ ๊ฒ์ด๋ค. ํ์ง๋ง 'A๊ธฐ๋ฅ์ ์ง์ํ๋ฉด B๊ธฐ๋ฅ๋ ์ง์ํ ๊ฒ์ด๋ค.'๋ผ๋ ์ถ๋ก ์ด ๋ฐํ์ด ๋๋ค(๋น๊ถ์ฅ)
if ('localStorage' in window) {
sessionStorage.add('foo', 'bar') // localstorage๊ฐ ์์ผ๋ฉด sessionStorage๋ ์์๊ฒ์ผ๋ก ๊ธฐ๋ฅ ์ถ๋ก
}
- AJAX๋ ์๋ฒ์ ํต์ ํ๊ธฐ ์ํด XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
- JSON, XML, HTML ๊ทธ๋ฆฌ๊ณ ์ผ๋ฐ ํ ์คํธ ํ์ ๋ฑ์ ํฌํจํ ๋ค์ํ ํฌ๋งท์ ์๋ฒ์ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค.
- AJAX๋ ํ์ด์ง ์ ์ฒด๋ฅผ ์๋ก๊ณ ์นจ ํ์ง ์๊ณ ์๋ ์ํ ๋๋ ๋น๋๊ธฐ์ ํต์ ์ด๋ค.
- ์ด๋ฌํ ๋น๋๊ธฐ์ฑ์ ํตํด ์ฌ์ฉ์์ Event๊ฐ ์์ผ๋ฉด ์ ์ฒด ํ์ด์ง๊ฐ ์๋ ์ผ๋ถ๋ถ๋ง์ ์ ๋ฐ์ดํธํ ์ ์๊ฒ ํด์ค๋ค.
- ํธ์ด์คํ ์ด๋ ํจ์๋ ๋ณ์๊ฐ ํด๋น scope์ ๋งจ์๋ก ์ฌ๋ผ๊ฐ๋ ํ์์ด๋ค.
- ๋ณ์ ํธ์ด์คํ ์ ๊ฒฝ์ฐ, var ํค์๋๋ก ๋ณ์๋ฅผ ์ ์ธํ์ ๋ ๋ณ์ ํธ์ด์คํ ์ด ์ผ์ด๋๋ฉฐ ํด๋น ๋ณ์์ ์ ์ธ์ด context scope์ ์ต์์๋ก ์ฌ๋ผ๊ฐ๋ค(๋ณ์ ํ ๋น์ ํธ์ด์คํ x).
- let, const ํค์๋๋ก ์ ์ธํ ๋ณ์์ ๊ฒฝ์ฐ ๋ด๋ถ์ ์ผ๋ก ํธ์ด์คํ ์ด ์ผ์ด๋์ง๋ง TDZ(temporal dead zone)์ผ๋ก ํธ์ด์คํ ์ด ์ผ์ด๋ ์ฌ์ค์ ํ๋ก๊ทธ๋๋จธ ์ ์ฅ์์๋ ํธ์ด์คํ ์ด ์ผ์ด๋์ง ์๋ ๊ฒ ์ฒ๋ผ ์๋ํ๋ค.
- ํจ์ ํธ์ด์คํ ์ ๊ฒฝ์ฐ ํจ์๋ฅผ "ํจ์ ์ ์ธ์(function)"์ผ๋ก ์ ์ธ ํ์ ๊ฒฝ์ฐ ์ผ์ด๋๋ฉฐ ํจ์์ ์ ์ธ ๋ฐ ํ ๋น ๋ชจ๋ context scope์ ์ต์์๋ก ์ฌ๋ผ๊ฐ๋ค.
- ํจ์๋ฅผ const ํค์๋ ๋ฑ์ ํ์ฉํด "ํจ์ ํํ์"์ผ๋ก ์ ์ธ ํ์ ๊ฒฝ์ฐ ๋ณ์ ํธ์ด์คํ ๊ณผ ๋์ผํ๊ฒ ์ฒ๋ฆฌ๋๋ค.
- ํ์ ์๋ฆฌ๋จผํธ์์ ์ด๋ฒคํธ๊ฐ ์ผ์ด๋ฌ์๋ ํ์์์ ์์ ์๋ฆฌ๋จผํธ๋ก ์ด๋ฒคํธ๊ฐ ์ ๋ฌ๋๋ ๋ฐฉ์์ด๋ค.
- HTML ์ด ๋ชจ๋ ๋ก๋๋๊ณ , DOM ํธ๋ฆฌ๊ฐ ์์ฑ๋์์ง๋ง, ์ธ๋ถ ๋ฆฌ์์ค(img, etc...)๊ฐ ์์ง ๋ก๋๊ฐ ๋์ง ์์์ ๋, DOM ๋ ธ๋๋ฅผ ์ ์ดํ ์ ์๋ค.
- ๋ธ๋ผ์ฐ์ ์ ๋ชจ๋ ๋ฆฌ์์ค(img, style, script, etc...) ๊ฐ ๋ก๋ ๋์์ ๋
- ๋ชจ๋ ๋ฆฌ์์ค๊ฐ ๋ก๋๋ ์์ ์ด๊ธฐ์, ๋ก๋๋ image ์ฌ์ด์ฆ์ ๊ฐ์ ๊ฒ๋ค์ ์ป์ ์ ์๋ค.
- ๋๋ฑ ์ฐ์ฐ์์ ๋น๊ตํ๋ ๋ ๋ณ์์ ํ์ ์ด ๋ค๋ฅด๋ฉด ํ๋ณํ์ ํ ๋ค ๋น๊ตํ๋ค.
- ์ผ์น ์ฐ์ฐ์๋ ๋น๊ตํ๋ ๋ ๋ณ์์ ํ์ ์ด ๋ฌ๋ผ๋ ๋ฌด์ํ๊ณ ๋น๊ตํ๋ค.(ํ์ ์ด ๋ค๋ฅผ ๊ฒฝ์ฐ ๋ฌด์กฐ๊ฑด false ๋ฐํ)
- Strict Mode๋ ES5์์ ์ถ๊ฐ ๋์์ผ๋ฉฐ "use strict;" ์ ์ ๋ ฅํ๋ฉด ํด๋น ์ค์ฝํ์ ๋ค์ ๊ตฌ๋ฌธ๋ค๋ถํฐ ์ ์ฉ๋๋ค.
- ์ด์ ๋ฒ์ ์ JavaScript ์ธํฐํ๋ฆฌํฐ๋ค์ use strict๊ตฌ๋ฌธ์ ๋ฌด์ํ๋ค.
- Strict Mode์์๋ ์๋ฌต์ ์ ์ญ ๋ณ์ ์ ์ธ, ๋ณ์ ํจ์ ๋งค๊ฐ๋ณ์์ ์ญ์ , ๋งค๊ฐ๋ณ์ ์ด๋ฆ์ ์ค๋ณต, with ๋ฌธ์ ์ฌ์ฉ ํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
- ๋ํ ์ผ๋ฐ ํจ์์์์ this๋ฅผ ํธ์ถํ๋ฉด global๊ฐ์ฒด๊ฐ return๋๋ ๋์ , undefined๊ฐ return ๋๋ค.
- Strict Mode๋ IE10 ์ด์๋ถํฐ ์ง์ํ๋ค.
- SPAํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ฑ๊ธ ํ์ด์ง์ด๊ธฐ ๋๋ฌธ์ SPAํ๋ก์ ํธ ํฌ๋กค๋ง์ด ๊ฐ๋ฅํ ๊ตฌ๊ธ์ ์ ์ธํ๊ณ ๋ค์ด๋ฒ, ๋ค์, ๋ค์ดํธ๋ฑ์ ํฌํธ์ฌ์ดํธ์์ ๊ฒ์๊ฒฐ๊ณผ๊ฐ ๋ํ๋์ง์๋๋ค.
- SEO๋ฅผ ํ๊ธฐ์ํด์ react๊ธฐ์ค์ผ๋ก Next.js๋ react-server๋ฅผ ์ฌ์ฉํ์ฌ ssr์ ํ๊ฑฐ๋ prerender(๋น๋ ์์ ์์ ๋ ๋๋งํด์ ์ ์ ํ์ผ(.html)์ ์์ฑํด ๋๋ค http ์์ฒญ์ด ์ฌ๋ ๋ฏธ๋ฆฌ ์์ฑํด๋ ์ ์ ํ์ผ์ ์ ์ก)์ ํ ์ ์์ต๋๋ค.
- ๋ํ lambda@Edge๋ฅผ ํ์ฉํด ์๋ฒ๋ฆฌ์ค ํจ์๋ฅผ ์คํ์์ผ ํฌ๋กค๋ฌ์ผ ๊ฒฝ์ฐ ์๋ง๋ open graph ํ๊ทธ๋ฅผ ์ฝ์ ์ํฌ ์๋ ์์ต๋๋ค.
- ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ ์ฝ๋ฐฑ ํฌ์ ๋ฒ์ด๋ ์ ์๋ค.
- ๋ฉ์๋ ์ฒด์ด๋์ ํตํ ์ฐ์์ ์ธ ์ฝ๋ ์์ฑ์ด ๊ฐ๋ฅํ๋ค.
- Promise์ ์ทจ์๊ฐ ๋ถ๊ฐ๋ฅํ๋ค
- ์์(primitive) ํ์ ๊ฐ๋ค์ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ(immutable value)์ด๋ฉฐ ์์ ํ์ ์ด์ธ์ ๋ชจ๋ ๊ฐ๋ค์ ๊ฐ์ฒด(Object) ํ์ ์ด๋ค. ๊ฐ์ฒด ํ์ ์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๊ฐ(mutable value)์ด๋ค.
- ์์ ํ์ ๊ฐ๋ค์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋๋ฉด ํ๋ก๊ทธ๋๋จธ๊ฐ ์๋์ ์ผ๋ก ๊ฐ์ ์ญ์ ํ๊ฑฐ๋ ์ฌํ ๋น ํ์ง์๋์ด์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋์ง์๋๋ค.
const statement = 'I am an immutable value' // string์ immutable value
const slicedStr = statement.slice(8, 17)
console.log(otherStr) // 'immutable'
console.log(statement) // 'I am an immutable value' ์๋ณธ๊ฐ์ ๋ณ๊ฒฝ๋์ง ์์
- ํ์ง๋ง ์ฐธ์กฐ ํ์ ๊ฐ๋ค์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋ ์์๋ค.
const arr = []
console.log(arr) // []
const arr2 = arr.push(2) // Array.prototype.push ๋ฉ์๋๋ ์คํ ํ arr์ length๋ฅผ ๋ฐํ
console.log(arr) // [1] ์๋ณธ arr์ด ๋ณ๊ฒฝ๋
- var๋ก ์ ์ธ๋ ๋ณ์๋ ํจ์ ๋ ๋ฒจ ์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ let, const๋ก ์ ์ธ๋ ๋ณ์๋ ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ๋ฅผ ๊ฐ์ง๋ค.
- ๋ํ var๋ ๋ณ์ ํธ์ด์คํ ์ด ์ผ์ด๋ ๋ณ์์ ์ ์ธ์ด ์ค์ฝํ์ ๋งจ์๋ก ์ฌ๋ผ๊ฐ๊ฒ๋๋ค.
- var ๋ณ์๊ฐ ์ ์ธ๋๊ธฐ ์ ์ ์ฝ์ด๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์์ง๋ง, let๊ณผ const๋ก ์ ์ธํ ๋ณ์๋ฅผ ์ฝ์ผ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
- var๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธํ ๋ณ์๋ ๋ค์ ์ ์ธํด๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์์ง๋ง โletโ๊ณผ โconstโ๋ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
- var์ let๋ก ์ ์ธ๋ ๋ณ์๋ ๊ฐ์ ์ฌํ ๋นํ ์ ์์ง๋ง const๋ก ์ ์ธ๋ ๋ณ์๋ ์ฌํ ๋น ๋ ์์๋ค.
- Object์ ํค์๋ String๊ณผ Symbol์ ์ฌ์ฉํ ์ ์์ง๋ง, Map์ ํจ์, ๊ฐ์ฒด, ์์ ์๋ฃํ ๋ฑ ์ด๋ค ๊ฐ๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- Map์ ํค๋ ์ฝ์ ์์ผ๋ก ์ ๋ ฌ๋์ง๋ง Object์ ํค๋ ๊ทธ๋ ์ง ์์ต๋๋ค. ๋ฐ๋ผ์ Map์ ์ํํ๋ฉด ํค๋ฅผ ์ฝ์ ํ ์์๋๋ก ๋ฐํํฉ๋๋ค
- Map์ ํฌ๊ธฐ๋ size ์์ฑ์ผ๋ก ์ฝ๊ฒ ์ป์ ์ ์์ง๋ง Object์ ์์ฑ ์๋ ์ง์ ํ๋ณํด์ผ ํฉ๋๋ค.
- Map์ ๋ฐ๋ก ์ํํ ์ ์์ง๋ง, Object๋ฅผ ์ํํ๋ ค๋ฉด ์ด๋ค ๋ฐฉ๋ฒ์ด๋ ํค์ ๋ฐฐ์ด์ ์ป๊ณ , ๊ทธ ๋ฐฐ์ด์ ์ํํด์ผ ํฉ๋๋ค.
- Object๋ ํ๋กํ ํ์ ์ ๊ฐ์ง๋ฏ๋ก, ์ฃผ์ํ์ง ์์ผ๋ฉด ํค๊ฐ ์ถฉ๋ํ ์ ์์ต๋๋ค.
- ์ฆ์ ํค์ ์ถ๊ฐ์ ์ ๊ฑฐ๊ฐ ํ์ํ ์๋๋ฆฌ์ค์์๋ Map์ด ๋ ๋น ๋ฆ ๋๋ค.
- Array๋ ์ค๋ณต๋ ๊ฐ์ ๊ฐ์ง ์ ์์ง๋ง, Set์ ์ค๋ณต๋ ๊ฐ์ ๊ฐ์ง ์ ์์ต๋๋ค.
- Set์ ์ค๋ณต๋ ๊ฐ์ ์ถ๊ฐํ ๊ฒฝ์ฐ ์๋์ผ๋ก ์ถ๊ฐ๋์ง ์์ต๋๋ค.
- for in์ ํด๋น ์ปฌ๋ ์ ์ key๊ฐ์ ์ป์ ์ ์๊ณ , for of๋ value๊ฐ์ ์ป์ ์ ์๋ค.
- for in์ ๊ฐ์ฒด์ ์ด๊ฑฐ ๊ฐ๋ฅํ(Enumerable)ํ๋กํผํฐ์ ๊ฐ์ด true์ธ ํ๋กํผํฐ๋ง ์ํํ๋ค.
- object.prototype.propertyIsEnumerable(propertyName)์ ์ฌ์ฉํด์ ํด๋น ํ๋กํผํฐ๊ฐ ์ด๊ฑฐ ๊ฐ๋ฅํ์ง ํ์ธํ ์ ์๋ค.
- for of์ ์ปฌ๋ ์ ์์ [Symbol.iterator]๊ฐ์ ์ดํฐ๋ ์ดํฐ๋ฅผ ๋๊น์ง ์ํํ๋ค.
- Array์ ๋ด์ฅ prototype ๋ฉ์๋์ธ
sort
๋ ์คํ๋๋ ์์ง์ ๋ฐ๋ผ ๋ค๋ฅด์ง๋ง,v8
์์ง์์๋Timsort
๋ฅผ ์ฌ์ฉํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์๊ฐ ๋ณต์ก๋๋O(nlog(n))
๊ณต๊ฐ ๋ณต์ก๋๋O(n)
์ ๋๋ค. sort
๋ฉ์๋๋ ์ธ์๋ก ์๋ฌด๊ฒ๋ ์ ๋๊ฒจ์ค ๊ฒฝ์ฐ ์ค๋ฆ์ฐจ์์ผ๋ก ์ ๋ ฌํ๋ฉฐ, ์ ๋ ฌ ์์๋ฅผ ์ ์ํ๊ณ ์ถ์ผ๋ฉด ํด๋น ๋ฉ์๋์ ์ฒซ ๋ฒ์งธ ์ธ์๋กcompareFunction
๋ฅผ ๋๊ฒจ์ฃผ๋ฉด ๋ฉ๋๋ค.compareFunction(a, b)
์ ์ธ์๋ก๋ ๋น๊ตํ ๋ฐฐ์ด์ ์์ ๊ฐ 2๊ฐ๊ฐ ์ ๊ณต๋ฉ๋๋ค.- ํด๋น ํจ์์ ๋ฆฌํด ๊ฐ์ด ์์๋ฉด
a
๋ฅผb
๋ณด๋ค ๋ฎ์ ์ธ๋ฑ์ค๋ก ์ ๋ ฌํ๊ณ 0
์ด๋ฉด ๋ ์์์ ์์๋ฅผ ๋ณ๊ฒฝํ์ง ์๊ณ ์ ์งํฉ๋๋ค.- ์์๋ฉด
b
๋ฅผa
๋ณด๋ค ๋ฎ์ ์ธ๋ฑ์ค๋ก ์ ๋ ฌํฉ๋๋ค.
- ์์์ ํฌ๊ธฐ์ viewport์์์ ์๋์ ์ธ ์์น๋ฅผ ๊ฐ์ฒด์ ๋ด์์ ๋ฐํํ๋ ๋ฉ์๋.
- browser support: ie9+
- requestAnimationFrame์ด๋ ๋ชจ๋ํฐ์ ์ฃผ์ฌ์จ์ ๋ง๊ฒ ์๋๋ฉ์ด์ ์ ํํํ ๋ ์ฌ์ฉํ๋ค requestAnimationFrame์ ์ฝ๋ฐฑํจ์๋ ์ด๋น ์ต๋ ๋ชจ๋ํฐ์ ์ฃผ์ฌ์จ๋งํผ ํธ์ถ๋๋ค.
- ๋ํ ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ์์ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋๋ก ๋๋ฆฌ๊ฒ๋๋ฉด requestAnimationFrame์ ๋ฉ์ถ๊ฒ๋๋ค.
let count = 0
const el = document.querySelector('.counter')
function counter() {
if (count >= 1000) return
count++
el.textContent = count
requestAnimationFrame(counter)
}
requestAnimationFrame(counter)