class & instance

์œค2ยท2023๋…„ 3์›” 15์ผ

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
1/2

๐Ÿ” ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋žจ

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ํ•˜๋‚˜์˜ ๋ชจ๋ธ์„ ๋งŒ๋“ค๊ณ ,

๋ชจ๋ธ์„ ๋ฐ”ํƒ•์œผ๋กœ ํ•œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจํ„ด์ด๋‹ค.

์œ„ ๊ทธ๋ฆผ์— ์žˆ๋Š” ๋ชจ๋ธ์„ class , ๊ฐ์ฒด๋ฅผ instance ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.


๐Ÿ” ES5 ํด๋ž˜์Šค ์ž‘์„ฑ ๋ฌธ๋ฒ• & ES6 ํด๋ž˜์Šค ์ž‘์„ฑ ๋ฌธ๋ฒ•

  • ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋žจ์€ class ์™€ ํ•จ์ˆ˜๋กœ ์ •์˜๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ•จ์ˆ˜๋Š” ES6๊ฐ€ ๋„์ž…๋˜๊ธฐ ์ „, ์ž์ฃผ ์‚ฌ์šฉํ•˜๋˜ ๋ฐฉ๋ฒ•์ด๋‹ค.
  • class๋Š” ES6๊ฐ€ ๋„์ž…๋œ ํ›„, ์ตœ๊ทผ ์ž์ฃผ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. (class ํ‚ค์›Œ๋“œ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.)
  • class์˜ ์ƒ์„ฑ์ž(constructor) ํ•จ์ˆ˜๋Š” ์ธ์Šคํ„ด์Šค๊ฐ€ ๋งŒ๋“ค์–ด์งˆ ๋•Œ ์‹คํ–‰๋˜๋Š” ์ฝ”๋“œ์ด๋‹ค.

๐Ÿ” class ์†์„ฑ ์ •์˜

  • this๋Š” ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
  • parameter๋กœ ๋„˜์–ด์˜จ ์ด๋ฆ„, ์ƒ‰์ƒ ๋“ฑ์€ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ ์‹œ ์ง€์ •ํ•˜๋Š” ๊ฐ’์ด๋ฉฐ,
    this์— ํ• ๋‹นํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋งŒ๋“ค์–ด์ง„ ์ธ์Šคํ„ด์Šค์— ํ•ด๋‹น ์ด๋ฆ„, ์ƒ‰์ƒ์„ ๋ถ€์—ฌํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

๐Ÿ” class ๋ฉ”์†Œ๋“œ ์ •์˜

  • ES5๋Š” prototype์ด๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ๋ฉ”์„œ๋“œ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ES6์—์„œ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ class ํ‚ค์›Œ๋“œ ์•ˆ์ชฝ์— ๋ฌถ์–ด์„œ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ” class ์‹คํ–‰ ๋ฐฉ๋ฒ•

  • class๋Š” instance๋ฅผ ๋งŒ๋“ค ๋•Œ new ํ‚ค์›Œ๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์ฆ‰์‹œ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉฐ,
    ๋ณ€์ˆ˜์— ํด๋ž˜์Šค์˜ ์„ค๊ณ„๋ฅผ ๊ฐ€์ง„ ์ƒˆ๋กœ์šด ๊ฐ์ฒด, ์ฆ‰ ์ธ์Šคํ„ด์Šค๊ฐ€ ํ• ๋‹น๋œ๋‹ค.

  • ๋˜ํ•œ ๊ฐ๊ฐ์˜ instance๋Š” class์˜ ๊ณ ์œ ํ•œ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ–๊ฒŒ ๋œ๋‹ค.


๐Ÿ” instance ์‚ฌ์šฉ

์•ž์„œ ๋งํ–ˆ๋˜ ๋ถ€๋ถ„์ธ instance๋Š” class์˜ ๊ณ ์œ ํ•œ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ–๊ฒŒ ๋œ๋‹ค๊ณ  ํ–ˆ์—ˆ๋˜ ๊ฒƒ ์ฒ˜๋Ÿผ
ํ˜„์žฌ ์˜ˆ์ œ๋กœ ๋ณด์•˜์„ ๋•Œ, pinkHeart ์•ˆ์— new ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด parameter๋กœ name, color ์— ํ•ด๋‹น ํ•˜๋Š” ๊ฐ’์„ ์ฃผ๋Š” ๋™์‹œ์— pinkHeart ๋ณ€์ˆ˜๋Š” ํด๋ž˜์Šค์ธ heart์˜ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

  1. ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ -> ํด๋ž˜์Šค ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋จ

    let pinkHeart = new heart('yoonHeart', 'pink');

  2. ์ธ์Šคํ„ด์Šค ์‚ฌ์šฉ -> ํด๋ž˜์Šค ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ์—ด๋žŒ์ด ๊ฐ€๋Šฅ

    pinkHeart.color // 'pink'
    let blueColor = pinkHeart.convertColor() // 'blue'

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ณต๋ถ€์ค‘

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