๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Language/Javascript

[Javascript]์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž ์™„๋ฒฝ ๊ฐ€์ด๋“œ

by YJ Dev 2024. 6. 13.
728x90
๋ฐ˜์‘ํ˜•
SMALL

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์™€ ๊ฐ’์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐ ์žˆ์–ด ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ ๋‹ค๋ฃจ๋Š” ๋‹ค์–‘ํ•œ ์—ฐ์‚ฐ์ž์˜ ์„ค๋ช…์„ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž๋ฅผ ์™„๋ฒฝํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž


01. ๊ธฐ๋ณธ ์—ฐ์‚ฐ์ž๐Ÿ”ข

1. ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž

JavaScript์—์„œ์˜ ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์žํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ˆ˜ํ•™์ ์ธ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ฃผ์š” ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

1. ๋ง์…ˆ (+)

๋ง์…ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์ž๋ฅผ ๋”ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

let a = 5;
let b = 3;

let sum = a + b; // 5 + 3
console.log(sum); // ์ถœ๋ ฅ: 8

2. ๋บ„์…ˆ (-)

๋บ„์…ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์ž๋ฅผ ๋นผ๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

let a = 10;
let b = 4;

let difference = a - b; // 10 - 4
console.log(difference); // ์ถœ๋ ฅ: 6

3. ๊ณฑ์…ˆ (*)

๊ณฑ์…ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์ž๋ฅผ ๊ณฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

let a = 7;
let b = 2;

let product = a * b; // 7 * 2
console.log(product); // ์ถœ๋ ฅ: 14

4. ๋‚˜๋ˆ—์…ˆ (/)

๋‚˜๋ˆ—์…ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์ž๋ฅผ ๋‚˜๋ˆ„๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

let a = 10;
let b = 3;

let quotient = a / b; // 10 / 3
console.log(quotient); // ์ถœ๋ ฅ: ์•ฝ 3.3333

5. ๋‚˜๋จธ์ง€ (%)

๋‚˜๋จธ์ง€ ์—ฐ์‚ฐ์ž๋Š” ๋‚˜๋ˆ—์…ˆ์˜ ๋‚˜๋จธ์ง€ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

let a = 10;
let b = 3;

let remainder = a % b; // 10์„ 3์œผ๋กœ ๋‚˜๋ˆˆ ๋‚˜๋จธ์ง€
console.log(remainder); // ์ถœ๋ ฅ: 1

์ฃผ์˜์‚ฌํ•ญ

  • ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์žํ˜• ๋ฐ์ดํ„ฐ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ํฌํ•จํ•œ ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋™์œผ๋กœ ์ˆซ์žํ˜•์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.
  • ๋‚˜๋ˆ—์…ˆ ์—ฐ์‚ฐ์ž์—์„œ 0์œผ๋กœ ๋‚˜๋ˆ„๋Š” ๊ฒฝ์šฐ Infinity๊ฐ€ ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค. 0์œผ๋กœ ๋‚˜๋ˆŒ ๋•Œ๋Š” ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • JavaScript์—์„œ๋Š” ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ณ ๋ คํ•˜์—ฌ ์—ฐ์‚ฐ์ด ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. ๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ์‚ฐ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์‚ฐ์ˆ ์—ฐ์‚ฐ์ž๋“ค์„ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜์—ฌ ์ˆซ์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ณ  ๊ณ„์‚ฐํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


2. ์ฆ๊ฐ ์—ฐ์‚ฐ์ž

์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ค๊ฑฐ๋‚˜ ๊ฐ์†Œ์‹œํ‚ค๋Š” ๋‹จํ•ญ ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค. JavaScript์—์„œ๋Š” ๋‘ ๊ฐ€์ง€ ํ˜•ํƒœ์˜ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž์™€ ํ›„์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค.

1. ์ „์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž (++)

์ „์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋จผ์ € ์ฆ๊ฐ€์‹œํ‚จ ํ›„, ๊ทธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

let a = 5;
let b = ++a;

console.log(a); // ์ถœ๋ ฅ: 6
console.log(b); // ์ถœ๋ ฅ: 6

์œ„ ์˜ˆ์ œ์—์„œ ++a๋Š” ๋ณ€์ˆ˜ a์˜ ๊ฐ’์„ 1 ์ฆ๊ฐ€์‹œํ‚จ ํ›„์—, ์ฆ๊ฐ€๋œ ๊ฐ’์„ ๋ณ€์ˆ˜ b์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ a์™€ b์˜ ๊ฐ’์€ ๋ชจ๋‘ 6์ด ๋ฉ๋‹ˆ๋‹ค.


2. ํ›„์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž (--)

ํ›„์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋จผ์ € ๋ฐ˜ํ™˜ํ•œ ํ›„, ๊ทธ ํ›„์— ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค.

let a = 5;
let b = a--;

console.log(a); // ์ถœ๋ ฅ: 4
console.log(b); // ์ถœ๋ ฅ: 5

์œ„ ์˜ˆ์ œ์—์„œ a--๋Š” ๋ณ€์ˆ˜ a์˜ ๊ฐ’์„ ๋ณ€์ˆ˜ b์— ํ• ๋‹นํ•œ ํ›„์—, ๋ณ€์ˆ˜ a์˜ ๊ฐ’์„ 1 ๊ฐ์†Œ์‹œํ‚ต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ a๋Š” 4๊ฐ€ ๋˜๊ณ  b๋Š” 5๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.


์—ฐ์‚ฐ์ž์˜ ์œ„์น˜

  • ์„ค๋ช…: ์ฆ๊ฐ ์—ฐ์‚ฐ์ž์˜ ์œ„์น˜์— ๋”ฐ๋ผ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜ˆ์ œ
let result = 1;
console.log(result); // 1

result = number++;
console.log(result, number); // 1 2

result = number--;
console.log(result, number); // 2 1

result = ++number;
console.log(result, number); // 2 2

result = --number;
console.log(result, number); // 1 1

์ฃผ์˜์‚ฌํ•ญ

  • ์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋‹จํ•ญ ์—ฐ์‚ฐ์ž์ด๋ฏ€๋กœ, ์‚ฌ์šฉ ์‹œ ๋ณ€์ˆ˜๋งŒ ํ”ผ์—ฐ์‚ฐ์ž๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • ์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ถ€์ž‘์šฉ์ด ์žˆ์œผ๋ฏ€๋กœ, ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ์„ ์œ„ํ•ด ์ ์ ˆํžˆ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ค๊ฑฐ๋‚˜ ๊ฐ์†Œ์‹œํ‚ฌ ๋•Œ, ์ „์œ„์™€ ํ›„์œ„์˜ ์ฐจ์ด์ ์„ ์ดํ•ดํ•˜๊ณ  ์ ์ ˆํžˆ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ฆ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋ฐ˜๋ณต๋ฌธ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋ณ€์ˆ˜๋ฅผ ํ•œ ๋ฒˆ์— ์ฆ๊ฐ€์‹œํ‚ค๊ฑฐ๋‚˜ ๊ฐ์†Œ์‹œํ‚ค๋Š” ๊ฐ„ํŽธํ•œ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.


์ˆซ์ž ํƒ€์ž…์ด ์•„๋‹Œ ํƒ€์ž…์— +, - ์‚ฌ์šฉํ•œ๋‹ค๋ฉด?

JavaScript์—์„œ ์ˆซ์ž ํƒ€์ž…์ด ์•„๋‹Œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์— +์™€ - ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ์ด ์—ฐ์‚ฐ์ž๋“ค์€ ํ•ด๋‹น ๋ฐ์ดํ„ฐ ํƒ€์ž…์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

1. ๋ฌธ์ž์—ด๊ณผ + ์—ฐ์‚ฐ์ž

+ ์—ฐ์‚ฐ์ž๋Š” ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ(concatenation)์— ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ž์—ด๊ณผ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ +๋กœ ๊ฒฐํ•ฉํ•˜๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

let str = 'Hello';
let num = 10;

console.log(str + num); // ์ถœ๋ ฅ: "Hello10"
console.log(str + true); // ์ถœ๋ ฅ: "Hellotrue"
console.log(str + { key: 'value' }); // ์ถœ๋ ฅ: "Hello[object Object]"

์œ„ ์˜ˆ์‹œ์—์„œ + ์—ฐ์‚ฐ์ž๋Š” ๋ฌธ์ž์—ด๊ณผ ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ, ๊ฐ์ฒด ๋“ฑ์„ ๊ฒฐํ•ฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋Š” ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜๋˜์–ด ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค.


2. ๋ฌธ์ž์—ด๊ณผ - ์—ฐ์‚ฐ์ž

- ์—ฐ์‚ฐ์ž๋Š” ์ˆซ์ž ์—ฐ์‚ฐ์—๋งŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ๋ฌธ์ž์—ด๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ์ˆซ์ž๋กœ ๋ณ€ํ™˜๋˜์–ด ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค.

let str = '10';
let num = 5;

console.log(str - num); // ์ถœ๋ ฅ: 5 (๋ฌธ์ž์—ด '10'์„ ์ˆซ์ž 10์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๊ณ„์‚ฐ)
console.log('Hello' - 'World'); // ์ถœ๋ ฅ: NaN (๋ฌธ์ž์—ด์„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ NaN ๋ฐ˜ํ™˜)

์œ„ ์˜ˆ์‹œ์—์„œ '10' - 5๋Š” '10'์„ ์ˆซ์ž 10์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ 5๋ฅผ ๋นผ์„œ 5๋ฅผ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค. 'Hello' - 'World'๋Š” ๋ฌธ์ž์—ด์„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ NaN(Not a Number)์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.


3. ๊ฐ์ฒด์™€ +, - ์—ฐ์‚ฐ์ž

๊ฐ์ฒด์— + ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ(concatenation)์ด ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.

let obj = { key: 'value' };

console.log(obj + ' additional text'); // ์ถœ๋ ฅ: "[object Object] additional text"

๊ฐ์ฒด์™€ +, - ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, JavaScript๋Š” ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” [object Object]์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.


๊ฒฐ๋ก 

JavaScript์—์„œ +์™€ - ์—ฐ์‚ฐ์ž๋Š” ์ฃผ๋กœ ์ˆซ์žํ˜• ๋ฐ์ดํ„ฐ ํƒ€์ž…์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์— ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—๋Š” ์ž๋™์œผ๋กœ ํ˜• ๋ณ€ํ™˜์ด ์ด๋ฃจ์–ด์ง€๋ฉฐ ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ(concatenation)์ด ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์— ๋”ฐ๋ผ ์—ฐ์‚ฐ์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๋‚˜์˜ค๋ฏ€๋กœ ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.


02. ํ• ๋‹น ์—ฐ์‚ฐ์ž๐Ÿ› ๏ธ

ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. JavaScript์—์„œ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

1. ๊ธฐ๋ณธํ• ๋‹น ์—ฐ์‚ฐ์ž (=)

  • ๊ธฐ๋ณธ ํ• ๋‹น ์—ฐ์‚ฐ์ž(=)๋Š” ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํ˜•ํƒœ์˜ ํ• ๋‹น ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค.
let x = 10;
let y = 'Hello';
let z = true;

์œ„ ์˜ˆ์‹œ์—์„œ = ์—ฐ์‚ฐ์ž๋Š” ์˜ค๋ฅธ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž(๊ฐ’)๋ฅผ ์™ผ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž(๋ณ€์ˆ˜)์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.


2. ์‚ฐ์ˆ  ์—ฐ์‚ฐ๊ณผ ํ•จ๊ป˜ ํ• ๋‹น (+=, -=, *=, /=, %=)

์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž์™€ ๊ฒฐํ•ฉํ•˜์—ฌ ๊ฐ’์„ ๊ณ„์‚ฐํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ์—ฐ์‚ฐ์ž๋“ค์ž…๋‹ˆ๋‹ค.

let a = 5;
a += 3; // a = a + 3;
console.log(a); // ์ถœ๋ ฅ: 8

let b = 10;
b -= 4; // b = b - 4;
console.log(b); // ์ถœ๋ ฅ: 6

let c = 3;
c *= 2; // c = c * 2;
console.log(c); // ์ถœ๋ ฅ: 6

let d = 10;
d /= 5; // d = d / 5;
console.log(d); // ์ถœ๋ ฅ: 2

let e = 15;
e %= 4; // e = e % 4;
console.log(e); // ์ถœ๋ ฅ: 3

์ด ์—ฐ์‚ฐ์ž๋“ค์€ ๊ฐ๊ฐ ๋ง์…ˆ(+=), ๋บ„์…ˆ(-=), ๊ณฑ์…ˆ(*=), ๋‚˜๋ˆ—์…ˆ(/=), ๋‚˜๋จธ์ง€(%) ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•œ ํ›„, ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.


3. ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ ํ• ๋‹น (+=)

๋ฌธ์ž์—ด ์—ฐ๊ฒฐ์— ์‚ฌ์šฉ๋˜์–ด ๋ฌธ์ž์—ด๊ณผ ๋ณ€์ˆ˜ ๋˜๋Š” ๋‹ค๋ฅธ ๊ฐ’๋“ค์„ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ฌธ์ž์—ด๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

let str = 'Hello';
str += ' World';
console.log(str); // ์ถœ๋ ฅ: "Hello World"

4. ๋น„ํŠธ ์—ฐ์‚ฐ ํ• ๋‹น (<<=, >>=, >>>=, &=, |=, ^=)

๋น„ํŠธ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ์—ฐ์‚ฐ์ž๋“ค์ž…๋‹ˆ๋‹ค. ๊ฐ ์—ฐ์‚ฐ์ž๋Š” ๋น„ํŠธ ์‹œํ”„ํŠธ, ๋น„ํŠธ AND, OR, XOR ์—ฐ์‚ฐ ๋“ฑ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

let a = 5;
a <<= 2; // a = a << 2; (๋น„ํŠธ ์™ผ์ชฝ ์‹œํ”„ํŠธ ์—ฐ์‚ฐ ํ›„ ํ• ๋‹น)
console.log(a); // ์ถœ๋ ฅ: 20

let b = 7;
b &= 5; // b = b & 5; (๋น„ํŠธ AND ์—ฐ์‚ฐ ํ›„ ํ• ๋‹น)
console.log(b); // ์ถœ๋ ฅ: 5

5. ๋…ผ๋ฆฌ ์—ฐ์‚ฐ ํ• ๋‹น (&&=, ||=)

๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž์™€ ๊ฒฐํ•ฉํ•˜์—ฌ ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค. JavaScript์—์„œ๋Š” ์•„์ง ๋…ผ๋ฆฌ ์—ฐ์‚ฐ ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ์ง€์›๋˜์ง€ ์•Š์œผ๋ฉฐ, ์ตœ์‹  JavaScript ๋ฒ„์ „์—์„œ ์ง€์›๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

let a = true;
a &&= false; // a = a && false;
console.log(a); // ์ถœ๋ ฅ: false

let b = true;
b ||= false; // b = b || false;
console.log(b); // ์ถœ๋ ฅ: true

์ฃผ์˜์‚ฌํ•ญ

  • ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋ณ€๊ฒฝ์‹œํ‚ต๋‹ˆ๋‹ค.
  • ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์˜ ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ณ , ๋ณต์žกํ•œ ์—ฐ์‚ฐ์„ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ํŠนํžˆ ์‚ฐ์ˆ  ์—ฐ์‚ฐ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ๋˜๋Š” ํ• ๋‹น ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์—ฐ์‚ฐํ•˜๊ณ  ์ฆ‰์‹œ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ์–ด ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

03. ๋น„๊ต ์—ฐ์‚ฐ์žโš–๏ธ

๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ๊ฐ’๋“ค์„ ๋น„๊ตํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ(true ๋˜๋Š” false)์œผ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ์—ฐ์‚ฐ์ž๋“ค์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ์กฐ๊ฑด๋ฌธ๊ณผ ๋…ผ๋ฆฌ์  ํ๋ฆ„ ์ œ์–ด์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. JavaScript์—์„œ์˜ ์ฃผ์š” ๋น„๊ต ์—ฐ์‚ฐ์ž๋“ค์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

1. ๋™๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž (==)

๋™๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‘ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ๊ฐ™์€ ๊ฐ’์„ ๊ฐ–๋Š”์ง€ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ’์ด ๊ฐ™์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋‹ค๋ฅด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ž๋™์œผ๋กœ ํ˜• ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

console.log(5 == 5);    // true
console.log(5 == '5');  // true (์ˆซ์ž์™€ ๋ฌธ์ž์—ด ๋น„๊ต, ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋น„๊ต)
console.log(5 == 10);   // false

2. ์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž (===)

์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‘ ํ”ผ์—ฐ์‚ฐ์ž์˜ ๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ชจ๋‘ ๊ฐ™์€์ง€ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ชจ๋‘ ๊ฐ™์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ํ•˜๋‚˜๋ผ๋„ ๋‹ค๋ฅด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

console.log(5 === 5);    // true
console.log(5 === '5');  // false (์ˆซ์ž์™€ ๋ฌธ์ž์—ด ๋น„๊ต, ๋ฐ์ดํ„ฐ ํƒ€์ž…๋„ ๋‹ค๋ฆ„)
console.log(5 === 10);   // false

FAQโ“

==์™€ ===์˜ ์ฐจ์ด์ ์€?

  • ==๋Š” ๊ฐ’๋งŒ ๋น„๊ตํ•˜๊ณ , ===๋Š” ์ž๋ฃŒํ˜•๊นŒ์ง€ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค.

3. ๋ถ€๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž (!=)

๋ถ€๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‘ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ๋‹ค๋ฅธ ๊ฐ’์„ ๊ฐ–๋Š”์ง€ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ’์ด ๋‹ค๋ฅด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ฐ™์œผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ž๋™์œผ๋กœ ํ˜• ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

console.log(5 != 5);    // false
console.log(5 != '5');  // false (์ˆซ์ž์™€ ๋ฌธ์ž์—ด ๋น„๊ต, ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋น„๊ต)
console.log(5 != 10);   // true

4. ๋ถˆ์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž (!==)

๋ถˆ์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‘ ํ”ผ์—ฐ์‚ฐ์ž์˜ ๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ชจ๋‘ ๋‹ค๋ฅธ์ง€ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ’์ด๋‚˜ ๋ฐ์ดํ„ฐ ํƒ€์ž… ์ค‘ ํ•˜๋‚˜๋ผ๋„ ๋‹ค๋ฅด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ชจ๋‘ ๊ฐ™์œผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

console.log(5 !== 5);    // false
console.log(5 !== '5');  // true (์ˆซ์ž์™€ ๋ฌธ์ž์—ด ๋น„๊ต, ๋ฐ์ดํ„ฐ ํƒ€์ž…๋„ ๋‹ค๋ฆ„)
console.log(5 !== 10);   // true

5. ํฌ๊ธฐ ๋น„๊ต ์—ฐ์‚ฐ์ž (>, <, >=, <=)

ํฌ๊ธฐ ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‘ ํ”ผ์—ฐ์‚ฐ์ž์˜ ํฌ๊ธฐ๋ฅผ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. >๋Š” ์™ผ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ์˜ค๋ฅธ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๋ณด๋‹ค ํฌ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. <๋Š” ์™ผ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ์˜ค๋ฅธ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๋ณด๋‹ค ์ž‘์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. >=๋Š” ์™ผ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ์˜ค๋ฅธ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. <=๋Š” ์™ผ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ์˜ค๋ฅธ์ชฝ ํ”ผ์—ฐ์‚ฐ์ž๋ณด๋‹ค ์ž‘๊ฑฐ๋‚˜ ๊ฐ™์œผ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 >= 5);   // true
console.log(5 <= 3);   // false

์ฃผ์˜์‚ฌํ•ญ

  • ๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ํƒ€์ž…(์ˆซ์ž, ๋ฌธ์ž์—ด, ๋ถˆ๋ฆฌ์–ธ ๋“ฑ)๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. JavaScript๋Š” ํ•„์š”์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ํ˜• ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•˜์—ฌ ๋น„๊ต๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ๋™๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž(==)์™€ ๋ถ€๋“ฑ ๋น„๊ต ์—ฐ์‚ฐ์ž(!=)๋Š” ํ˜• ๋ณ€ํ™˜ ํ›„ ๋น„๊ต๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ฏ€๋กœ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜๋ฉด ์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž(===,!==)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ํƒ€์ž…๊นŒ์ง€ ์ •ํ™•ํ•˜๊ฒŒ ๋น„๊ตํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
  • ๋ฌธ์ž์—ด ๋น„๊ต๋Š” ์œ ๋‹ˆ์ฝ”๋“œ ์ฝ”๋“œ ํฌ์ธํŠธ๋กœ ๋น„๊ต๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์‚ฌ์ „์ˆœ์œผ๋กœ ๋น„๊ต๋ฉ๋‹ˆ๋‹ค.

๋น„๊ต ์—ฐ์‚ฐ์ž๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๋ฉฐ, ์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ˜๋ณต๋ฌธ ๋“ฑ์—์„œ ๋ฐ์ดํ„ฐ์˜ ๋น„๊ต์™€ ํ๋ฆ„ ์ œ์–ด๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.


04. ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž๐Ÿ”„

JavaScript์—์„œ๋Š” ์„ธ ๊ฐ€์ง€ ์ฃผ์š” ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž๋ฅผ ์ œ๊ณตํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์กฐ๊ฑด์„ ๊ฒฐํ•ฉํ•˜๊ฑฐ๋‚˜ ๋…ผ๋ฆฌ์ ์ธ ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž๋Š” ๋ถˆ๋ฆฌ์–ธ(Boolean) ๊ฐ’์— ๋Œ€ํ•ด ์ž‘๋™ํ•˜๋ฉฐ, ๊ฒฐ๊ณผ๋กœ ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

1. ๋…ผ๋ฆฌ AND (&&)

๋…ผ๋ฆฌ AND ์—ฐ์‚ฐ์ž๋Š” ๋‘ ๊ฐœ์˜ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ๋ชจ๋‘ true์ธ ๊ฒฝ์šฐ์—๋งŒ true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

์ฃผ์š” ํŠน์ง•

  • ๋ชจ๋“  ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ true์ผ ๋•Œ๋งŒ true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฒซ ๋ฒˆ์งธ false ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ๋งŒ๋‚˜๋ฉด ๋‚˜๋จธ์ง€ ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ํ‰๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ์ฆ‰์‹œ ํ‰๊ฐ€๋ฅผ ๋ฉˆ์ถฅ๋‹ˆ๋‹ค. ์ด๋ฅผ "๋‹จ์ถ• ํ‰๊ฐ€(short-circuit evaluation)"๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

2. ๋…ผ๋ฆฌ OR (||)

๋…ผ๋ฆฌ OR ์—ฐ์‚ฐ์ž๋Š” ๋‘ ๊ฐœ์˜ ํ”ผ์—ฐ์‚ฐ์ž ์ค‘ ํ•˜๋‚˜ ์ด์ƒ์ด true์ผ ๊ฒฝ์šฐ true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋‘ ํ”ผ์—ฐ์‚ฐ์ž ๋ชจ๋‘ false์ผ ๋•Œ๋งŒ false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

์ฃผ์š” ํŠน์ง•

  • ํ•˜๋‚˜ ์ด์ƒ์˜ ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ true๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฒซ ๋ฒˆ์งธ true ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ๋งŒ๋‚˜๋ฉด ๋‚˜๋จธ์ง€ ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ํ‰๊ฐ€ํ•˜์ง€ ์•Š๊ณ  ์ฆ‰์‹œ ํ‰๊ฐ€๋ฅผ ๋ฉˆ์ถฅ๋‹ˆ๋‹ค. (๋‹จ์ถ• ํ‰๊ฐ€)

๋‹จ์ถ• ํ‰๊ฐ€ (Short Circuit Evaluation)

  • ์„ค๋ช…: ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์—์„œ ์ขŒ์ธก ์กฐ๊ฑด๋งŒ์œผ๋กœ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ, ์šฐ์ธก ์กฐ๊ฑด์„ ํ‰๊ฐ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • && ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ:
    • ์™ผ์ชฝ ๊ฐ’์ด true๋ฉด ์˜ค๋ฅธ์ชฝ ๊ฐ’์„ ๋ฐ˜ํ™˜
    • ์™ผ์ชฝ ๊ฐ’์ด false๋ฉด ์™ผ์ชฝ ๊ฐ’์„ ๋ฐ˜ํ™˜
  • || ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ:
    • ์™ผ์ชฝ ๊ฐ’์ด true๋ฉด ์™ผ์ชฝ ๊ฐ’์„ ๋ฐ˜ํ™˜
    • ์™ผ์ชฝ ๊ฐ’์ด false๋ฉด ์˜ค๋ฅธ์ชฝ ๊ฐ’์„ ๋ฐ˜ํ™˜
  • ์˜ˆ์ œ
console.log(true || "JavaScript"); // true
console.log(false || "JavaScript"); // "JavaScript"
console.log(false && "JavaScript"); // false
console.log(true && "JavaScript"); // "JavaScript"
console.log(true && true && "JavaScript"); // "JavaScript"

3. ๋…ผ๋ฆฌ NOT (!)

๋…ผ๋ฆฌ NOT ์—ฐ์‚ฐ์ž๋Š” ๋‹จํ•ญ ์—ฐ์‚ฐ์ž๋กœ, ํ”ผ์—ฐ์‚ฐ์ž์˜ ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์„ ๋ฐ˜๋Œ€๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค. true๋Š” false๋กœ, false๋Š” true๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

console.log(!true);  // false
console.log(!false); // true

์ฃผ์š” ํŠน์ง•

  • ํ”ผ์—ฐ์‚ฐ์ž์˜ ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์„ ๋ฐ˜๋Œ€๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ ์˜ˆ์‹œ

์กฐ๊ฑด๋ฌธ์—์„œ์˜ ์‚ฌ์šฉ

let x = 10;
let y = 5;

if (x > 5 && y < 8) {
    console.log('Both conditions are true');
}

if (x === 10 || y === 10) {
    console.log('At least one condition is true');
}

if (!x) {
    console.log('x is falsy (not true)');
}


๋‹จ์ถ• ํ‰๊ฐ€(Short-circuit evaluation) ํ™œ์šฉ

function validateInput(input) {
    // input์ด ์กด์žฌํ•˜๊ณ (defined), ์œ ํšจํ•œ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‹คํ–‰
    if (input && input.length > 0) {
        console.log('Valid input');
    } else {
        console.log('Invalid input');
    }
}

๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์กฐ๊ฑด๋ถ€ ๋กœ์ง์„ ์ž‘์„ฑํ•  ๋•Œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ์กฐ๊ฑด์„ ๊ฒฐํ•ฉํ•˜๊ฑฐ๋‚˜, ๋‹จ์ผ ์กฐ๊ฑด์„ ๋ฐ˜๋Œ€๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.


05. ์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์žโ“

์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋Š” JavaScript์™€ ๋งŽ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์กฐ๊ฑด๋ถ€ ํ‘œํ˜„์‹์ž…๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ๊ฐ„๋‹จํ•œ ์กฐ๊ฑด์„ ํ‰๊ฐ€ํ•˜๊ณ , ์กฐ๊ฑด์ด ์ฐธ(true)์ธ ๊ฒฝ์šฐ์™€ ๊ฑฐ์ง“(false)์ธ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ํ•œ ์ค„๋กœ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์–ด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ์กฐ

์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

์กฐ๊ฑด ? ์ฐธ์ผ ๋•Œ ๊ฐ’ : ๊ฑฐ์ง“์ผ ๋•Œ ๊ฐ’
  • ์กฐ๊ฑด์€ ํ‰๊ฐ€ํ•  ์กฐ๊ฑด์‹์ž…๋‹ˆ๋‹ค. ์ด ์กฐ๊ฑด์‹์€ ๋ถˆ๋ฆฌ์–ธ์œผ๋กœ ํ‰๊ฐ€๋  ์ˆ˜ ์žˆ๋Š” ํ‘œํ˜„์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฐธ์ผ ๋•Œ ๊ฐ’์€ ์กฐ๊ฑด์ด ์ฐธ์ผ ๊ฒฝ์šฐ ๋ฐ˜ํ™˜๋  ๊ฐ’์ž…๋‹ˆ๋‹ค.
  • ๊ฑฐ์ง“์ผ ๋•Œ ๊ฐ’์€ ์กฐ๊ฑด์ด ๊ฑฐ์ง“์ผ ๊ฒฝ์šฐ ๋ฐ˜ํ™˜๋  ๊ฐ’์ž…๋‹ˆ๋‹ค.

์˜ˆ์‹œ

๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ์œ ํ˜•๊ณผ ์กฐ๊ฑด์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋ฅผ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค:

์ˆซ์ž ๋น„๊ต

let age = 20;
let message = age >= 18 ? '์„ฑ์ธ์ž…๋‹ˆ๋‹ค' : '๋ฏธ์„ฑ๋…„์ž์ž…๋‹ˆ๋‹ค';

console.log(message); // ์ถœ๋ ฅ: "์„ฑ์ธ์ž…๋‹ˆ๋‹ค"

์œ„ ์˜ˆ์‹œ์—์„œ๋Š” age ๋ณ€์ˆ˜์˜ ๊ฐ’์ด 18 ์ด์ƒ์ธ์ง€ ํ™•์ธํ•˜์—ฌ, ์ฐธ์ผ ๊ฒฝ์šฐ '์„ฑ์ธ์ž…๋‹ˆ๋‹ค'๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด '๋ฏธ์„ฑ๋…„์ž์ž…๋‹ˆ๋‹ค'๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

๋ณ€์ˆ˜ ์œ ๋ฌด ์ฒดํฌ

let name = ''; // ๋˜๋Š” null ๋˜๋Š” undefined

let displayName = name ? name : '๋ฐฉ๋ฌธ์ž'; // name์ด ์กด์žฌํ•˜๋ฉด name์„ ์‚ฌ์šฉ, ์•„๋‹ˆ๋ฉด '๋ฐฉ๋ฌธ์ž'๋ฅผ ์‚ฌ์šฉ

console.log(displayName); // ์ถœ๋ ฅ: "๋ฐฉ๋ฌธ์ž"

์œ„ ์˜ˆ์‹œ์—์„œ๋Š” name ๋ณ€์ˆ˜๊ฐ€ ๋น„์–ด์žˆ๊ฑฐ๋‚˜(null, undefined, ๋นˆ ๋ฌธ์ž์—ด ๋“ฑ) ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ '๋ฐฉ๋ฌธ์ž'๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ ์‚ฌ๋ก€

์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋Š” ์ฃผ๋กœ ๋ณ€์ˆ˜ ์ดˆ๊ธฐํ™”, ์กฐ๊ฑด๋ถ€ ํ• ๋‹น, JSX(React) ๋“ฑ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋ณ€์ˆ˜ ์ดˆ๊ธฐํ™”์—์„œ์˜ ์‚ฌ์šฉ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

let isAdmin = true;
let greeting = isAdmin ? 'ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค, ๊ด€๋ฆฌ์ž๋‹˜!' : 'ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค';

console.log(greeting); // ์ถœ๋ ฅ: "ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค, ๊ด€๋ฆฌ์ž๋‹˜!"

์ฃผ์˜์‚ฌํ•ญ

  • ์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋Š” ์ฝ”๋“œ๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•˜์ง€๋งŒ, ๋„ˆ๋ฌด ๋ณต์žกํ•˜๊ฒŒ ์ค‘์ฒฉ๋˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๋…์„ฑ์„ ํ•ด์น˜์ง€ ์•Š๋„๋ก ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
  • ์กฐ๊ฑด์ด ๋ณต์žกํ•˜๊ฑฐ๋‚˜ ์—ฌ๋Ÿฌ ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•  ๋•Œ๋Š” ์ผ๋ฐ˜์ ์ธ if...else ๋ฌธ์ด ๋” ์ ํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž๋Š” JavaScript์™€ ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” ์œ ์šฉํ•œ ๋ฌธ๋ฒ• ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ, ์ ์ ˆํžˆ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ๋” ๊ฐ„๊ฒฐํ•˜๊ณ  ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


06. ๊ธฐํƒ€ ์—ฐ์‚ฐ์ž๐Ÿ› ๏ธ

1. typeof ์—ฐ์‚ฐ์ž

typeof ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ํ”ผ์—ฐ์‚ฐ์ž์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฃผ์š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

typeof ์—ฐ์‚ฐ์ž์˜ ์‚ฌ์šฉ๋ฒ•

// ๋ณ€์ˆ˜ ์„ ์–ธ
let x = 5;
let y = 'Hello';
let z = true;
let obj = {};
let arr = [];

// ๋ฐ์ดํ„ฐ ํƒ€์ž… ํ™•์ธ
console.log(typeof x); // ์ถœ๋ ฅ: "number"
console.log(typeof y); // ์ถœ๋ ฅ: "string"
console.log(typeof z); // ์ถœ๋ ฅ: "boolean"
console.log(typeof obj); // ์ถœ๋ ฅ: "object"
console.log(typeof arr); // ์ถœ๋ ฅ: "object" (๋ฐฐ์—ด๋„ "object"๋กœ ๋ฐ˜ํ™˜๋จ)
console.log(typeof undefinedVariable); // ์ถœ๋ ฅ: "undefined"
console.log(typeof null); // ์ถœ๋ ฅ: "object" (null์€ "object"๋กœ ๋ฐ˜ํ™˜๋จ, ํ•˜์œ„ ํ˜ธํ™˜์„ฑ ์ด์Šˆ)

์œ„ ์˜ˆ์‹œ์—์„œ typeof ์—ฐ์‚ฐ์ž๋Š” ๊ฐ ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • typeof ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐ˜ํ™˜ ๊ฐ’๋“ค์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค:
    • "undefined": ์ •์˜๋˜์ง€ ์•Š์€ ๋ณ€์ˆ˜ ๋˜๋Š” ๊ฐ’์ด ์—†๋Š” ๋ณ€์ˆ˜
    • "number": ์ˆซ์ž, ์ •์ˆ˜๋‚˜ ๋ถ€๋™ ์†Œ์ˆ˜์  ์ˆซ์ž ๋ชจ๋‘ ํฌํ•จ
    • "string": ๋ฌธ์ž์—ด
    • "boolean": ๋ถˆ๋ฆฌ์–ธ ๊ฐ’ (true ๋˜๋Š” false)
    • "object": ๊ฐ์ฒด, ๋ฐฐ์—ด, null ๋“ฑ (ํ•จ์ˆ˜๋„ ๊ฐ์ฒด์˜ ํ•˜์œ„ ํด๋ž˜์Šค๋กœ ๋ถ„๋ฅ˜๋จ)
    • "function": ํ•จ์ˆ˜
    • "symbol": ES6์—์„œ ์ถ”๊ฐ€๋œ ์‹ฌ๋ณผ ํƒ€์ž…
  • typeof ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’ ์ž์ฒด๋ฅผ ํ‰๊ฐ€ํ•˜์—ฌ ํƒ€์ž…์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ณ€๊ฒฝ๋˜๋”๋ผ๋„ typeof ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ์ดˆ๊ธฐ ํ• ๋‹น ํƒ€์ž…์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
let foo = 42;
console.log(typeof foo); // ์ถœ๋ ฅ: "number"

foo = 'bar';
console.log(typeof foo); // ์ถœ๋ ฅ: "string"
  • typeof ์—ฐ์‚ฐ์ž๋Š” null ๊ฐ’์„ "object"๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ด JavaScript์˜ ์ดˆ๊ธฐ ๋ฒ„๊ทธ๋กœ ์ธํ•œ ํ•˜์œ„ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด๋Š” JavaScript ์—”์ง„์˜ ๋‚ด๋ถ€ ๊ตฌํ˜„์—์„œ ๊ธฐ์ธํ•˜๋ฉฐ, ES6 ์ดํ›„์—๋„ ์ด๋Ÿฌํ•œ ๋ฐ˜ํ™˜ ๊ฐ’์€ ์œ ์ง€๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์™€ ๊ฐ™์ด typeof ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ๋น ๋ฅด๊ฒŒ ํ™•์ธํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ null์„ ์ œ์™ธํ•œ ๊ฐ์ฒด ํƒ€์ž…์˜ ๊ตฌ์ฒด์ ์ธ ๋ถ„๋ฅ˜๋Š” typeof ์—ฐ์‚ฐ์ž๋กœ๋Š” ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ, ๊ฐ์ฒด์˜ ๊ตฌ์ฒด์ ์ธ ํƒ€์ž…์„ ํŒ๋ณ„ํ•  ๋•Œ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


2. instanceof ์—ฐ์‚ฐ์ž

instanceof ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๊ฐ์ฒด๊ฐ€ ํŠน์ • ํด๋ž˜์Šค(๋˜๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜)์˜ ์ธ์Šคํ„ด์Šค์ธ์ง€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ๊ฒ€์‚ฌํ•˜์—ฌ, ๊ฐ์ฒด๊ฐ€ ํŠน์ • ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค์ธ์ง€๋ฅผ ํŒ๋ณ„ํ•ฉ๋‹ˆ๋‹ค.

instanceof ์—ฐ์‚ฐ์ž์˜ ์‚ฌ์šฉ๋ฒ•

// ์˜ˆ์ œ ํด๋ž˜์Šค ์ •์˜
class Animal {
    constructor(name) {
        this.name = name;
    }
}

// ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ
let dog = new Animal('Buddy');

// instanceof ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ธ์Šคํ„ด์Šค ์—ฌ๋ถ€ ํ™•์ธ
console.log(dog instanceof Animal); // ์ถœ๋ ฅ: true
console.log(dog instanceof Object); // ์ถœ๋ ฅ: true (๋ชจ๋“  ๊ฐ์ฒด๋Š” Object์˜ ์ธ์Šคํ„ด์Šค์ด๊ธฐ๋„ ํ•จ)
console.log(dog instanceof Array); // ์ถœ๋ ฅ: false (dog์€ Array์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์•„๋‹˜)

์œ„ ์˜ˆ์‹œ์—์„œ dog instanceof Animal์€ dog ๊ฐ์ฒด๊ฐ€ Animal ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค์ธ์ง€๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋กœ true๊ฐ€ ๋‚˜์˜ค๋ฏ€๋กœ dog ๊ฐ์ฒด๋Š” Animal ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค์ž…๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • instanceof ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ๋”ฐ๋ผ๊ฐ€๋ฉด์„œ ํด๋ž˜์Šค(๋˜๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜)์˜ prototype ์†์„ฑ๊ณผ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•ด๋‹น ํด๋ž˜์Šค์˜ ํ•˜์œ„ ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค๋„ true๋ฅผ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
class Bird extends Animal {
    fly() {
        console.log(`${this.name} is flying.`);
    }
}

let bird = new Bird('Polly');

console.log(bird instanceof Animal); // ์ถœ๋ ฅ: true (Bird๋Š” Animal ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›์•˜์Œ)
console.log(bird instanceof Bird);   // ์ถœ๋ ฅ: true
  • instanceof ์—ฐ์‚ฐ์ž๋Š” ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ํƒ€์ž…(์˜ˆ: ์ˆซ์ž, ๋ฌธ์ž์—ด ๋“ฑ)์— ๋Œ€ํ•ด์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ์ฃผ๋กœ ๊ฐ์ฒด์˜ ์ธ์Šคํ„ด์Šค ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
let num = 5;
console.log(num instanceof Number); // TypeError: Right-hand side of 'instanceof' is not an object

์œ„ ์˜ˆ์‹œ์—์„œ num์€ ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ธ number์ด๋ฏ€๋กœ instanceof ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.


instanceof ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ๊ฐ์ฒด์˜ ํƒ€์ž…์„ ํ™•์ธํ•˜๊ณ , ๊ฐ์ฒด์˜ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๋ถ„์„ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.


3. in ์—ฐ์‚ฐ์ž

in ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๊ฐ์ฒด๊ฐ€ ํŠน์ • ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. in ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ์กด์žฌ ์—ฌ๋ถ€๋ฅผ ๊ฒ€์‚ฌํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ํ™œ์šฉ๋ฉ๋‹ˆ๋‹ค.

in ์—ฐ์‚ฐ์ž์˜ ์‚ฌ์šฉ๋ฒ•

// ๊ฐ์ฒด ์ •์˜
let obj = { name: 'Alice', age: 30 };

// ์†์„ฑ ์กด์žฌ ์—ฌ๋ถ€ ํ™•์ธ
console.log('name' in obj); // ์ถœ๋ ฅ: true
console.log('age' in obj); // ์ถœ๋ ฅ: true
console.log('job' in obj); // ์ถœ๋ ฅ: false

์œ„ ์˜ˆ์‹œ์—์„œ 'name' in obj๋Š” obj ๊ฐ์ฒด์— name์ด๋ผ๋Š” ์†์„ฑ์ด ์กด์žฌํ•˜๋Š”์ง€๋ฅผ ๊ฒ€์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋กœ true๊ฐ€ ๋‚˜์˜ค๋ฏ€๋กœ obj ๊ฐ์ฒด๋Š” name ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • in ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ์ƒ์†๋œ ์†์„ฑ๊นŒ์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ์ฒด ์ž์ฒด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•ด๋‹น ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์— ์†์„ฑ์ด ์กด์žฌํ•˜๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฐฐ์—ด์— ๋Œ€ํ•ด์„œ๋„ in ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐฐ์—ด์—์„œ๋Š” ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ์˜ ์กด์žฌ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
let arr = [1, 2, 3];

console.log(0 in arr); // ์ถœ๋ ฅ: true
console.log(1 in arr); // ์ถœ๋ ฅ: true
console.log(2 in arr); // ์ถœ๋ ฅ: true
console.log(3 in arr); // ์ถœ๋ ฅ: false (์ธ๋ฑ์Šค 3์€ ์กด์žฌํ•˜์ง€ ์•Š์Œ)
  • in ์—ฐ์‚ฐ์ž๋Š” ์†์„ฑ ์ด๋ฆ„๋งŒ์„ ๊ฒ€์‚ฌํ•˜๋ฉฐ, ํ•ด๋‹น ์†์„ฑ์ด null์ด๋‚˜ undefined์ผ ๊ฒฝ์šฐ์—๋„ true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
let obj = { prop: null };

console.log('prop' in obj); // ์ถœ๋ ฅ: true


in ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ ์กด์žฌ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋ฉฐ, ์กฐ๊ฑด๋ฌธ์ด๋‚˜ ๋ฐ˜๋ณต๋ฌธ์—์„œ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์•ˆ์ „ํ•˜๊ฒŒ ์ ‘๊ทผํ•˜๋Š” ๋ฐ์—๋„ ๋„์›€์„ ์ค๋‹ˆ๋‹ค.


4. delete ์—ฐ์‚ฐ์ž

delete ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ, ์ฃผ๋กœ ๊ฐ์ฒด์˜ ์†์„ฑ์ด๋‚˜ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๋ฐ์— ์“ฐ์ž…๋‹ˆ๋‹ค. delete ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ์ฃผ์š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

  1. ๊ฐ์ฒด์˜ ์†์„ฑ ์ œ๊ฑฐ: ๊ฐ์ฒด์—์„œ ํŠน์ • ์†์„ฑ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ฐฐ์—ด ์š”์†Œ ์ œ๊ฑฐ: ๋ฐฐ์—ด์—์„œ ํŠน์ • ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
  • ์˜ˆ์ œ
let obj = { name: 'Alice', age: 30 };

// ์†์„ฑ ์ œ๊ฑฐ
delete obj.age;

console.log(obj); // ์ถœ๋ ฅ: { name: 'Alice' }

์œ„ ์˜ˆ์‹œ์—์„œ delete obj.age;๋Š” obj ๊ฐ์ฒด์˜ age ์†์„ฑ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์ดํ›„ obj ๊ฐ์ฒด๋Š” { name: 'Alice' }๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

let arr = [1, 2, 3, 4];

// ์š”์†Œ ์ œ๊ฑฐ
delete arr[2];

console.log(arr); // ์ถœ๋ ฅ: [1, 2, empty, 4]

๋ฐฐ์—ด์—์„œ delete arr[2];๋Š” arr ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 2์— ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ ๋ฐฐ์—ด์€ [1, 2, empty, 4]๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ empty๋Š” ์‚ญ์ œ๋œ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ‘œ์‹œ์ž…๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • delete ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ๋กœ ๋ฉ”๋ชจ๋ฆฌ์—์„œ ํ•ด๋‹น ๊ฐ์ฒด๊ฐ€ ์ œ๊ฑฐ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ๋‹จ์ง€ ๊ฐ์ฒด์˜ ์†์„ฑ์ด๋‚˜ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ์—ญํ• ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.
  • delete ์—ฐ์‚ฐ์ž๋Š” ๋ฐฐ์—ด์—์„œ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•  ๋•Œ ์š”์†Œ ์ž์ฒด๋ฅผ ์‚ญ์ œํ•˜์ง€๋งŒ, ๋ฐฐ์—ด์˜ ๊ธธ์ด๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‚ญ์ œ๋œ ์š”์†Œ๊ฐ€ empty๋กœ ํ‘œ์‹œ๋˜๋ฉด์„œ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋Š” ๋ณ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • delete ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ์ค‘์—์„œ๋งŒ ๋™์ž‘ํ•˜๋ฉฐ, ์ผ๋ฐ˜ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜, ์ „์—ญ ๋ณ€์ˆ˜์—๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ ๋“ค์„ ์œ ๋…ํ•˜์—ฌ delete ์—ฐ์‚ฐ์ž๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์˜ ์†์„ฑ์„ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


5. void ์—ฐ์‚ฐ์ž

void ์—ฐ์‚ฐ์ž๋Š” JavaScript์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํŠน์ˆ˜ํ•œ ๋‹จํ•ญ ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค. void ์—ฐ์‚ฐ์ž๋Š” ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ํ‰๊ฐ€ํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ undefined๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ์ฃผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค:


1. ํŽ˜์ด์ง€ ์ด๋™ ๋ฐฉ์ง€
: HTML <a> ํƒœ๊ทธ์˜ href ์†์„ฑ์— javascript:void(0)์„ ์„ค์ •ํ•˜์—ฌ ํด๋ฆญ ์‹œ ํŽ˜์ด์ง€ ์ด๋™์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<a href="javascript:void(0);" onclick="doSomething()">Click me</a>

์ด ๊ฒฝ์šฐ, void(0)์€ ์•„๋ฌด๋Ÿฐ ์ž‘์—…์„ ํ•˜์ง€ ์•Š๊ณ  ํ˜„์žฌ ํŽ˜์ด์ง€์— ๋จธ๋ฌด๋ฅด๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.


2. undefined ๋ฐ˜ํ™˜: void ์—ฐ์‚ฐ์ž๋Š” ํ•ญ์ƒ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํ•จ์ˆ˜๋‚˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋“ฑ์—์„œ ๋ช…์‹œ์ ์œผ๋กœ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function doSomething() {
    // ํ•จ์ˆ˜ ๋‚ด์šฉ...
    return void 0;
}


3. IIFE (์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜ ํ‘œํ˜„์‹): void ์—ฐ์‚ฐ์ž๋Š” IIFE๋ฅผ ๋งŒ๋“ค ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ์—๋Š” ๋ณดํ†ต void ๋’ค์— ๊ด„ํ˜ธ ()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œํ˜„์‹์„ ๊ฐ์‹ธ๊ณ , ๊ทธ ์•ˆ์— ํ•จ์ˆ˜ ์ •์˜๋ฅผ ๋„ฃ์Šต๋‹ˆ๋‹ค.

void function() {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ...
}();

์œ„ ์˜ˆ์ œ์—์„œ void๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹ ์— undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.


6. new ์—ฐ์‚ฐ์ž

JavaScript์—์„œ ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ํŠน๋ณ„ํ•œ ์—ฐ์‚ฐ์ž์ž…๋‹ˆ๋‹ค. new ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • ์ƒˆ๋กœ์šด ๊ฐ์ฒด ์ƒ์„ฑ: new ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์ƒˆ๋กœ์šด ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • ํ”„๋กœํ† ํƒ€์ž… ์—ฐ๊ฒฐ: ์ƒˆ๋กœ ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด์™€ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ prototype ์†์„ฑ์— ์ •์˜๋œ ๋ฉ”์„œ๋“œ๋‚˜ ์†์„ฑ์„ ์ธ์Šคํ„ด์Šค์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค๋‹ˆ๋‹ค.
  • ์ดˆ๊ธฐํ™”: ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด์˜ ์ดˆ๊ธฐ ์ƒํƒœ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜ˆ์ œ
// ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ •์˜
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// ์ƒˆ๋กœ์šด ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ
let person1 = new Person('Alice', 30);
let person2 = new Person('Bob', 25);

console.log(person1); // ์ถœ๋ ฅ: Person { name: 'Alice', age: 30 }
console.log(person2); // ์ถœ๋ ฅ: Person { name: 'Bob', age: 25 }

์œ„ ์˜ˆ์‹œ์—์„œ Person์ด๋ผ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ , new Person(...)์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ์ƒˆ๋กœ์šด Person ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. new Person(...)์€ Person ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ƒˆ๋กœ์šด Person ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๊ณ , ํ•ด๋‹น ๊ฐ์ฒด์—๋Š” name๊ณผ age๋ผ๋Š” ์†์„ฑ์ด ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด๋ฆ„์€ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ๊ด€๋ก€์ž…๋‹ˆ๋‹ค (ํŒŒ์Šค์นผ ์ผ€์ด์Šค). ์ด๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜์ž„์„ ๋ช…ํ™•ํžˆ ํ•˜๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค.
  • new ์—ฐ์‚ฐ์ž๋Š” ๋ฐ˜๋“œ์‹œ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ํ•จ์ˆ˜์— new๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋™์ž‘์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JavaScript์—์„œ new ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.


7. ์ง€์ˆ˜

์ง€์ˆ˜ ์—ฐ์‚ฐ์ž (**)๋Š” JavaScript์— ๋„์ž…๋œ ๋น„๊ต์  ์ตœ๊ทผ์˜ ์—ฐ์‚ฐ์ž๋กœ, ๊ฑฐ๋“ญ์ œ๊ณฑ ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ์ขŒํ•ญ์˜ ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ์šฐํ•ญ์˜ ํ”ผ์—ฐ์‚ฐ์ž๋กœ ๊ฑฐ๋“ญ์ œ๊ณฑํ•œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, a ** b๋Š” a๋ฅผ b๋ฒˆ ๊ณฑํ•œ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

  • ์˜ˆ์ œ
console.log(2 ** 2); // 4
console.log(10 ** 3); // 1000


์ง€์ˆ˜ ์—ฐ์‚ฐ์ž๋Š” ์ผ๋ฐ˜์ ์ธ ๊ณฑ์…ˆ ์—ฐ์‚ฐ์ž *๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๋ฒˆ ๊ณฑํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์ฝ”๋“œ๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. JavaScript์—์„œ ์ง€์ˆ˜ ์—ฐ์‚ฐ์ž๋Š” ES7(ECMAScript 2016)์—์„œ ๋„์ž…๋˜์—ˆ์œผ๋ฉฐ, ๊ฑฐ๋“ญ์ œ๊ณฑ ์—ฐ์‚ฐ์„ ๋ณด๋‹ค ์ง๊ด€์ ์ด๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.


8. null ๋ณ‘ํ•ฉ ์—ฐ์‚ฐ์ž

Null ๋ณ‘ํ•ฉ ์—ฐ์‚ฐ์ž (??)๋Š” JavaScript์—์„œ ๋„์ž…๋œ ๋น„๊ต์  ์ตœ๊ทผ์˜ ์—ฐ์‚ฐ์ž๋กœ, ํŠนํžˆ ๋ณ€์ˆ˜๊ฐ€ null ๋˜๋Š” undefined์ผ ๋•Œ ๊ธฐ๋ณธ ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ์—ฐ์‚ฐ์ž๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์ด null์ด๋‚˜ undefined์ธ์ง€๋ฅผ ์ฒดํฌํ•˜๊ณ , ๊ทธ ๊ฒฝ์šฐ์—๋งŒ ์šฐ์ธก์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ || ์—ฐ์‚ฐ์ž๋Š” Falsy ๊ฐ’ (false, '', 0, NaN, null, undefined)๋ฅผ ์ฒดํฌํ•˜์—ฌ ๊ธฐ๋ณธ ๊ฐ’์„ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ || ์—ฐ์‚ฐ์ž๋Š” Falsy ๊ฐ’ ์™ธ์—๋„ false, '', 0 ๋“ฑ๋„ ํฌํ•จํ•˜์—ฌ ๊ธฐ๋ณธ ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๋ฐ ์ ํ•ฉํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์˜ˆ์ œ
let score;
console.log(score); // undefined

// ?? ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•ด ๊ธฐ๋ณธ๊ฐ’ ์„ค์ •
score = score ?? 100;
console.log(score); // 100

// ์ด๋ฏธ ๊ฐ’์ด ํ• ๋‹น๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, ?? ์—ฐ์‚ฐ์ž๋Š” ์šฐ์ธก ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š์Œ
score = score ?? 200;
console.log(score); // 100

// ์ƒˆ๋กœ์šด ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ??= ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉ
let level;
level ??= 1; // level = level ?? 1;
console.log(level); // 1

07. ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„๐Ÿ“Š

JavaScript์—์„œ๋Š” ์—ฌ๋Ÿฌ ์—ฐ์‚ฐ์ž๋“ค์ด ์žˆ์œผ๋ฉฐ, ์ด๋“ค ์—ฐ์‚ฐ์ž๋“ค์€ ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ ๊ณ„์‚ฐ์ด ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„๋Š” ์—ฐ์‚ฐ์ž๊ฐ€ ํ”ผ์—ฐ์‚ฐ์ž์— ๋Œ€ํ•ด ํ‰๊ฐ€๋˜๋Š” ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์€ JavaScript์—์„œ ์ฃผ์š” ์—ฐ์‚ฐ์ž๋“ค์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋†’์€ ์ˆœ์œ„๋ถ€ํ„ฐ ๋‚ฎ์€ ์ˆœ์œ„๊นŒ์ง€ ์ •๋ฆฌํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋†’์€ ์šฐ์„ ์ˆœ์œ„(์—ฐ์‚ฐ์ด ๋จผ์ € ์ˆ˜ํ–‰๋˜๋Š” ์ˆœ์„œ)

  1. (): ๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•œ ๊ทธ๋ฃนํ™”
  2. . []: ๊ฐ์ฒด ์†์„ฑ ์ ‘๊ทผ๊ณผ ๋ฐฐ์—ด ์š”์†Œ ์ ‘๊ทผ
  3. (): ํ•จ์ˆ˜ ํ˜ธ์ถœ
  4. ++ --: ์ „์œ„ ์ฆ๊ฐ ์—ฐ์‚ฐ์ž
  5. ! ~ - + typeof void delete: ๋‹จํ•ญ ์—ฐ์‚ฐ์ž
  6. **: ์ง€์ˆ˜ ์—ฐ์‚ฐ์ž (ES7๋ถ€ํ„ฐ ๋„์ž…)
  7. * / %: ๊ณฑ์…ˆ, ๋‚˜๋ˆ—์…ˆ, ๋‚˜๋จธ์ง€ ์—ฐ์‚ฐ์ž

์ค‘๊ฐ„ ์šฐ์„ ์ˆœ์œ„

  1. + -: ๋ง์…ˆ๊ณผ ๋บ„์…ˆ ์—ฐ์‚ฐ์ž
  2. << >> >>>: ๋น„ํŠธ ์‹œํ”„ํŠธ ์—ฐ์‚ฐ์ž
  3. < <= > >=: ๊ด€๊ณ„ ๋น„๊ต ์—ฐ์‚ฐ์ž
  4. == != === !==: ๋™๋“ฑ ๋น„๊ต์™€ ์ผ์น˜ ๋น„๊ต ์—ฐ์‚ฐ์ž
  5. &: ๋น„ํŠธ AND ์—ฐ์‚ฐ์ž

๋‚ฎ์€ ์šฐ์„ ์ˆœ์œ„

  1. ^: ๋น„ํŠธ XOR ์—ฐ์‚ฐ์ž
  2. |: ๋น„ํŠธ OR ์—ฐ์‚ฐ์ž
  3. &&: ๋…ผ๋ฆฌ AND ์—ฐ์‚ฐ์ž
  4. ||: ๋…ผ๋ฆฌ OR ์—ฐ์‚ฐ์ž
  5. ?:: ์‚ผํ•ญ ์กฐ๊ฑด ์—ฐ์‚ฐ์ž (์กฐ๊ฑด๋ถ€ ์—ฐ์‚ฐ์ž)
  6. = += -= *= /= %= <<= >>= >>>= &= ^= |=: ํ• ๋‹น ์—ฐ์‚ฐ์ž

์ฐธ๊ณ  ์‚ฌํ•ญ

  • ๊ฐ™์€ ์šฐ์„ ์ˆœ์œ„์˜ ์—ฐ์‚ฐ์ž๋“ค์€ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค.
  • ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋ชจ๋ฅด๊ฑฐ๋‚˜ ํ˜ผ๋ž€์Šค๋Ÿฌ์šธ ๋•Œ๋Š” ๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ์‚ฐ ์ˆœ์„œ๋ฅผ ๋ช…ํ™•ํžˆ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • JavaScript์—์„œ๋Š” ํŠน์ • ์—ฐ์‚ฐ์ž๋“ค์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ES6(ECMAScript 2015) ์ดํ›„์— ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, &&์™€ ||์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ์ด์ „ ๋ฒ„์ „๋ณด๋‹ค ๋” ๋†’์•„์กŒ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์—ฐ์‚ฐ์ž ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋ฉด ๋ณต์žกํ•œ ํ‘œํ˜„์‹์„ ํšจ๊ณผ์ ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


08. ํ•ต์‹ฌ ๋‚ด์šฉ๐Ÿ‘€

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ์ž

728x90
๋ฐ˜์‘ํ˜•