๐Ÿ“Œํ‘œ๊ธฐ๋ฒ•

- dash-case(kebab-case)

๋‹จ์–ด์™€ ๋‹จ์–ด ์‚ฌ์ด๋ฅผ '-'๋ฅผ ์ด์šฉํ•˜์—ฌ ์—ฐ๊ฒฐ
html๊ณผ css์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ

- snake_Case

๋‹จ์–ด์™€ ๋‹จ์–ด ์‚ฌ์ด์— ์–ธ๋”๋ฐ”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ๊ฒฐ
html๊ณผ css์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ

- camelCase

์ฒซ๊ธ€์ž๋Š” ์†Œ๋ฌธ์ž, ๊ทธ ๋‹ค์Œ๋ถ€ํ„ฐ ์˜ค๋Š” ๋‹จ์–ด๋“ค์€ ๋Œ€๋ฌธ์ž๋กœ
js์—์„œ ์‚ฌ์šฉ

- PascalCase

์ฒซ๊ธ€์ž๋ถ€ํ„ฐ ๋ชจ๋‘ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ๊ธฐ
js์—์„œ ์‚ฌ์šฉ

- zero-based Numbering

0๊ธฐ๋ฐ˜ ๋ฒˆํ˜ธ ๋งค๊ธฐ๊ธฐ. ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ  0๋ถ€ํ„ฐ ์ˆซ์ž๋ฅผ ์‹œ์ž‘ํ•œ๋‹ค.

- ์ฃผ์„

ctrl + /

//ํ•œ ์ค„ ๋ฉ”๋ชจ
/* ํ•œ ์ค„ ๋ฉ”๋ชจ*/

/**
 *์—ฌ๋Ÿฌ ์ค„
 * ๋ฉ”๋ชจ 1
 * ๋ฉ”๋ชจ 2
 */

๐Ÿ“Œ๋ฐ์ดํ„ฐ ์ข…๋ฅ˜(์ž๋ฃŒํ˜•)

- String

๋ฌธ์ž ๋ฐ์ดํ„ฐ. ๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

- Number

์ˆซ์ž ๋ฐ์ดํ„ฐ. ์ •์ˆ˜ ๋ฐ ๋ถ€๋™์†Œ์ˆ˜์  ์ˆซ์ž๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

- Boolean

true, false ๋‘๊ฐ€์ง€ ๊ฐ’๋ฐ–์— ์—†๋Š” ๋…ผ๋ฆฌ ๋ฐ์ดํ„ฐ.

- Undefined

๊ฐ’์ด ํ• ๋‹น๋˜์ง€ ์•Š์€ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ฐ’์ด ์—†๋‹ค.

- Null

์–ด๋–ค ๊ฐ’์ด ์˜๋„์ ์œผ๋กœ ๋น„์–ด์žˆ์Œ ์„ ์˜๋ฏธํ•œ๋‹ค.

- Object

๊ฐ์ฒด ๋ฐ์ดํ„ฐ. ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ {Key:Value} ํ˜•ํƒœ๋กœ ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋“ค์˜ ์ง‘ํ•ฉ.

- Array(๋ฐฐ์—ด ๋ฐ์ดํ„ฐ)

[์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ] ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ €์žฅํ•œ๋‹ค.


๐Ÿ“Œ๋ณ€์ˆ˜

  • ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ์ฐธ์กฐ(์‚ฌ์šฉ)ํ•˜๋Š” ๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„
  • ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๊ฐ’(๋ฐ์ดํ„ฐ)์˜ ์žฌํ• ๋‹น
    • const : ์žฌํ• ๋‹น ๋ถˆ๊ฐ€๋Šฅ
    • let : ์žฌํ• ๋‹น ๊ฐ€๋Šฅ

์˜ˆ์•ฝ์–ด
ํŠน๋ณ„ํ•œ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด, ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜ ์ด๋ฆ„ ๋“ฑ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๋‹จ์–ด
ex) this, if, break...


๐Ÿ“Œํ•จ์ˆ˜ (function)

  • ํŠน์ • ๋™์ž‘(๊ธฐ๋Šฅ)์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ผ๋ถ€ ์ฝ”๋“œ์˜ ์ง‘ํ•ฉ
  • ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•  ๋•Œ๋Š” return ์„ ์‚ฌ์šฉ.
// ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ๊ฐ–๋Š” ํ•จ์ˆ˜

function sum(a, b) {
  // x, y๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜(Parameters)
  return (a + b);
}

let x = sum(1, 2); // 1๊ณผ 2์€ ์ธ์ˆ˜(Arguments)
  • ํ•จ์ˆ˜์„ ์–ธ์„ ํ•  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ๋ถ€๋ถ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ง‘์–ด๋„ฃ์„ ์ˆ˜ ์žˆ๊ณ ,
    ์ง‘์–ด๋„ฃ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์ค€ ๋ณ€์ˆ˜๋ผ๋Š” ๊ฒƒ์„ ์†Œ๊ด„ํ˜ธ ์‚ฌ์ด์— ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
    ํ•จ์ˆ˜ ์•ˆ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์ฃผ๋Š” ๋งค๊ฐœ์ฒด๊ฐ€ ๋˜๋Š” ๋ณ€์ˆ˜๋ผ๊ณ ํ•ด์„œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ผ๊ณ  ํ•˜๊ณ ,
    ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ๋ฐ›์•„์ค„ ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋“ค์„ ์ธ์ˆ˜๋ผ๊ณ  ํ•œ๋‹ค.
// ๊ธฐ๋ช… ํ•จ์ˆ˜
// ํ•จ์ˆ˜ ์„ ์–ธ
function hello(){
 console.log('hello');
}

// ์ต๋ช… ํ•จ์ˆ˜. ๋ฐ์ดํ„ฐ๋กœ์„œ ํ™œ์šฉ. ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜์—ฌ ์‚ฌ์šฉ
// ํ•จ์ˆ˜ ํ‘œํ˜„. ํ•จ์ˆ˜์˜ ์ด๋ฆ„์ด ์—†์œผ๋ฉด ํ•จ์ˆ˜๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค
let world = function (){
  console.log('world');
}
  • ์„ ์–ธ๊ณผ ํ‘œํ˜„์˜ ์ฐจ์ด
  • ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ๋‚ด๋ถ€์— ์†์„ฑ ๋ถ€๋ถ„์— ํ•จ์ˆ˜๊ฐ€ ํ• ๋‹น๋˜์–ด์ ธ ์žˆ์œผ๋ฉด ๋ฉ”์†Œ๋“œ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

๐Ÿ“Œ์กฐ๊ฑด๋ฌธ

์กฐ๊ฑด์˜ ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ตฌ๋ฌธ
if, else ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ๋ฌธ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

if (์กฐ๊ฑด) {
  ๋‚ด์šฉ;
}

๊ด„ํ˜ธ ์•ˆ์˜ ์กฐ๊ฑด์ด true์ด๋ฉด ์‹คํ–‰ํ•œ๋‹ค.


๐Ÿ“ŒDOM API

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML์„ ๋‹ค๋ฃจ๋Š” ๋ช…๋ น๋“ค.
โœ…defer : ๊ฐ€์ ธ์˜จ JSํŒŒ์ผ์„ HTML ๋ฌธ์„œ ๋ถ„์„ ์ดํ›„์— ์‹คํ–‰ํ•˜๋„๋ก ์ง€์‹œํ•˜๋Š” HTML ์†์„ฑ


๐Ÿ“Œ๋ฉ”์†Œ๋“œ ์ฒด์ด๋‹

method chaining
๋ฉ”์†Œ๋“œ๋ฅผ ์ฒด์ธ์ฒ˜๋Ÿผ ์—ฐ๊ฒฐํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•.
๋ถ„๋ฆฌํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์—, ์งง๊ฒŒ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•.

const a = 'Hello~';

//split : ๋ฌธ์ž๋ฅผ ์ธ์ˆ˜ ๊ธฐ์ค€์œผ๋กœ ์ชผ๊ฐœ์„œ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜
//reverse : ๋ฐฐ์—ด์„ ๋’ค์ง‘๊ธฐ
//join : ๋ฐฐ์—ด์„ ์ธ์ˆ˜ ๊ธฐ์ค€์œผ๋กœ ๋ฌธ์ž๋กœ ๋ณ‘ํ•ฉํ•ด 
const b = a.split('').reverse().join(''); // ๋ฉ”์†Œ๋“œ ์ฒด์ด๋‹

console.log(a); //Hello~
console.log(b); //~olleH
profile
๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€