๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 9 ~ 13, 2021
ํ์ฌ ์ํ
์๋์ผ... ๋ ์ด๊ธ ๊ฐ๋ ์ ๋ ์ตํ์ผ ํด
์ํ์ฝ๋ฉ ์ ์๋ ๊ฐ์๋งํผ ์ฝ๋ค.
๊ฐ์๋ฅผ ์ด๊ธ์ด๋ ์ค๊ธ์ผ๋ก ๋๋์ด ์๋ ๊ฒ ์ฐธ ์ข์๋ค.
์ค๊ธ ๊ฐ์ ๋ณด๊ณ ๋์ ๋๋ฆผ์ฝ๋ฉ ๊ฐ์๋ ๋ค์ ๋์ ํด ๋ด์ผ์ง...
์ด๋ค ์ ๋ณด์ ์ด๋ฆ์ ๋ถ์ฌ์ ์ ์ฅํ๊ณ ์ถ์ ๋ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ค.
ย ย ย ย 1) ๋ณ์๋ ๋ฌธ์, ์ซ์, $, _๋ง ์ฌ์ฉํ ์ ์๋ค.
ย ย ย ย 2) ์ฒซ ๊ธ์๋ ์ซ์๊ฐ ๋ ์ ์๋ค.
ย ย ย ย 3) ์์ฝ์ด (reserved words)๋ ์ฌ์ฉํ ์ ์๋ค.
ย ย ย ย ย ย ย ย ย ex. class, if ๋ฑ
ย ย ย ย 4) ๊ฐ๊ธ์ ์ด๋ฉด ์์๋ ๋๋ฌธ์๋ก ์ ๋ ๊ฒ ์ข๋ค.
ย ย ย ย 5) ๋ณ์๋ช
์ ์ฝ๊ธฐ ์ฝ๊ณ ์ดํดํ ์ ์๊ฒ ์ ์ธํด์ผ ํ๋ค.
alert()
, console.log()
'name'์ด๋ 'age'๊ฐ์ ๋ณ์๋ช
์ ์ ์ผํ๋ค๋ ๋ณด์ฅ์ด ์๊ธฐ ๋๋ฌธ์ ์ค๋ฌด์์ ์ฌ์ฉํ ๋ ์ฃผ์ํด์ผ ํ๋ค.
์ด๋ let์ด๋ const๋ก ๋ณ์๋ช
์ ์ง์ ํ๋ฉด ๋ค์์ error ๋ฌธ๊ตฌ๋ฅผ ํตํด ๋ณ์๋ช
์ด ์ค๋ณต๋๋ ๊ฑธ ํผํ ์ ์๋ค.
Uncaught SyntaxError: Identifier 'name' has already been declared at ~
let
์ ํ ๋ฒ ์ ์ธํ ํ์๋ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ฐ๊ฟ ์ ์๋๋ฐ ์ด๋ด ๋ ์๋์ ์ผ๋ก let์ ์๋ตํ๊ณ ์ ์ผ๋ฉด ๋๋ค.
const
ํ ๋ฒ ์ ์ธํ ํ์ ์ ๋ ๋ฐ๊พธ์ง ์์ ์์๋ฅผ ์
๋ ฅํ ๋ ์ฌ์ฉํ๋ฉฐ, ๋๋ฌธ์๋ก ์ ์ธํ๋ ๊ฒ ์ข๋ค.
ex. ฯ, ์ต๋๊ฐ, ์์ผ ๋ฑ
const SPEED_LIMIT = 100;
๋ชจ๋ ๋ณ์๋ฅผ const๋ก ๋จผ์ ์ ์ธํ๊ณ ๋์ค์ ๋ดค์ ๋ ๋ณ๊ฒฝ๋ ์ฌ์ง๊ฐ ์๋ ๋ณ์๋ฅผ let์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ ๋ฐฉ๋ฒ์ด ์๋ค.
ย ย ย ย ย 1) ๋ฌธ์ํ
ย ย ย ย ย ย ย ย ย (1) ''
, ""
, backtick(``)
ย ย ย ย ย ย ย ย ย (2) ๋ฌธ์ ์์ ์์ ๋ฐ์ดํ๊ฐ ์์ผ๋ฉด ํฐ๋ฐ์ดํ๋ก ๊ฐ์ธ๋ ๊ฒ ์ข๋ค. or ๊ทธ๋๋ก ์์ ๋ฐ์ดํ๋ก ๊ฐ์ธ๋ ๋ด๋ถ์ ์๋ ์์ ๋ฐ์ดํ๋ ์์ back slash๋ฅผ ๋ถ์ด๋ฉด ๋๋ค.
ย ย ย ย ย ย ย ย ย 3) backtick์ ๋ฌธ์์ด ๋ด๋ถ์ ์๋ ๋ณ์๋ฅผ ํ์ํ ๋ ์ฌ์ฉํ๋ฉด ์ข๋ค.
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ex.
My name is ${name};
ย ย ย ย ย 2) ์ซ์ํ
ย ย ย ย ย ย ย ย ย (1) ์ฌ์น์ฐ์ฐ ๊ฐ๋ฅ
ย ย ย ย ย ย ย ย ย ย ย ย ย ย โ ์ซ์๋ฅผ 0์ผ๋ก ๋๋๋ฉด ๊ฒฐ๊ณผ ๊ฐ์ด infinity
ย ย ย ย ย ย ย ย ย ย ย ย ย ย โก ๋ฌธ์์ ์ซ์๋ฅผ ์ฐ์ฐํ๋ฉด ๋ํ๊ธฐ์ ๋๋๊ธฐ ๋นผ๊ณ ๋ ๋ชจ๋ NaN
(Not a Number) ๊ฐ์ด๋ฉฐ, ๋ํ๊ธฐ๋ฅผ ํ๋ฉด ๊ฐ์ด ๋ฌธ์ํ์ผ๋ก ๋ฐ๋๊ณ , ๋๋๊ธฐ๋ฅผ ํ๋ฉด ์๋์ผ๋ก ์๋ฃํ์ด ์ซ์๋ก ๋ณํ๋จ
ย ย ย ย ย ย ย ย ย (2) ์์์ ๊ฐ๋ฅ
ย ย ย ย ย 3) boolean
ย ย ย ย ย ย ย ย ย 1) ์ฐธ
ย ย ย ย ย ย ย ย ย 2) ๊ฑฐ์ง
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ex.
const name = "Mai";
const age = 30;
console.log(name == "May") // false
console.log(age > 40) // false
ย ย ย ย ย 4) null, undefined
ย ย ย ย ย ย ย ย ย (1) null
: ๊ฐ์ด ์กด์ฌํ์ง ์์์ ์๋ฏธํ๋ null๋ ํ๋์ ๊ฐ์
ย ย ย ย ย ย ย ย ย (2) undefined
: ์์ง ๊ฐ์ด ํ ๋น๋์ง ์์์ ์๋ฏธ
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ex.
let rate;
console.log(rate); // undefined โต ๋ณ์๋ฅผ ์ ์ธํ๊ณ ์๋ฌด๊ฒ๋ ํ ๋นํ์ง ์์์
ย ย ย ย 5) ๊ฐ์ฒดํ
ย ย ย ย ย ย ย ย ย ์ถํ ๋ค๋ฃฐ ์์
ย ย ย ย 6) symbolํ
ย ย ย ย ย ย ย ย ย ์ถํ ๋ค๋ฃฐ ์์
โ๏ธ typeof ์ฐ์ฐ์
์๋ฃํ์ ์๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
null์ ๊ฐ์ฒด๊ฐ ์๋์ง๋ง object
๋ก ๋์ด ์ฃผ์ (์ด๊ธฐ version์ ์ค๋ฅ์ด๋ ํธํ์ฑ์ ์ํด ๊ณ์ object๋ก ์ทจ๊ธํ๋ค.)
ย ย ย ย 1) alert()
: 'ํ์ธ' button๋ง ์์
ย ย ย ย 2) prompt()
: ์
๋ ฅ์ฐฝ ์์
ย ย ย ย 3) confirm()
: '์ทจ์'์ 'ํ์ธ' button์ด ์์
ย ย ย ย ย ย ย ย ย ex.
const name = prompt("์ด๋ฆ์ ์
๋ ฅํ์ธ์.");
alert(`์๋
ํ์ธ์, ${name}๋. ํ์ํฉ๋๋ค.`);
const date = prompt("์์ฝ์ผ์ ์
๋ ฅํด ์ฃผ์ธ์.", "2021-08-");
const isAdult = confirm("๋น์ ์ ์ฑ์ธ์
๋๊น?");
// ํ์ธ button โ true
// ์ทจ์ button โ false
์ด๋ ๊ฒ browser๊ฐ ์ ๊ณตํด ์ฃผ๋ ๋ํ์์๋ ํธํ๊ธฐ๋ ํ์ง๋ง ๋จ์ ๋ ์๋ค.
ย ย ย 1) script๊ฐ ์ผ์ ์ ์ง๋จ
ย ย ย 2) styling ํ ์ ์๊ณ browser๋ง๋ค design์ด ๋ค๋ฆ
์ฐ์ฐ์ ๋ฐ๋ผ ์๋ฃํ์ด ๋ณ๊ฒฝ๋๊ณ , ์ด์ ๋ฐ๋ผ ๊ฒฐ๊ณผ๊ฐ ๋ฌ๋ผ์ง ์ ์์ผ๋ฏ๋ก ์ฃผ์ํ๋ค.
์๋ ํ ๋ณํ์ผ๋ก ์ธํด ์์์น ๋ชปํ ๊ฒฐ๊ณผ๊ฐ ๋์ฌ ์ ์์ผ๋ฏ๋ก ๋ช
์์ ํ ๋ณํ์ ํ๋ ๊ฒ ์ข๋ค.
ย ย ย ย 1) String()
: ๊ดํธ ์์ ์๋ฃํ์ ๋ฌธ์๋ก ๋ณํ
ย ย ย ย 2) Number()
: ๊ดํธ ์์ ์๋ฃํ์ ์ซ์๋ก ๋ณํ
ย ย ย ย ย ย ย ย ย ex.
console.log(
Number(true), // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
)
ย ย ย ย ย 3) Boolean()
: true ํน์ false ๊ฐ์ ๋ฐํ
ย ย ย ย ย ย ย ย ย ex.
console.log(
Boolean(0), // false
Boolean('0'), // true
Boolean(""), // false
Boolean(" "), // true
Boolean(null), // false
Boolean(undefined), // false
Boolean(NaN), // false
)
num = num + 5;
= num += 5;
let num = 10;
num -= 5;
console.log(num); // 5
let num = 10;
let result = num++
console.log(result); // 10
let num = 10;
let result = ++num
console.log(result); // 11
๋น๊ต ์ฐ์ฐ์๋ฅผ ํตํด boolean ๊ฐ์ ์ป์ด์ ์กฐ๊ฑด๋ฌธ์ ํ์ฉํ ์ ์๋ค.
ex.
if(age > 18) {
console.log("ํ์ํฉ๋๋ค.");
}
if(age <= 18) {
console.log("์๋
ํ ๊ฐ์ธ์.");
}
if๋ฌธ์ด false์ผ ๋ ์คํ๋๋ค.
ex.
const age = 10;
if(age > 18) {
console.log("ํ์ํฉ๋๋ค.");
} else if(age === 18) {
cnosole.log("์๋ฅ ์ ์น์ธ์.");
} else {
console.log("์๋
ํ ๊ฐ์ธ์.");
}
// โฌ๏ธ Output
// "์๋
ํ ๊ฐ์ธ์."
ย ย ย ย 1) or (||
) : ํ๋๋ง ture์ฌ๋ true
๊ฐ์ ๋ฐํํ๋ฉฐ, ์ฐ์ฐ์์ true๋ฅผ ๋ฐ๊ฒฌํ๋ ์ฆ์ ์ฐ์ฐ์ ๋ฉ์ถค
ย ย ย ย 2) and (&&
) : ํ๋๋ง false์ฌ๋ false
๊ฐ์ ๋ฐํํ๋ฉฐ, ์ฐ์ฐ์์ flase๋ฅผ ๋ฐ๊ฒฌํ๋ ์ฆ์ ์ฐ์ฐ์ ๋ฉ์ถค
ย ย ย ย ย ย ย ย ย ex.
const name = "Mai";
const age = 31;
if(name === "Ian" || age > 19) {
console.log("ํต๊ณผ"); // ํต๊ณผ
}
const name = "Mai";
const age = 31;
if(name === "May" && age > 19) {
console.log("ํต๊ณผ");
} else {
console.log("์ ๋ ๋ง๊ตฌ")
}
// โฌ๏ธ Output
// "์ ๋ ๋ง๊ตฌ"
ย ย ย ย ย 3) not (!
)
ย ย ย ย ย ย ย ย ย ex.
const age = prompt("๋์ด๊ฐ...?");
const isAdult = age > 18;
if(!isAdult) {
console.log("Go back")
}
// โฌ๏ธ Output
// 18 ์ดํ๋ฅผ ์
๋ ฅํ์ ๋๋ง
// "Go back"
// ์ถ๋ ฅ
&&
๊ฐ ||
์ ์ฐ์ ํ๋ค.
// ๋จ์์ด๊ณ , ์ด๋ฆ์ด Sherlock์ด๊ฑฐ๋ ์ฑ์ธ์ด๋ฉด ํต๊ณผ
const gender = "F";
// โฌ๏ธ Output
// "F"์ด๋ฉด "Go back", "M"์ด๋ฉด "ํต๊ณผ"
const name = "Mai";
const isAdult = true;
// ์ด๋ ๊ฒ ์ ์ผ๋ฉด ์ ๋จ
if(gender === "M" && name === "Sherlock" || isAdult) {
// ์๋ํ๋ฉด ์ด๊ฑด ์๋์ ๊ฐ๊ธฐ ๋๋ฌธ : "Sherlock์ด๋ผ๋ ์ด๋ฆ์ ๊ฐ์ง ๋จ์์ด๊ฑฐ๋ ์ด๋ฅธ์ด๋ฉด ํต๊ณผ"
if((gender === "M" && name === "Sherlock") || isAdult) {
// ๐ ๊ทธ๋ฌ๋ฏ๋ก ์๋์ ๊ฐ์ด ์ ์ด์ผ ํจ
if(gender === "M" && (name === "Sherlock" || isAdult) {
console.log("ํต๊ณผ")
} else {
console.log("Go back")
}
๋์ผํ ์์
์ ์ฌ๋ฌ๋ฒ ๋ฐ๋ณตํ ๋ ์ฌ์ฉํ๋ค.
๋ช
ํํ ํ์๊ฐ ์ ํด์ ธ ์์ผ๋ฉด for
๋ฌธ์, ๊ทธ๋ ์ง ์์ผ๋ฉด while
๋ฌธ์ ์ฌ์ฉํ๋ ํธ์ด๋ฉฐ, do while
์ ์ฌ์ฉ ๋น๋๊ฐ ๋ฎ๋ค.
ย ย ย ย 1) for
: for (์ด๊ธฐ๊ฐ ; ์กฐ๊ฑด (false ๋๋ฉด ๋ฉ์ถ๊ณ ๋ฐ๋ณต๋ฌธ์ ๋น ์ ธ๋์ด) ; code ์คํ ํ ์์
)
ย ย ย ย ย ย ย ย ย ex.
// 1 ~ 10 log
for(let i = 0 ; i < 10 ; i++) {
console.log(i+1)
}
// ํน์
for(let i = 1 ; 1 < 11 ; 1++) {
console.log(i)
}
// ํน์
for(let i = 1 ; 1 <= 10 ; 1++) {
console.log(i)
}
ย ย ย ย ย 2) while
// 0 ~ 9 log
let i = 0;
while(i < 10) {
console.log(i);
i++;
}
ย ย ย ย ย 3) do while
: while์ฒ๋ผ ์กฐ๊ฑด ๋จผ์ ํ์ธํ๋ ๊ฒ ์๋, ์ ์ด๋ ํ ๋ฒ์ ์คํํ๊ณ ์กฐ๊ฑด์ ํ์ธํ๋ ๊ฒ while๊ณผ์ ์ฐจ์ด์
โ๏ธ break
๋ฉ์ถ๊ณ ๋ฐ๋ก ๋น ์ ธ๋์จ๋ค.
while(true) {
let answer = confirm("๊ณ์ ํ ๊น์?");
if(!answer) {
break;
}
}
โ๏ธ continue
break
์ฒ๋ผ ๋ฉ์ถ์ง๋ง ๋น ์ ธ๋์ค์ง ์๊ณ ๋ค์ ๋ฐ๋ณต๋ฌธ์ ์คํํ๋ค.
// ์ง์๋ง log
// ์๋์ ๊ฐ์ด ํ๋ฉด 0, 2, 4, 6, 8 log
for(let i = 0 ; i < 10 ; i++) {
if(i%2) {
continue;
}
console.log(i)
}
// ์๋์ ๊ฐ์ด ํ๋ฉด 1, 3, 5, 7, 9 log (continue ์ฐ๊ณ ์ ์ฐ๊ณ ์ฐจ์ด)
for (let i = 0 ; i < 10 ; i++) {
if(i%2)
concole.log(i)
}
switch
๋ if-else
๋ฌธ์ผ๋ก ๋ฐ๊พธ์ด์ ์์ฑํ ์ ์๋ค. (๋ฐ๋๋ก๋ ๋ง์ฐฌ๊ฐ์ง)
๊ทธ๋ผ์๋ ์ฌ์ฉํ๋ ์ด์ ๋ case๊ฐ ๋ค์ํ ๋ ๋ณด๋ค ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
// switch๋ก ์์ฑ
switch(ํ๊ฐ) {
case A :
// A์ผ ๋ code
case B :
// B์ผ ๋ code
...
}
// if๋ก ์์ฑ
if(ํ๊ฐ == A) {
// A์ผ ๋ code
} else if(ํ๊ฐ == B) {
// B์ผ ๋ code
}
// ๊ณผ์ผ ๊ฐ๊ฒฉ ์๋ ค์ฃผ๊ธฐ
let fruit = prompt("๋ฌด์จ ๊ณผ์ผ์ ๊ฐ๊ฒฉ์ด ๊ถ๊ธํ๊ฐ์?");
switch(fruit) {
case "ํ์ฅ" :
console.log("100์์
๋๋ค.");
break;
case "๋ณต์ญ์" :
console.log("200์์
๋๋ค.");
break;
case "๋ฐฐ" :
console.log("300์์
๋๋ค.");
break;
case "๋ฉ๋ก " :
case "๊ทค" :
console.log("400์์
๋๋ค.");
break;
default :
console.log("๊ทธ ๊ณผ์ผ์ ๊ฐ๊ฒฉ์ ๋ชจ๋ฆ
๋๋คใ
ใ
");
}
์ฐ๋ฆฌ๋ ์ด๋ฏธ browser์ ๋ด์ฅ๋์ด ์๋ ํจ์์ธ console
, alert
, confirm
์ ์ฌ์ฉํด ๋ณธ ๋ฐ ์๋ค.
function ํจ์๋ช
(๋งค๊ฐ๋ณ์) {
ํจ์์ ์คํ ์ฝ๋;
}
// ํธ์ถํ ๋
ํจ์๋ช
();
// ex.
function sayHello(name) {
concole.log(`Hello, ${name}`);
}
sayHello("Mai");
ํจ์์์ ๋งค๊ฐ๋ณ์๋ ์์ ์๋ ์๊ณ , 1๊ฐ์ผ ์๋ ์๊ณ , ์ฌ๋ฌ ๊ฐ์ผ ์๋ ์๋ค.
ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ๊ฐํธํด ์ง๋ค.
function showError() {
alert('๋ค์ ์๋ํด ์ฃผ์ธ์.');
}
showError();
์ฆ, ๋งค๋ฒ ์ ๋ ์ค์ code๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์๋๋ผ showError();
๋ง ์ฌ์ฉํ๋ฉด ๋ผ์ ํธ๋ฆฌํ๋ค.
๋ํ ์๋์ ๊ฐ์ด ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋งค๊ฐ๋ณ์๋ง ๋ฐ๊ฟ์ ๋ค๋ฅธ ๊ฐ์ ๋์ถํ ์ ์๋ค.
function sayHello(name) {
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello("Mai"); // "Hello, Mai"
sayHello("Ian"); // "Hello, Ian"
function sayHello(name) {
let msg = "Hello";
if(name) {
msg += `, ${name}`;
}
console.log(msg);
}
sayHello();
sayHello("Mai"); // ์ด์ ๋ถํฐ msg = "Hello, Mai"์ โต ๋งค๊ฐ๋ณ์๋ก ๋ฐ์ ๊ฐ์ ๋ณต์ฌ๋ ํ ํจ์ ๋ด์ ์ง์ญ๋ณ์๊ฐ ๋๊ธฐ ๋๋ฌธ
// ์ง์ญ๋ณ์์ธ msg๋ฅผ ํจ์ ๋ฐ์์ ํธ์ถํ๋ฉด ๋ค์์ error๊ฐ ๋ฐ์ํจ
console.log(msg); // "Uncaught ReferenceError: msg is not defined"
์ง์ญ๋ฒ์์ ์ ์ญ๋ณ์๋ ์๋ก ์ํฅ์ ์ฃผ์ง ์๋๋ค.
let msg = "Welcome";
console.log(msg) // "Welcome"
function sayHello(name) {
let msg = "Hello"
console.log(msg + ' ' + name); // "Hello Mai"
}
sayHello("Mai");
console.log(msg) // ์ code ๋ฌ๋ฆฌ ํจ์ ๋ฐ์ ์๋ let์ ๋ฐ๋ผ ๊ฒฐ๊ณผ๊ฐ "Welcome"์ ("Hello Mai"๊ฐ ์๋)
๋ค์ ํ๋ฒ ์ธ๊ธํ์ง๋ง, ๋งค๊ฐ๋ณ์๋ก ๋ฐ์ ๊ฐ์ ๋ณต์ฌ๋ ํ ํจ์ ๋ด์ ์ง์ญ๋ณ์๊ฐ ๋๋ฏ๋ก ์ ์ฒด service์์ ๊ณตํต์ผ๋ก ๋ฐ๋ผ๋ด์ผ ํ๋ ๋ณ์๋ฅผ ์ ์ธํ๊ณ ๋ ์ง์ญ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ข๋ค. ์ ์ญ๋ณ์๊ฐ ๋ง์์ง๋ง ๊ด๋ฆฌํ๊ธฐ ํ๋๋ฏ๋ก ํจ์์ ํนํ๋ ์ง์ญ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ข๋ค.
// (1)
function sayHello(name) {
let newName = name || "dude"; // : ๋งค๊ฐ๋ณ์ name์ด ์์ผ๋ฉด name์ด newName, name์ด ์์ผ๋ฉด "dude"
let msg = `Hello, ${newName}`
console.log(msg)
}
sayHello(); // "Hello, dude"
sayHello("Mai"); // "Hello, Mai"
// (2)
function sayHello(name = "dude") { // name์ด ์์ผ๋ฉด ํ ๋น๋๋ "dude"
let msg = `Hello, ${name}`
console.log(msg)
}
sayHello(); // "Hello, dude"
sayHello("Mai"); // "Hello, Mai"
function add(num1, num2) {
return num1 + num2;
}
const result = add(4, 7);
console.log(result) // 11
return
์ด ์๊ฑฐ๋ return;
์ด๋ผ๊ณ ๋ง ํ๋ฉด undefined
์ผ๋ก ๋ฐํํ๊ธฐ๋ ํ๋ค. cf. ์์์ ํ๋function showError()
return
์ ๊ทธ ์ค๋ฅธ์ชฝ์ ์๋ ๊ฐ์ ๋ฐํํ๊ณ ์ข
๋ฃํ๊ธฐ ๋๋ฌธ์ ํจ์๋ฅผ ์ข
๋ฃํ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ๋ ํ๋ค.
ex.
function showError() {
alert("์ค๋ฅ๊ฐ ๋ฐ์ํ์์ต๋๋ค.");
return;
alert("์ด code๋ ์ ๋ ์คํ๋์ง ์์ต๋๋ค.");
}
const result = showError();
console.log(result); // "์ค๋ฅ๊ฐ ๋ฐ์ํ์์ต๋๋ค."๋ผ๋ ์๋ด๊ฐ ์ ํ ๊ฒฝ๊ณ ์ฐฝ
ํจ์๋ ํ ๋ฒ์ ํ ์์
๋ง ํ๋๋ก code๋ฅผ ์ง๋ ๊ฒ ์ข๋ค. ์ฌ๋ฌ ๊ฐ ์์ผ๋ฉด ๋๋๋ ๊ฑธ ์ถ์ฒํ๋ค.
๋ณ์์ฒ๋ผ ํจ์๋ช
์ญ์ ใ
๋ฆญ๊ธฐ ์ฝ๊ณ ์ด๋ค ๋์์ธ์ง ์ ์ ์๊ฒ ์ง๋ ๊ฒ ์ข๋ค.
ex.
showError
, getName
, createUesrData
, checkLogin
๋ฑ
์์์ ์์ฑํ ํจ์๋ 'ํจ์ ์ ์ธ๋ฌธ'์ด๊ณ , ์ด ์ธ์ 'ํจ์ ํํ์'์ด ์๋ค.
์ด๋ฆ์ด ์๋ ํจ์๋ฅผ ๋ง๋ค๊ณ function() {console.log("Hello");}
์ด ํจ์๋ฅผ ๋ณ์์ ํ ๋นํจ let sayHello
// ์ฆ
let sayHello = function() {
console.log("Hello");
}
sayHello();
// ์์ code๋ ์๋์ ํจ์์ ๋์ผํ๋ฉฐ ํจ์ ํธ์ถ ๋ฐฉ์์ด๋ ๋์ํ๋ ๋ฐฉ์์ด ๋์ผํจ
function sayHello() {
console.log("Hello");
}
sayHello();
ํจ์ ์ ์ธ๋ฌธ๊ณผ ํจ์ ํํ์์ ์ฐจ์ด๋ ํจ์๋ฅผ ํธ์ถํ๋ timing์ด๋ค.
ํจ์ ์ ์ธ๋ฌธ์ hoisting ๋๋ถ์ ์ด๋์์๋ ํธ์ถํ ์ ์์ง๋ง ํจ์ ํํ์์ ํจ์๋ณด๋ค ํธ์ถ์ด ๋จผ์ ์ฝํ๋ฉด ์ค๋ฅ๊ฐ ์๊ธด๋ค.
JavaScript๋ ์์์ ์๋๋ก ํ ์ค์ฉ ์์ฐจ์ ์ผ๋ก ์คํ๋๋ฉฐ ์ฆ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ interpreted language์ด๋ค. ๊ทธ๋์ ๋ค์์ code๋ ์ค๋ฅ๊ฐ ์๊ธด๋ค.
console.log(num); // ์์ง let์ด๋ผ๋ ๋ณ์๋ฅผ ๋ง๋์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ "Error. num is not defined"์ด๋ผ๋ ์ค๋ฅ๊ฐ ๋๋ค.
let num = 1;
ํ์ง๋ง ๋ค์์ code๋ ์ค๋ฅ ์์ด ๊ฒฐ๊ณผ๊ฐ ์ ๋์จ๋ค.
sayHello();
function sayHello() {
console.log("Hello");
}
๊ทธ ์ด์ ๋ JavaScript๊ฐ interpreted language์ด๊ธฐ๋ ํ์ง๋ง JS๊ฐ code์ ๋ชจ๋ ํจ์ ์ ์ธ๋ฌธ์ ์ฐพ์์ ๋ฏธ๋ฆฌ ์์ฑํด ๋๊ธฐ ๋๋ฌธ์ด๋ค. (hoisting)
ํ์ง๋ง ํจ์ ํํ์์ code์ ๋๋ฌํด์ผ ์์ฑ๋ผ๊ธฐ ๋๋ฌธ์ ํจ์๋ฅผ ์ ์ธํ๊ธฐ ์ ์ ํจ์๋ฅผ ํธ์ถํ๋ฉด ์ค๋ฅ๊ฐ ์๊ธฐ๋ฏ๋ก ํจ์๊ฐ ์ ์ธ๋ ํ์ ํจ์๋ฅผ ํธ์ถํ ์ ์๋ค.
๊ทธ๋์ ํจ์ ์ ์ธ๋ฌธ์ด ์์ ๋๊ฐ ๋ ๋๋ค.
// (1)
let sayHello = (name) => `Hello, ${name}` // ์ธ์๊ฐ ํ๋๋ฉด ๊ดํธ๋ฅผ ์๋ตํ ์ ์๋ค.
โ
let sayHello = name => `Hello, ${name}`
// (2)
let showError = () => { // ์ธ์๊ฐ ์์ผ๋ฉด ๊ดํธ๋ฅผ ์๋ตํ ์ ์๋ค.
alert("error");
}
// ์กฐ๊ธ ๋ ๊ธด ์์
// (1)
function showError() {
console.log("error");
};
โ
let showError() => {
console.log("error");
};
// (2)
const sayHello = function (name) {
const msg = `Hello, ${name}`;
console.log(msg);
};
โ
const sayHello = (name) => {
const msg = `Hello, ${name}`;
console.log(msg);
};
// (3)
const add = function(num1, num2) {
const result = num1 + num2;
return result;
};
โ
const add = (num1, num2) => {
const result = num1 + num2;
return result;
};
โ
const add = (num1, num2) => (num1 + num2);
โ
const add = (num1, num2) => num1 + num2; // return๊ณผ ์ค๊ดํธ๋ฅผ ์์ ๋ฉด์ ์๊ดํธ๋ฅผ ์ ์ด์ผ ํ๋๋ฐ, return๋ฌธ์ด ํ ์ค์ด๋ผ๋ฉด ์ด ๋ง์ ๋ ํ์ ์์, ์ค๊ดํธ ๋ฐ๋ก ๋ค์์ return์ด ์ค๋ฉด return๊ณผ ์ค๊ดํธ๋ฅผ ์์จ ์ ์์ผ๋ return ์ ์ ์ฌ๋ฌ ์ค์ code๊ฐ ์์ผ๋ฉด return๊ณผ ์ค๊ดํธ๋ฅผ ์๋ตํ ์ ์์
// ์๋์ ๊ฐ์ ๊ฐ์ฒด๋ฅผ '๊ฐ์ฒด literal'์ด๋ผ๊ณ ํจ
const superman = {
name : "clark",
age : 30,
}
const superman = {
name : "clark",
age : 30,
}
// ๊ฐ property์ ์ ๊ทผํด ๋ณด๋ฉด
console.log(superman.name) // clark
console.log(superman["age"]) // 30
// ๊ฐ์ฒด ์์ฒด๋ฅผ ๋ถ๋ฌ๋ณด๋ฉด
console.log(superman)
// โฌ๏ธ Output
// Object {
// age: 30,
// name: "clark"
// }
// (1) ์ถ๊ฐ
const superman = {
name : "clark",
age : 30,
}
superman.hairColor = "black";
superman["hobby"] = "footbal";
console.log(superman);
// โฌ๏ธ Output
// Object {
// age: 30,
// hairColor: "black"
// hobby: "football"
// name: "clark"
// }
// (2) ์ญ์
const superman = {
name : "clark",
age : 30,
}
delete superman.age;
console.log(superman)
// โฌ๏ธ Output
// Object {
// name: "clark"
// }
function makeObject(name, age) {
return {
name,
age,
hobby: "ballet"
};
}
const Mai = makeObject("Mai", 30);
console.log(Mai);
// โฌ๏ธ Output
// Object {
// age: "30"
// hobby: "ballet"
// name: "Mai"
// }
function makeObject(name, age) {
return {
name,
age,
hobby: "ballet"
};
}
const Mai = makeObject("Mai", 30);
console.log(Mai);
// key๊ฐ ์กด์ฌํ๋์ง ํ์ธ
console.log("age" in Mai); // trute
console.log("birthday" in Mai); // false
์ด๋ฅผ ํ์ฉํด ์ฑ๋ ์ด ์ง๋ฌ๋์ง ํ์ธํ๋ code ์์ฑ ๊ฐ๋ฅ
// key ๊ฐ์ ๋์ด๊ฐ ์์ผ๋ฉด ์ผ๋จ false๋ก ๋ฐํํ๊ธฐ
function isAdult(user) {
if(!("age" in user) || user.age < 20) {
// ๊ทธ๋ฅ 'if (user.age < 20) {' ์ด๋ ๊ฒ๋ง ํ๋ฉด 'age๊ฐ ์๋ ๊ฒ์ด 20๋ณด๋ค ์์'์ผ๋ก ์ฒ๋ฆฌ๋ผ์ true๊ฐ ๋์ด๋ฒ๋ฆฌ๋ฏ๋ก 'age'๊ฐ ์๋ ๊ฒ์ false๋ก ๋ฐํํ๋ผ๋ ๊ฒ์ ์ ์ด์ค์ผ ํจ : '!("age" in user)'
return false;
}
return true;
}
const Ian = {
name : "Ian",
age : 30
};
const Mai = {
name : "Mai"
};
console.log(isAdult(Ian)) // true
console.log(isAdult(Mai)) // false
const superman = {
name : "clark",
age : 30,
}
for (key in superman) {
console.log(key) // "name", "age"
}
for (key in superman) {
console.log(superman[key]) // "clark", "30"
}
๊ฐ์ฒด property๋ก ํ ๋น๋ ํจ์
const superman = {
name : "clark",
age : 33,
fly : function() { // fly()๊ฐ 'superman' ๊ฐ์ฒด์ method : superman.fly() (' : function'์ ์๋ต ๊ฐ๋ฅ)
console.log("๋ ์๊ฐ๋๋ค.")
}
}
method์ property๋ฅผ ๋ฃ์ผ๋ ค๋ฉด
const user = {
name : "Mai",
sayHello : function() {
console.log(`Hello, I'm ${user.name}`);
}
}
user.sayHello(); // "Hello, I'm Mai"
Hello, I'm ${user.name}
๋์ Hello, I'm ${this.name}
์ผ๋ก ์์ฑํ๋ ๊ฒ์ด ์ข๋ค.
ํ์ง๋ง ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด this๊ฐ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฅดํค์ง ์๊ณ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌ์ผ ๊ฒฐ๊ณผ๊ฐ ๋ฌ๋ผ์ง๋ค.
์๋ํ๋ฉด ํ์ดํ ํจ์๋ ์ผ๋ฐ ํจ์์ ๋ฌ๋ฆฌ ์์ ๋ง์ this๊ฐ ์์ด์ this
๋ฅผ ์ฐ๋ฉด window (browser) ๋ global (Node.js) ์ ๊ฐ๋ฆฌํค๊ธฐ ๋๋ฌธ์ด๋ค.
๋ค์๊ณผ ๊ฐ์ด ์ฌ๋ฌ๊ฐ์ง ๋ณ์๋ก ํ๋์ ๊ฐ์ฒด์ ์ ๊ทผํ ์ ์๋ค.
let boy = {
name : "Ian",
showName : function () {
console.log(boy.name)
}
}
let guy = boy;
guy.showName(); // "Ian"
guy.name = "Nick"
console.log(boy.name); // "Nick"
method์์ ๊ฐ์ฒด๋ช
์ ์จ์ฃผ๊ธฐ๋ณด๋ค this
๋ฅผ ์ฐ๋ ๊ฒ ์ข์ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ๋ค.
let boy = {
name : "Ian",
showName : function () {
console.log(boy.name)
}
}
// ์์ฒ๋ผ method์ ๊ฐ์ฒด๋ช
์ ์ฐ๋ฉด ์๋์ ๊ฐ์ด ๋ณ์๋ฅผ ์ค์ ํ์ ๋ method๋ฅผ ํธ์ถํ์ ๋์ค๋ฅ๊ฐ ์๊น
let guy = boy;
boy = null; // boy๊ฐ null์ด๋๊น guy๋ก๋ง ๊ฐ์ฒด์ ์ ๊ทผํ ์ ์์
guy.showName(); // "Uncaught TypeError: Cannot read property 'name' of null"
// โ ๋ฐ๋ฉด
let boy = {
name : "Ian",
showName : function () {
console.log(this.name)
}
}
// ์์ ๊ฐ์ผ๋ฉด ์๋์ ๊ฐ์ด ๋ณ์๋ฅผ ์ค์ ํ์ ๋
let guy = boy;
boy = null; // boy๊ฐ null์ด๋๊น guy๋ก๋ง ๊ฐ์ฒด์ ์ ๊ทผํ ์ ์์
guy.showName(); // "Ian"
ํ์ง๋ง ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด (browser์์) Window๋ฅผ ๊ฐ๋ฆฌํฌ ๋ฟ, ๊ฐ์ฒด๋ฅผ ๋ถ๋ฌ์ค์ง ์๋๋ค.
let boy = {
name : "Ian",
sayThis : function () {
console.log(this);
}
};
boy.sayThis();
// โฌ๏ธ Output
// Object {
// name: "Ian",
// sayThis : function () {โ๏ธ}
//}
// โ ํ์ดํ ํจ์๋ก ๋ฐ๊พธ๋ฉด
let boy = {
name : "Ian",
sayThis : () => {
console.log(this);
}
};
boy.sayThis()
// โฌ๏ธ Output
// Window
๊ทธ๋ฌ๋ฏ๋ก this
๋ก ๊ฐ์ฒด์ ์ ๊ทผํด์ผ ํ๋ค๋ฉด method์ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ์ง ์์์ผ ํ๋ค.
์์๊ฐ ์๋ list
let days = ["mon", "tue", "wed", "thu"];
console.log(daysp[3]); // "thu"
days[3] = "๋ชฉ์์ผ"
console.log(days); // ["mon", "tue", "wed", "๋ชฉ์์ผ"]
๋ฐฐ์ด์ ๋ฌธ์, ์ซ์, ๊ฐ์ฒด, ํจ์ ๋ฑ์ ๋ชจ๋ ํฌํจํ ์ ์๋ค.
๋ฐฐ์ด์ ์ฌ์ฉํ๋ ๊ฐ์ฅ ํฐ ์ด์ ๋ ๋ฐ๋ณต์ ํด๊ฒฐํ๊ธฐ ์ํด์์ด๋ค.
๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ๊ตฌํ ์ ์๋ค. ์์์ ๊ฐ์๋ฅผ ๋ฐํํ๋ค.
let days = ["mon", "tue", "wed", "thu"];
console.log(days.length); // 4
push()
: ๋ฐฐ์ด ๋์ ์์๋ฅผ ์ถ๊ฐpop()
: ๋ฐฐ์ด ๋์ ์์๋ฅผ ์ ๊ฑฐunshift()
: ๋ฐฐ์ด ๋งจ ์์ ์์๋ฅผ ์ถ๊ฐshift()
: ๋ฐฐ์ด ๋งจ ์์ ์์๋ฅผ ์ ๊ฑฐlet days = ["mon", "tue", "wed", "thu"];
days.push("fri");
console.log(days); // ["mon", "tue", "wed", "thu", "fri"]
days.unshift("sun");
console.log(days); // ["sun", "mon", "tue", "wed", "thu", "fri"]
let days = ["mon", "tue", "wed", "thu"];
days.push("fri");
days.unshift("sun");
for (let index = 0 ; index < days.length; index++) {
console.log(days[index]);
}
// โฌ๏ธ Output
// "sun"
// "mon"
// "tue"
// "wed"
// "thu"
// "fri"
array ์ญ์ ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ์ for ... in
์ ์ฌ์ฉํด๋ ๋์ง๋ง ๋จ์ ์ด ๋ง๊ธฐ ๋๋ฌธ์ for ... of
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
๐ง ์ด๋ค ๋จ์ ์ด ์๋ ๊ฑฐ์ง์ด...? ๐ง
for ... of
๋ for
๋ณด๋ค ๊ฐ๋จํ์ง๋ง index๋ฅผ ์ป์ ์ ์๋ค.
let days = ["mon", "tue", "wed", "thu"];
days.push("fri");
days.unshift("sun");
for (let ddd of days) {
console.log(ddd);
}
// โ Output
// "sun"
// "mon"
// "tue"
// "wed"
// "thu"
// "fri"