๐ฉโ๐ปTIL3. Vanilla JS : ๋ณ์, ๋ฐ์ดํฐ ์ ๋ ฌ
์๋ ๊ธ์ ๋ ธ๋ง๋์ฝ๋ '๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ'๋ฅผ ์๊ฐํ๋ฉฐ ๋ฐฐ์ด ์ ์ ์ ๋ฆฌํ ๊ธ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ๊ณผ ๋ณ์, ๋ฐ์ดํฐ ์ ๋ ฌ์ ํ์ตํ๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
- Java Script์ ๊ฐ๊ฐ์ ์ฝ๋๋ ํ๋์ expression(line)์ ์์ฑ๋์ด์ผํ๋ค.
- ๋ชจ๋ ์ฝ๋์ ๋์ ;(์ธ๋ฏธ์ฝ๋ก )์ผ๋ก ๋๋ธ๋ค.(instruction์ ์ธ)
- ์ฃผ์์ฒ๋ฆฌ ๋ฐฉ๋ฒ : //(ํ ์ค ์ผ๋), /*(์ฌ๋ฌ ์ค์ผ ๋)
/* this is comment
this is comment
this is comment */
๋ณ์ ์ ์ธ ๋ฐฉ์
1. let : ์ฌ์ ์ธ ๊ธ์ง, ์ฌํ ๋น ๊ฐ๋ฅ
2. var : ์ฌ์ ์ธ ๊ฐ๋ฅ, ์ฌํ ๋น ๊ฐ๋ฅ
3. const : ์ฌ์ ์ธ ๊ธ์ง, ์ฌํ ๋น ๊ธ์ง
๋ณ์๋ฅผ ์ ์ธํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๊ณ , ๋ฐฉ๋ฒ์ ๋ฐ๋ผ ์ฌ์ ์ธ, ์ฌํ ๋น ๊ฐ๋ฅ์ฌ๋ถ๊ฐ ๋ฌ๋ผ์ง๋ค.
1. let : ์ฌ์ ์ธ ๊ธ์ง, ์ฌํ ๋น ๊ฐ๋ฅ
let a = 100;
a = 200;
console.log(a);
์ถ๋ ฅ > 200
2. var : ์ฌ์ ์ธ ๊ฐ๋ฅ, ์ฌํ ๋น ๊ฐ๋ฅ
var a = 100;
var a= 200;
console.log(a);
์ถ๋ ฅ > 200
3. const(constant) : ์ฌ์ ์ธ ๊ธ์ง, ์ฌํ ๋น ๊ธ์ง
const a = 100;
console.log(a);
์ถ๋ ฅ > 100
let, var์ ๋ฌ๋ฆฌ ์ด๊ธฐ์ ์ ์ธํ ๋ณ์๋ฅผ ์ ๋ฐ์ดํธ ํ ์ ์๋ค.
๋ณ์์ ๋ฃ์ ์ ์๋ data ์ข ๋ฅ
1. string
const what = "yeji";
๋ณดํต string์ ํ ์คํธ์ด๋ค. " "(ํฐ๋ฐ์ดํ)์์ ์์ฑํ๋ค. ์ซ์๋ฅผ ๋ฃ์ด๋ ํ ์คํธ๋ก ์ธ์ํ๋ค.
2. Boolean
const wat = false;
Boolean์ TRUE/FALSE๊ฐ ๋ง ๊ฐ๋๋ค.
3. ์ซ์
4. Float
const what = 33.333;
์ซ์์ธ๋ฐ ๋ ๋์ด ์์์ ์ ๊ฐ์ง ์๋ฅผ ๋งํ๋ค
๋ณ์ ์์ฑ ๋ฐฉ๋ฒ : Camel Case๐ซ
๋ฏธ๋์ ๋์๊ฒ ๋ฏธ์ ๋ฐ์ง ์์ผ๋ ค๋ฉด ๋ณ์๋ ์ด๋ ๊ฒ ์์ฑํ์! ๋ณ์์ ๋์ด์ฐ๊ธฐ๋ฅผ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ฌธ์๋ก ๋์ฒดํด์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ฒ์์ ์๋ฌธ์๋ก ์์ํ๊ณ , ๋์ด์ฐ๊ธฐ ๋ค์ ์ํ๋ฒณ๋ง ๋๋ฌธ์๋ก ์์ฑํ๋ค. ex) daysOfWeek
๋ฐ์ดํฐ ์ ๋ ฌ ๋ฐฉ๋ฒ
1. array
const Snack = ["Crownsando","Magarette","Diget"];
[ ] ์์ ์ผํ๋ก ๊ตฌ๋ถํด ์์ฑํด์ค๋ค. ๋ฆฌ์คํธ์ ๊ฐ์ด ๋จ์ ๋์ด๋๋ค.
2. object
const crownsando = {flavor:"strawberry",price:2000,isdelicious:true,color:"pink"
}
array์ ๋ค๋ฅธ ์ ์ ๊ฐ data์ label์ ๋ถ์ฌํ ์ ์๋ค๋ ์ ์ด๋ค. { }(์ปฌ๋ฆฌ ๋ธ๋ผ์ผ)์์ ๋ฐ์ดํฐ๋ฅผ ์์ฑํ๋ค. ๋ฐ์ดํฐ๊ฐ ๋ง๊ณ , ๊ทธ ์ค ๋ด๊ฐ ์ํ๋ ์ ๋ณด๋ง ์ฐพ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉด ํจ์จ์ ์ผ ์ ์๊ฒ ๋ค.
object์์ array๋ฅผ ์์ฑํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค! ๊ทธ๋ฆฌ๊ณ ์ปดํจํฐ๋ 0๋ถํฐ ์ซ์๋ฅผ ์ผ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฉโ๐ปTIL3. Vanilla JS : ๋ณ์, ๋ฐ์ดํฐ ์ ๋ ฌ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@yeahg_dev/TIL3.-Vanilla-JS๋ณ์-๋ฐ์ดํฐ-์ ๋ ฌ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค