์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ๋ณต๋ฌธ
์กฐ๊ฑด๋ฌธ
- if
- else if
- else
- switch
- ์ผํญ์ฐ์ฐ์
let result = true ? 1 : 100;
๋ฐ๋ณต๋ฌธ
- for
- for in
- for of
- while
- do while
- forEach
- break : ํด๋น ์กฐ๊ฑด์ด ๋ง์กฑ๋์์๋ ๋ฐ๋ณต๋ฌธ์ ํ์ถ
- continue : ํด๋น ์กฐ๊ฑด์ด ๋ง์กฑ๋์์๋ ๋ค์ ๋ฃจํ๋ก ๋์ด๊ฐ
// for๋ฌธ ๋ฌดํ ๋ฐ๋ณต
for (;;) {
}
// for in ๋ฌธ ๋ฌดํ ๋ฐ๋ณต
let a = '19821';
for (let i of a) {
s += parseInt(i);
}
let b = {'one':1, 'two':2};
for (let j in b) {
console.log(j);
}
// while๋ฌธ ๋ฌดํ ๋ฐ๋ณต
while (true) {
}
ํจ์์ ํด๋์ค
ํจ์
- ํจ์๋ฅผ ์ฌ์ฉํ๋ ์ด์ :
- ์ฌ์ฌ์ฉ์ฑ
- ์ํคํ ์ฒ ํ์
- ์ ์ง๋ณด์
- ํ์ ์์ค :
ํ๋ผ๋ฏธํฐ(parameter)๋ ์ ์ธํ ๋, ์๊ท๋จผํธ(argument)๋ ์ค์ ์ฌ์ฉํ๋ ๊ฐ.
๋ ๋ค ์ธ์๋ก ํํํ๊ธฐ๋ ํจ. - ํจ์ ํํ์, ํจ์ ์ ์ธ์
- ์ฝ๋ฐฑํจ์ : ํจ์๋ฅผ argument๋ก ์ฃผ๊ณ ๋์ค์ ์คํ
- ํ์ดํ ํจ์๋ฅผ ์ฝ๋ฐฑํจ์๋ก ์ฌ์ฉํ์ ๊ฒฝ์ฐ์ ์ฅ๋จ์
- ์ฅ์ : ๋ค์ด๋ฐ์ ์ํด๋ ๋ฉ๋๋ค.
- ์ฅ์ : ๋ค๋ฅธ ๊ณณ์์ ์ฌ์ฉํ ์๊ฐ ์๋ค.
- ๋จ์ : ์ฝ๋ฐฑ์ง์ฅ์ ๋น ์ง ์๊ฐ ์์ต๋๋ค.
- ํ์ดํ ํจ์๋ฅผ ์ฝ๋ฐฑํจ์๋ก ์ฌ์ฉํ์ ๊ฒฝ์ฐ์ ์ฅ๋จ์
- ํ์ดํํจ์
// ํจ์ ํํ์, ํจ์ ์ ์ธ์
let ํจ์ํํ์ = function(){} // ํธ์ด์คํ
X
function ํจ์์ ์ธ์(){} // ํธ์ด์คํ
O
// ์ฝ๋ฐฑ ํจ์
function cal(a, b){
return a(10, 10) + b(10, 10);
}
cal((a, b) => a + b, (a, b) => a * b);
// ํ์ดํํจ์
function ์ ๊ณฑ(x) {
return x**2
}
// ํจ์ํํ์, ํธ์ด์คํ
X
let ์ ๊ณฑ = x => x**2;
function f(a, b) {
let z = 10
let result = z + a + b
return result
}
// ํจ์ํํ์, ํธ์ด์คํ
X
let f = (a, b) => {
let z = 10
let result = z + a + b
return result
};
ํด๋์ค
- ํด๋์ค - ๋ถ์ด๋นต ์ฐ๋ ํ, ๊ณต์ฅ
- ์ธ์คํด์ค - ๋ถ์ด๋นต, ์ ํ
//ํด๋์ค
class Notice {
constructor(title, contents, author){
this.title = title
this.contents = contents
this.author = author
}
์์ ํ๊ธฐ(title, contents, author){
this.title = title
this.contents = contents
this.author = author
}
}
dataBase = []
๊ฒ์๋ฌผ1 = new Notice('์ ๋ชฉ1', '๋ด์ฉ1', '์ ์1') // ์ธ์คํด์ค
dataBase.push(๊ฒ์๋ฌผ1)
๊ฒ์๋ฌผ2 = new Notice('์ ๋ชฉ2', '๋ด์ฉ2', '์ ์2') // ์ธ์คํด์ค
dataBase.push(๊ฒ์๋ฌผ2)
๊ฒ์๋ฌผ3 = new Notice('์ ๋ชฉ3', '๋ด์ฉ3', '์ ์3') // ์ธ์คํด์ค
dataBase.push(๊ฒ์๋ฌผ3)
dataBase.forEach(d => {
์ ๋ชฉ = document.createElement('h1')
์ ๋ชฉ.textContent = d.title
๋ด์ฉ = document.createElement('p')
๋ด์ฉ.textContent = d.contents
์ ์ = document.createElement('p')
์ ์.textContent = d.author
document.body.append(์ ๋ชฉ)
document.body.append(๋ด์ฉ)
document.body.append(์ ์)
})
// dataBase.splice()์ ๊ฐ์ ๊ฒ์ผ๋ก ์ญ์ , ์ค์ ๋ก๋ mongoDB์ ๊ฐ์ ๊ณณ์์ ์ญ์
์์ธ์ฒ๋ฆฌ, ์ ๊ฐํํ์, ์ ๊ทํํ์, ๋ฆฌํฐ๋ด ๋ฑ
์์ธ์ฒ๋ฆฌ
try {
// ์ฝ๋
} catch(e) {
// ์ฝ๋ (์๋ฌ)
// console.error(e);
} finally {
// ์ฝ๋ (๋ฌด์กฐ๊ฑด ์คํ)
}
์ ๊ฐ๊ตฌ๋ฌธ ์ฌ์ฉ
function f(...x){
return x;
}
f(1, 2, 3, 4, 5)
์ ๊ทํํ์
- ํน์ ํจํด์ ์ฐพ์๋ผ ๋ ์ฌ์ฉ
- ์ฐ์ต์ฌ์ดํธ : https://regexr.com/5nvc2
๋ฆฌํฐ๋ด
- 2์ง์ ๋ฆฌํฐ๋ด
let a = 0b1001 // a == 9
let b = 0o1001 // b == 513
let c = 0x1001 // c == 4097
๊ตฌ์กฐ๋ถํดํ ๋น
let [a, b, c] = [10, 20, [100, 200]];
console.log(c);
// [100, 200]
๋๊ธฐ์ ๋น๋๊ธฐ
js๋ ์ผ์ ์ฒ๋ฆฌํ ์ ์๋ thread๊ฐ 1๊ฐ, ์ฑ๊ธ์ฐ๋ ๋๋ผ๊ณ ํจ. ํ์ง๋ง ๋ชจ๋ ์ผ์ ์ฌ๋ฌ๋ช ์ด ์ฒ๋ฆฌํ ์ ์๋ค๋ฉด ํญ์ ๊ธฐ๋ค๋ ค์ผ ํ๋ ๋ฌธ์ ๊ฐ ์๊ธธ ์๋ ์๊ณ , ๋ฌดํ๋๊ธฐ์ ๋น ์ง ์๋ ์์.
(์๋ฐ์คํฌ๋ฆฝํธ์ ์คํ ๋์ ์๋ฆฌ ๊ณต๋ถ๋ฅผ ํด๋ณด๊ธฐ)
- setTimeout ์ ์คํ์๊ฐ์ด 0์ด์ด๋ ์์๊ฐ ๋ค๋ก๊ฐ
- Promise
- pending(๋๊ธฐ์ํ) - resolve(ํด๊ฒฐ) - fulfilled(์ฑ๊ณต)
- pending(๋๊ธฐ์ํ) - reject(๊ฑฐ๋ถ) - rejected(์คํจ)
- ๋ฐ์ดํฐ๋ฅผ ๋์ ์ผ๋ก ๋ฐ์์ค๊ธฐ ์ํด ์ฌ์ฉ.
- ์ฐธ๊ณ :
https://ko.javascript.info/
https://developer.mozilla.org/ko/
//promise
new Promise((resolve, reject) => {
//code
})
.then(result => result)
.then(result => result)
.catch(err => err)
.finally(result => result)
// fetch
fetch('https://jsonplaceholder.typicode.com/users/3')
.then(response => response.json())
.then(json => console.log(json))
// async : ๋น๋๊ธฐ์ ์ผ๋ก ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ๋ถ์ฌ์ค
// await : ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ฌ ๋๊น์ง ๊ธฐ๋ค๋ฆผ
async function getUserEmail(id){
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
const user = await(response.json());
const email = user.email;
console.log(email)
}
DOM
// ํด๋นํ๋ Id๋ฅผ ๊ฐ์ง ์์์ ์ ๊ทผํ๊ธฐ
document.getElementById()
// ํด๋นํ๋ ๋ชจ๋ ์์์ ์ ๊ทผํ๊ธฐ
document.getElementsByTagName();
// ํด๋นํ๋ ํด๋์ค๋ฅผ ๊ฐ์ง ๋ชจ๋ ์์์ ์ ๊ทผํ๊ธฐ
document.getElementsByClassName();
// css ์ ํ์๋ก ๋จ์ผ ์์์ ์ ๊ทผํ๊ธฐ
document.querySelector("selector");
// css ์ ํ์๋ก ์ฌ๋ฌ ์์์ ์ ๊ทผํ๊ธฐ
document.querySelectorAll("selector");
// target ์์๋ฅผ ์์ฑํฉ๋๋ค.
document.createElement(target);
// target ํ
์คํธ๋ฅผ ์์ฑํฉ๋๋ค.
document.createTextNode(target);
// target ์์๋ฅผ element์ ์์์ผ๋ก ์์นํฉ๋๋ค.
element.appendChild(target);
// element์ target ์์ ์์๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
element.removeChild(target);