๐ŸŽ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (7) Super Keyword

๐Ÿฆธ๐Ÿปโ€โ™‚๏ธsuper๐Ÿฆธ๐Ÿปโ€โ™‚๏ธ

์–ด๋ ค์šด ๋ง๋กœ๋Š” ์„œ๋ธŒ (์ž์‹) ํด๋ž˜์Šค์—์„œ ์ƒ์œ„ ํด๋ž˜์Šค๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ‚ค์›Œ๋“œ ๋ผ๊ณ  ํ•œ๋‹ค.

์™œ ์ž์‹ ํด๋ž˜์Šค์—์„œ ์ƒ์œ„ ํด๋ž˜์Šค๋ฅผ ํ˜ธ์ถœํ•˜์ง€?

์–ด๋–ค ์ด์ ์ด ์žˆ์ง€? ๊ธฐ์กด ์ƒ์†์˜ ๋‹จ์ ์„ ์–ด๋–ป๊ฒŒ ๋ณด์™„ํ•˜์ง€?

๋ฌผ๋ก  ๋ญ”์ง€ ์•Œ๊ฒŒ ๋˜๊ธฐ ์ „๊นŒ์ง€๋Š” ์ €๋Ÿฐ ์งˆ๋ฌธ์ด ๋Œ€์ฒด ๋ญ” ์†Œ๋ฆฐ๊ฐ€ ์‹ถ์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋Š๋ผ๊ฒŒ ๋œ ์‚ฌ์‹ค์ธ๋ฐ

๊ฒŒ์ž„ํ•  ๋•Œ ๋ถ€๋ชจ๋‹˜ ์•ˆ๋ถ€๋ฅผ ๊ทธ๋ ‡๊ฒŒ ๋งŽ์ด ์—ฌ์ญ™๋“ฏ์ด, ๋ถ€๋ชจ๋‹˜์„ ๋Œ€์‹  ์ผ์„ ์‹œํ‚ค๊ณ  ๋ถ€๋ชจ๋‹˜์„ ๋“ฑ๊ณจ์„ ๋นผ์˜ค๋Š” ๋“ฑ ์ด๋ฒˆ ํ•™์Šต์—์„œ๋Š” ๋ถˆํšจ๋ฅผ ๋งŽ์ด ์ €์งˆ๋ฅด๊ฒŒ ๋˜๋Š” ๊ฑฐ ๊ฐ™๋‹ค.

class Person {
  constructor(name, first, second) {
    this.name = name
    this.first = first
    this.second = second
  }
  sum() {
    return this.first + this.second
  }
}

class PersonPlus extends Person {
  avg() {
    return (this.first + this.second) / 2
  }
}

Person ๋ถ€๋ชจ ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›์€ PersonPlus ํด๋ž˜์Šค์—์„œ ๊ฐ‘์ž๊ธฐ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์ธ์ž๋ฅผ ํ•˜๋‚˜ ๋” ๋ฐ›๊ณ  ์‹ถ์–ด์กŒ๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ third, ์„ธ ๋ฒˆ์งธ ์ ์ˆ˜๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์‹ถ๋‹ค๋Š” ๊ฑฐ๊ฒ ์ง€.

let kim = new PersonPlus('kim', 10, 20, 30)

๋„ค ๋ฒˆ์งธ ์ธ์ž๋กœ ์ˆซ์ž 30์„ ๋ฐ›์•˜๋Š”๋ฐ, Person ํด๋ž˜์Šค ์—๋Š” ๋„ค ๋ฒˆ์งธ ์ธ์ž๋ฅผ ๋ฐ›์„ ์„ธํŒ…์ด ์•ˆ๋˜์–ด ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค Person ์˜ ๊ฐ’์€ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋ฉด์„œ ์„ธ ๋ฒˆ์งธ ์ ์ˆ˜๋ฅผ ๋ฐ›์•„์˜ค๊ฒŒ ํ•  ๋ฐฉ๋ฒ•์€ ๋ญ˜๊นŒ??

๐Ÿ˜ญ๋ถ€๋ชจ ์†์„ฑ ๋ณต๋ถ™ํ•ด์˜ค๊ธฐ

class Person {
  constructor(name, first, second) {
    this.name = name
    this.first = first
    this.second = second
  }
  sum() {
    return this.first + this.second
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    this.name = name
    this.first = first
    this.second = second
    this.third = third
  }
  sum() {
    return this.first + this.second + this.third
  }
  avg() {
    return (this.first + this.second + this.third) / 3
  }
}

์ด๋ ‡๊ฒŒ ๋ถ€๋ชจ ํด๋ž˜์Šค๋ฅผ ๋˜๋‹ค์‹œ ๋ณต๋ถ™ํ•ด ์™€์„œ PersonPlus ์— third ์ธ์ž๋ฅผ ํƒœ์šฐ๊ณ  ์†์„ฑ this.third ๋ฅผ ์ถ”๊ฐ€ ํ•ด์ฃผ๋ฉด ๋ฐ”๋ผ๋Š” ๋ฐ”๋Œ€๋กœ ์ž‘๋™์€ ํ•œ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ๋˜๋‹ค์‹œ ์ค‘๋ณต์ด ๋ฐœ์ƒํ•˜๊ธฐ์— โ€œ์ƒ์†โ€ ์˜ ์˜๋ฏธ๋ฅผ ํ‡ด์ƒ‰์‹œ์ผœ ๋ฒ„๋ฆฐ๋‹ค.

๐Ÿ˜ฑ๋ถ€๋ชจํด๋ž˜์Šค์—๊ฒŒ ์ผ์‹œํ‚ค๊ธฐ (์‘?)

์ด ์ค‘๋ณต์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ๋ถ€๋ชจ ํด๋ž˜์Šค๋ฅผ ์ž์‹ ํด๋ž˜์Šค๋กœ ๋ถˆ๋Ÿฌ์™€์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์—๊ฒŒ ์ผ์„ ์‹œํ‚ค๊ณ  ๋ถ€๋ชจ๊ฐ€ ํ•˜์ง€ ๋ชปํ•˜๋Š” ์ผ์€ ๋‚˜๋งŒ ํ•˜๋„๋ก ํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” (?!?) ํ‚ค์›Œ๋“œ๊ฐ€ ๋ฐ”๋กœ โ€œsuperโ€ ์ด๋‹ค.

์•ฝ๊ฐ„ ๋ถˆํšจ ์Šค๋Ÿฝ๊ธด ํ•œ๋ฐ ์œ„์˜ ๋ฌธ์žฅ์€ ์—„์ฒญ๋‚˜๊ฒŒ ์ค‘์š”ํ•œ ์˜๋ฏธ์ด๋ฏ€๋กœ ์ ˆ๋Œ€ ๊ฑ ์›ƒ๊ณ  ๋„˜์–ด๊ฐ€๋ฉด ์•ˆ๋œ๋‹ค.

๐Ÿ”‘๋ถ€๋ชจ๊ฐ€ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ ์‹คํ–‰ํ•˜๊ธฐ

1. super ์˜ ์ฒซ ๋ฒˆ์งธ ์šฉ๋ฒ•

PersonPlus ์—์„œ constructor ๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์œ„์— ์žˆ๋Š” ๋ถ€๋ชจ Person ์˜ ๊ธฐ๋Šฅ์„ ๋จผ์ € ์‹คํ–‰๋˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ถ€๋ชจ๊ฐ€ ์ด๋ฏธ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ๊ณผ ๋‚˜๋„ (PersonPlus) ๊ฐ–๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ์˜ ์ค‘๋ณต์„ ์ œ๊ฑฐํ•˜๊ณ ,

super() ๋ฅผ ๋Œ€์‹  ๋„ฃ์–ด์ค€๋‹ค.

class Person {
  constructor(name, first, second) {
    this.name = name
    this.first = first
    this.second = second
  }
  sum() {
    return this.first + this.second
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    // this.name = name
    // this.first = first
    // this.second = second
    // ๋ถ€๋ชจ์˜ ๊ธฐ๋Šฅ๊ณผ ์ค‘๋ณต๋˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ฑฐํ•˜๊ณ ,
    super(name, first, second) // super() ๋ฅผ ๋Œ€์‹  ๋„ฃ์–ด์ค€๋‹ค.
    this.third = third
  }
  sum() {
    return this.first + this.second + this.third
  }
  avg() {
    return (this.first + this.second + this.third) / 3
  }
}

์ฆ‰, super(name, first, second) ๋ฅผ ํ†ตํ•ด PersonPlus ์˜ ๋ถ€๋ชจ ํด๋ž˜์Šค์ธ Person ์˜ ์ƒ์„ฑ์ž๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๊ณ  ๊ทธ ์ƒ์„ฑ์ž ์•ˆ์—์„œ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋“ค์ด ์•Œ์•„์„œ ์„ธํŒ…์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ž์‹์ธ PersonPlus ํด๋ž˜์Šค๋Š” ์ด์ œ this.third = third ๋กœ ๋‚˜๋งŒ ๊ฐ–๊ณ  ์žˆ๋Š” ์†์„ฑ์— ๋Œ€ํ•ด์„œ๋งŒ ์„ธํŒ…์„ ํ•˜๋ฉด ๋œ๋‹ค.

2. super ์˜ ๋‘ ๋ฒˆ์งธ ์šฉ๋ฒ•

๊ทธ๋ฆฌ๊ณ  PersonPlus ํด๋ž˜์Šค์˜ sum() ์ด๋‚˜ avg() ๋ฉ”์†Œ๋“œ ๊ธฐ๋Šฅ๋„ ์†๋ณด๊ณ  ์‹ถ๋‹ค.

return this.first + this.second + this.third
return this.first + this.second + this.third
return this.first + this.second + this.third
return this.first + this.second + this.third
return this.first + this.second + this.third

์ด๊ฒŒ ์ผ์–ต์ค„์— ๋‹ฌํ•˜๋Š” ์ฝ”๋“œ๋ผ๋ฉด ์ž์‹์ด ๊ตฌํ˜„ํ•˜๊ธฐ์— ๋น„ํšจ์œจ ์ ์ธ ์ƒํ™ฉ์ด๋‹ค.

this.first ์™€ this.second ๋ฅผ ๋ถ€๋ชจ ํด๋ž˜์Šค์—์„œ ์ด๋ฏธ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๊ฑธ ๊ฐ€์ ธ๋‹ค ์“ธ ๋ฐฉ๋ฒ•์ด ์žˆ์„ ํ…๋ฐ?

class Person {
  constructor(name, first, second) {
    this.name = name
    this.first = first
    this.second = second
  }
  sum() {
    return this.first + this.second
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    // this.name = name
    // this.first = first
    // this.second = second
    // ๋ถ€๋ชจ์˜ ๊ธฐ๋Šฅ๊ณผ ์ค‘๋ณต๋˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ฑฐํ•˜๊ณ ,
    super(name, first, second) // super() ๋ฅผ ๋Œ€์‹  ๋„ฃ์–ด์ค€๋‹ค.
    this.third = third
  }
  sum() {
    // return this.first + this.second + this.third
    return super.sum() + this.third
  }
  avg() {
    // return (this.first + this.second + this.third) / 3
    return (super.sum() + this.third) / 3
  }
}

๋ถ€๋ชจํด๋ž˜์Šค์— ์žˆ๋Š” >>> super ๋ฅผ ์˜๋ฏธํ•˜๊ณ ,

.sum() ์œผ๋กœ ํ˜ธ์ถœํ•œ๋‹ค.

์ฆ‰, ๋ถ€๋ชจ ํด๋ž˜์Šค์— ์žˆ๋Š” sum() ์„ ํ˜ธ์ถœํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ›์•„์„œ (๋ฆฌํ„ด๋ฐ›์•„์„œ) ์ž์‹ ํด๋ž˜์Šค์—์„œ ์ถ”๊ฐ€์ ์ธ ์ž‘์—…์„ (add this.third) ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉด ์ข‹๋‹ค.

let teddy = new Person('teddy', 10, 20)

teddy
Person {name: "teddy", first: 10, second: 20}
teddy.sum()
30

let sunny = new PersonPlus('sunny', 10, 20, 30)

sunny
PersonPlus {name: "sunny", first: 10, second: 20, third: 30}
sunny.sum()
60
sunny.avg()
20

๋งŽ์ด ์จ๋ณด์งˆ ์•Š์•˜๊ธฐ์— ์•„์ง ์–ด๋ ต์ง€๋งŒ ์•„ํ•ญ ๋Œ€๊ฐ• ๋Š๋‚Œ์ด ์˜ค๊ธฐ๋Š” ํ•œ๋‹ค.

๐Ÿ‘ฉ๐Ÿปโ€โš–๏ธ์š”์•ฝ

1. super()์™€ super. ์˜ ์ฐจ์ด

  • super()์‹œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž ํ˜ธ์ถœ. ํ•„์š”ํ•œ ์ธ์ž๋ฅผ ๋„˜๊ฒจ์ค˜์•ผ ํ•จ
  • super. ์‚ฌ์šฉ์‹œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์†์„ฑ๊ฐ’์— ์ ‘๊ทผํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ.

2. super๊ฐ€ ์—†๋‹ค๋ฉด?

  • ๋ถ€๋ชจ ํด๋ž˜์Šค์—์„œ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ ์ž์‹ ํด๋ž˜์Šค์—์„œ ์ค‘๋ณต ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.
  • ์ž์‹ ํด๋ž˜์Šค์—์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ์†์„ฑ๊ฐ’์— ์ ‘๊ทผํ•˜์ง€ ๋ชปํ•œ๋‹ค.

์Šˆํผ์Šˆํผ๋งจ~~


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook