Front/JavaScript

[JavaScript] JS ์—ฐ์‚ฐ์ž

ddo04 2024. 7. 4. 01:52
728x90

๐ŸŽˆโ€Š์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž ์ข…๋ฅ˜

  1. ์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž 
  2. ์ฆ๊ฐ ์—ฐ์‚ฐ์ž
  3. ๋น„๊ต ์—ฐ์‚ฐ์ž
  4. ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž
  5. ์‚ผํ•ญ ์—ฐ์‚ฐ์ž
  6. ๋„๋ฆฌ์‰ฌ ์—ฐ์‚ฐ์ž
  7. ๋น„ํŠธ ์—ฐ์‚ฐ์ž
  8. ๋Œ€์ž… ์—ฐ์‚ฐ์ž

๐ŸŽˆโ€Š์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž

  • +,-,*,/
  • ๋ชจ๋“ˆ๋Ÿฌ(%) , **(์ง€์ˆ˜ ์—ฐ์‚ฐ)
  • ๋‚˜๋ˆ—์…ˆ์„ ํ–ˆ์„ ๋•Œ ๋ชซ์ด ๋˜๋Š” ๊ฐ’
console.log(10 / 5);
  • ๋‚˜๋จธ์ง€ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋“ˆ๋Ÿฌ ํผ์„ผํŠธ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉ
console.log(10 % 5);
  • ์ด ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜๋ˆ—์…ˆ์„ ์‹คํ–‰ํ•œ ๋ชซ์ด ์•„๋‹ˆ๋ผ ๋‚˜๋จธ์ง€ ๊ฐ’์„ ๊ฒฐ๊ณผ๊ฐ’์œผ๋กœ ๊ฐ€์ง€๊ฒŒ ๋จ
  • ์ง€์ˆ˜ ์—ฐ์‚ฐ์ž๋Š” ์•ž์˜ ์ˆซ์ž์— ๋Œ€ํ•œ ์ œ๊ณฑ์„ ํ•˜์—ฌ ๊ฒฐ๊ณผ๊ฐ’์„ ๋‚˜ํƒ€๋‚ด์ฃผ๋Š” ์—ฐ์‚ฐ์ž

๐ŸŽˆโ€Š์ฆ๊ฐ ์—ฐ์‚ฐ์ž

  • ์ˆซ์ž๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๊ฑฐ๋‚˜ ๊ฐ์†Œ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์—ฐ์‚ฐ์ž
  • ++ => +๋ฅผ ์—ฐ๋‹ฌ์•„ ์‚ฌ์šฉํ•˜๋ฉด ์ˆซ์ž ๊ฐ’์ด 1 ์ฆ๊ฐ€
let number = 10;

number++;
console.log(number);
  • -- => -๋ฅผ ์—ฐ๋‹ฌ์•„ ์‚ฌ์šฉํ•˜๋ฉด ์ˆซ์ž ๊ฐ’์ด 1 ๊ฐ์†Œ
let number = 10;

number--;
console.log(number);

๐ŸŽˆโ€Š๋น„๊ต ์—ฐ์‚ฐ์ž

  • ์–ด๋–ค ๊ฒŒ ๋” ํฌ๊ฑฐ๋‚˜ ์ž‘๋‹ค ๋˜๋Š” ๊ฐ™๊ฑฐ๋‚˜ ๊ฐ™์ง€ ์•Š๋‹ค๋ฅผ ๋น„๊ตํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ๋˜๋Š” ์—ฐ์‚ฐ์ž
  • <>๋Š” ๋ถ€๋“ฑํ˜ธ๊ฐ€ ์—ด๋ฆฐ ์ชฝ์ด ๋” ํผ
const a = 10;
const b = 20;

console.log(a < b);
console.log(a > b);
  • <=, >= ๋Š” ํฌ๊ฑฐ๋‚˜ ๊ฐ™๋‹ค, ์ž‘๊ฑฐ๋‚˜ ๊ฐ™๋‹ค๋กœ ํ‘œํ˜„ํ•จ
const a = 10;
const b = 20;

console.log(a <= b);
console.log(a >= b);
  • ==. ===๋Š” ์–‘๋ณ€์ด ๊ฐ™์€์ง€๋ฅผ ๋น„๊ต
  • ํƒ€์ž…์€ ์ˆซ์žํ˜•์œผ๋กœ ๊ฐ™์ง€๋งŒ ๊ฐ’์ด ๋‹ฌ๋ผ false๋กœ ๋‚˜์˜ด
const a = 10;
const b = 20;

console.log(a === b);
a=123 ์ด๊ณ , b='123'์ผ ๋•Œ
a==b ๊ฒฐ๊ณผ๋Š” true(์ถ”์ƒ ๋น„๊ต)
a===b ๊ฒฐ๊ณผ๋Š” false(์—„๊ฒฉ ๋น„๊ต)
  • ๋“ฑํ˜ธ๋ฅผ 2๋ฒˆ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค 3๋ฒˆ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์–‘๋ณ€์— ๊ฐ’์— ํƒ€์ž…๊นŒ์ง€ ์ •ํ™•ํ•˜๊ฒŒ ๋น„๊ต๋ฅผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜์ ์ธ ์ผ€์ด์Šค์—์„œ๋Š” ํ•ญ์ƒ ๋“ฑํ˜ธ 3๊ฐœ์งœ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•จ
  • !==์€ ์–‘๋ณ€์ด ๊ฐ™์€์ง€ ๊ฐ™์ง€ ์•Š์€์ง€๋ฅผ ๋น„๊ต
const a = 10;
const b = 20;

console.log(a !== b);

๐ŸŽˆโ€Š๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž

  • && => ์–‘๋ณ€์— ์žˆ๋Š” ์กฐ๊ฑด์ด๋‚˜ ๊ฐ’์ด ๋ชจ๋‘ ์ฐธ์ผ ๋•Œ๋งŒ ์ฐธ์ด ๋˜๋Š” ์—ฐ์‚ฐ ์ˆ˜ํ–‰
  • || => ์–‘๋ณ€์— ์žˆ๋Š” ์กฐ๊ฑด์ด๋‚˜ ๊ฐ’ ์ค‘์— ํ•˜๋‚˜๋งŒ ์ฐธ์ด์–ด๋„ ์ฐธ์ด ๋˜๋Š” ์—ฐ์‚ฐ ์ˆ˜ํ–‰
  • ! => ํ”ผ ์—ฐ์‚ฐ์ž ์•ž์— ๋ถ™์ด๋Š” ์—ฐ์‚ฐ์ž / ํ”ผ ์—ฐ์‚ฐ์ž์˜ ๊ฐ’์„ ๋ถ€์ •
const a = 2 < 3;
const b = 30 > 50;

console.log(a && b);
console.log(a || b);
console.log(!a);
console.log(!b);

๐ŸŽˆโ€Š์‚ผํ–ฅ ์—ฐ์‚ฐ์ž

  • ์กฐ๊ฑด์˜ ๊ฒฐ๊ณผ๊ฐ€ ์ฐธ์ธ์ง€ ๊ฑฐ์ง“์ธ์ง€์— ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ง€๋Š” ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰
  • 3๊ฐœ์˜ ํ”ผ ์—ฐ์‚ฐ์ž๋ฅผ ๊ฐ€์ง€๋Š” ํŠน์ดํ•œ ์—ฐ์‚ฐ์ž
  • ์•ž์— ์กฐ๊ฑด์„ ๋ช…์‹œํ•˜๊ณ  ๋ฌผ์Œํ‘œ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•œ ๋‹ค์Œ์— ์ฐธ์ผ ๋•Œ ์‹คํ–‰๋  ๋ถ€๋ถ„์„ ์ž‘์„ฑํ•˜๊ณ  ์ฝœ๋ก ์„ ์‚ฌ์šฉํ•œ ํ›„์— ๊ฑฐ์ง“์ผ ๋•Œ ์‹คํ–‰๋œ ๋ถ€๋ถ„์„ ์ž‘์„ฑ
console.log(2 < 3 ? '์ฐธ' : '๊ฑฐ์ง“');
console.log(2 > 3 ? '์ฐธ' : '๊ฑฐ์ง“');

๐ŸŽˆโ€Š๋„๋ฆฌ์‰ฌ ์—ฐ์‚ฐ์ž

  • ๋„ ๋ณ‘ํ•ฉ ์—ฐ์‚ฐ์ž๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•จ
  • ๋ฌผ์Œํ‘œ 2๊ฐœ๋ฅผ ๋ถ™์—ฌ์„œ ์‚ฌ์šฉ
  • ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”ผ์—ฐ์‚ฐ์ž ์ค‘ ๊ฐ’์ด ํ•œ์ •๋˜์–ด ์žˆ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฐพ์Œ
const a = undefined;
const b = null;
const c = '์ด๋„ํ˜œ';

console.log(a ?? b ?? c);
  • underfined, null์ด ์•„๋‹Œ ๊ฒฝ์šฐ๋ฅผ ์ฐพ๋Š” ๊ฒƒ์„ ์˜๋ฏธ
  • ๋„๋ฆฌ์‰ฌ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ๊ฐ์˜ ๋ณ€์ˆ˜๊ฐ€ null ๋˜๋Š” underfined๊ฐ€ ์•„๋‹Œ ์–ด๋–ค ๊ฐ‘์ด ํ™•์ •๋˜์–ด ์žˆ๋Š”์ง€๋ฅผ ์ฒดํฌํ•˜๊ณ  ๊ฐ’์ด ํ™•์ •๋˜์–ด ์žˆ๋‹ค๋ฉด ํ•ด๋‹น ๊ฐ’์„ ์„ ํƒํ•˜๊ฒŒ ๋จ

๐ŸŽˆโ€Š๋น„ํŠธ ์—ฐ์‚ฐ์ž

  • ์ด์ง„ ์—ฐ์‚ฐ 
  • ๋ฐ”์ด๋„ˆ๋ฆฌ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์—ฐ์‚ฐ์ž๋ฅผ ์˜๋ฏธ
  • & => 
  • |
  • ^
  • <<
  • >>
  • ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์˜ ๊ฒฝ์šฐ ๋น„ํŠธ ์—ฐ์‚ฐ์ž๋ฅผ ์ง€์›ํ•˜๊ธด ํ•˜์ง€๋งŒ ์‚ฌ์šฉํ•  ์ผ์ด ๋งŽ์ง€ ์•Š๊ณ  ํ‰์ƒ ์“ฐ์ง€ ์•Š์„ ํ™•๋ฅ ์ด ๋†’๋‹ค

๐ŸŽˆโ€Š๋Œ€์ž… ์—ฐ์‚ฐ์ž

  • =
  • ๋ณตํ•ฉ ๋Œ€์ž… ์—ฐ์‚ฐ์ž => ์ง„์ˆ , ์‚ฐ์ˆ , ๋น„ํŠธ, ๋…ผ๋ฆฌ. ๋„๋ฆฌ์‰ฌ ์—ฐ์‚ฐ์ž์™€ ๋Œ€์ž… ์—ฐ์‚ฐ์ž๋ฅผ ํ•ฉ์ณ์„œ ๋งŒ๋“  ๊ฒƒ์„ ์˜๋ฏธ
  • ๊ฐ ์—ฐ์‚ฐ์ž์˜ ์—ฐ์‚ฐ์ž ๋’ค์— =๋ฅผ ๋ถ™์—ฌ์„œ ๋ณตํ•ฉ ๋Œ€์ž… ์—ฐ์‚ฐ์ž๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Œ

๐ŸŽˆโ€Š์ „๊ฐœ๊ตฌ๋ฌธ(์ „๊ฐœ ์—ฐ์‚ฐ์ž)

  • ๋ฐ˜๋ณต์ด ๊ฐ€๋Šฅํ•œ ์–ด๋–ค ๊ฐ์ฒด์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ๋ฒ•์˜ ํ•œ ์ข…๋ฅ˜
  • ๋ฐ˜๋ณต์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์€ ๋ฐฐ์—ด์ด๋‚˜ ๋ฌธ์ž์—ด์„ ์˜๋ฏธ
  • ์ „๊ฐœ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์š”์†Œ๋ฅผ ๊ฐ๊ฐ ๊บผ๋‚ด์„œ ์ „๊ฐœํ•˜๋Š” ํŽผ์น˜๋Š” ์—ญํ• 
const numbers = [1,2,3];

console.log(...numbers);
  • ๋ฐฐ์—ด ์•ˆ์— ๋‚ด์šฉ์„ ๋‹ค ๊บผ๋‚ด ๊ฐ€์ง€๊ณ  ํŽผ์ณ์„œ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Œ
const numbers = [1,2,3];
const numbers2 = [4,5,6];

const newNumbers = [...numbers, ...numbers2];
console.log(newNumbers);
  • 6๊ฐœ์˜ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๋Š” ๋ฐฐ์—ด์ด ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Œ