wecode 3์ผ์ฐจ TIL๐Ÿคฉ

carminchameleonยท2020๋…„ 1์›” 31์ผ
0

wecode_TIL

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

๋‚ ์งœ์™€ ์‹œ๊ฐ„

์šฐ๋ฆฌ๋Š” ์–ด๋–ป๊ฒŒ ๋‚ ์งœ์™€ ์‹œ๊ฐ„์„ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์„๊นŒ? ์นœ์ ˆํ•˜๊ฒŒ๋„ ์šฐ๋ฆฌ์—๊ฒŒ๋Š” ๋‚ ์งœ ๊ฐ์ฒด๊ฐ€ ์žˆ๋‹ค.
๋‚ ์งœ ๊ฐ์ฒด๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์‹œ๊ฐ„๊ณผ ๋‚ ์งœ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

var rightNow = new Date();
console.log(rightNow)

์ฝ˜์†” ๋กœ๊ทธ
Fri Jan 31 2020 10:28:58 GMT+0900 (ํ•œ๊ตญ ํ‘œ์ค€์‹œ)

๋ธŒ๋ผ์šฐ์ €๋งˆ์ž ์‹œ๊ฐ„์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ์‹์€ ๋ชจ๋‘ ๋‹ค๋ฅด๋‹ค.
ํ•˜์ง€๋งŒ ๋ณดํ†ต ์ด ๋ฐ์ดํ„ฐ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ๊ฐ€๊ณต์„ ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค,

GMT
Greenwich Mean Time

์ด ์‚ฌ์ง„์„ ๋ณด๋ฉด GMT ๋ผ๊ณ  ๋‚˜์˜ค๋Š” ๋ถ€๋ถ„์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์€ GMT๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์–ผ๋งˆ๋‚˜ ์‹œ๊ฐ„์ด ๋น ๋ฅธ์ง€๋ฅผ ํ‘œํ˜„ํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋ ‡๊ฒŒ new Date() ๋กœ ์–ป์–ด์˜จ ๊ฐ’์„ Date ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜๋กœ๊ฐ ๋‚ ์งœ, ์‹œ๊ฐ„ ๋“ฑ์˜ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.


let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth() +1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

๊ฐ ๊ฐ’๋“ค์„ ์ฝ˜์†”๋กœ๊ทธ์— ์ณ๋ณด๋ฉด

2020
1
31
5
38
10

์—ฌ๊ธฐ์„œ ์ฃผ์˜ํ•  ์ ์€

  1. getMonth() + 1
    ๋งŒ์•ฝ, ์ง€๊ธˆ์ด 1์›”์ด๋ผ๋ฉด getMonth() ์ž์ฒด์˜ ๊ฐ’์€ 0์ด๋‹ค.
    ์™œ๋ƒํ•˜๋ฉด ์ฒซ๋ฒˆ์งธ ๋‹ฌ์ด๊ณ  index ์ƒ์œผ๋กœ๋Š” ์ฒซ๋ฒˆ์งธ๋Š” 0์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    ๋”ฐ๋ผ์„œ +1์„ ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

์šฐ๋ฆฌ๋Š” ์ด๋ฏธ rightNow๋ฅผ ์ •์˜ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ๊ฐ’์€ ์ •์˜ํ•œ ๊ทธ ์‹œ๊ฐ„ ์ž์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ฆ‰, ๋งค ์ดˆ ์‹œ๊ฐ„๋งˆ๋‹ค ํ๋ฅด๋Š” ์‹œ๊ฐ„์„ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค.

getTime

let rightNow = new Date();
let time = rightNow.getTime();

getTime ๋ฉ”์†Œ๋“œ๋Š” ๋‚ ์งœ์˜ ๋ฐ€๋ฆฌ ์ดˆ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

์œ„์˜ ๊ฒƒ์„ ์‹คํ–‰ํ•ด๋ณด๋ฉด,
1580435042650
์ด๋Ÿฌํ•œ ์ˆซ์ž๊ฐ€ ๋ฐ˜ํ™˜๋˜๋Š”๋ฐ, ์ด๊ฒƒ์€ ์ง€๊ธˆ์˜ ์‹œ๊ฐ„์ด ๋ฐ€๋ฆฌ์ดˆ๋กœ ํ‘œํ˜„๋œ ๊ฒƒ์ด๋‹ค.
์ด ๋ฐ€๋ฆฌ์ดˆ์˜ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ฒƒ์€ 1970๋…„ 1์›” 1์ผ์ด๋‹ค.
๊ทธ๋ž˜์„œ ์ € ๋ฐ€๋ฆฌ์ดˆ์˜ ์˜๋ฏธ๋Š” ์ € 1970๋…„ 1์›” 1์ผ๋ถ€ํ„ฐ 1580435042650 ์ดˆ๊ฐ€ ์ง€๋‚ฌ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

์ดˆ๋Š” ๊ณ„์† ํ๋ฅด๊ธฐ ๋•Œ๋ฌธ์—, ๋งŒ์•ฝ ์ง€๊ธˆ ๋‹ค์‹œ ์ € ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•ด์„œ ๊ฐ’์„ ๋ฐ›์•„๋ณด๋ฉด ์œ„์˜ ๊ฐ’๋ณด๋‹ค ๋” ํฐ ๊ฐ’์ด ๋‚˜์˜จ๋‹ค.

์ฆ‰ ํ˜„์žฌ์˜ ๊ฐ’ > ๊ณผ๊ฑฐ์˜ ๊ฐ’

ํŠน์ • ๋‚ ์งœ์˜ Date
์šฐ๋ฆฌ๊ฐ€ ํ˜„์žฌ ์‹œ๊ฐ„์„ ๋ฐ›์„ ๋•Œ new Date()๋ฅผ ํ•˜์˜€๋‹ค. ์ด๋•Œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋น„์›Œ๋†“์ง€ ์•Š๊ณ  ํŠน์ •ํ•œ ๋‚ ์งœ๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋„ฃ์œผ๋ฉด, ํ•ด๋‹น ๋‚ ์งœ์˜ Date๋ฅผ ๋ฐ˜ํ™˜ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);
//๊ฒฐ๊ณผ๊ฐ’
2019-12-16T18:24:00.000Z
2019-12-16T18:24:00.000Z
2019-05-31T15:00:00.000Z

Quiz
๋งŒ๋‚˜์ด ๊ณ„์‚ฐํ•˜๊ธฐ

function getWesternAge(birthday) {
  let birthDay = new Date(birthday) // ์ƒ์ผ ๋‚ ์˜ Date ์–ป๊ธฐ
  let birthYear = birthDay.getFullYear();
  let birthMonth = birthDay.getMonth()+1;
  let birthDate = birthDay.getDate();

  let birthMonthDate = (birthMonth+"") + (birthDate+"")  
  
  let today = new Date();
  let todayYear = today.getFullYear();
  let todayMonth = today.getMonth()+1;
  let todayDate = today.getDate();
  
  let todayMonthDate = (todayMonth+"") + (todayDate+"")  
  
  if( Number(birthMonthDate) > Number(todayMonthDate)){
    return todayYear - birthYear-1;
  } else {
    return todayYear - birthYear;
  }
}

Number

Number ์ˆซ์ž ๋ฉ”์†Œ๋“œ
์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ˆ˜ํ•™ ๊ณ„์‚ฐ์— ๋Œ€ํ•œ ๋ฉ”์†Œ๋“œ
https://www.w3schools.com/js/js_math.asp

์ ˆ๋Œ€๊ฐ’ ๊ตฌํ•˜๊ธฐ, sin, cos, ์ œ๊ณฑ๊ทผ ๋“ฑ๋“ฑ Math ๊ฐ์ฒด์—๋Š” ์ˆ˜ํ•™ ๊ณ„์‚ฐ์— ๋Œ€ํ•œ ๋ฉ”์†Œ๋“œ๊ฐ€ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ ๋ช‡๊ฐ€์ง€๋งŒ ์‚ดํŽด๋ด…์‹œ๋‹ค

Round ๋ฐ˜์˜ฌ๋ฆผ ํ•จ์ˆ˜
Math.round()

console.log(Math.round(2.5)) // 3
์šฐ๋ฆฌ๊ฐ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ˆซ์ž ๋ฐ์ดํ„ฐ, ์˜ˆ๋ฅผ ๋“ค๋ฉด ํ‰์ ๊ณผ ๊ฐ™์€ ์ˆซ์ž๋ฅผ ๋ฐ›๊ณ  ๊ทธ์— ๋Œ€ํ•œ ํ‰๊ท ๊ฐ’์„ ๊ตฌํ•œ๋‹ค๋ฉด ๊ทธ ๊ฒฐ๊ณผ๋Š” ์†Œ์ˆ˜์ ์œผ๋กœ ๋‚˜์˜ค๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.
์ด๋Ÿฌํ•œ ์†Œ์ˆ˜์  ๊ฒฐ๊ณผ๋ฅผ ๊น”๋”ํ•˜๊ณ  ๋ณด๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ์šฐ๋ฆฌ๋Š” ๋ฐ˜์˜ฌ๋ฆผ, ์˜ฌ๋ฆผ,๋‚ด๋ฆผ๊ณผ ๊ฐ™์€ ํ•จ์ˆ˜๋ฅผ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

Ceil ์˜ฌ๋ฆผ ํ•จ์ˆ˜
Math.ceil()
console.log(Math.ceil(2.3)) // 3
ceil์€ ์ฒœ์žฅ์„ ์˜๋ฏธํ•˜๋ฏ€๋กœ ์ฒœ์žฅ๊นŒ์ง€ ์˜ฌ๋ฆฐ๋‹ค๊ณ  ์—ฐ์ƒํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Floor ๋‚ด๋ฆผ ํ•จ์ˆ˜
Math.floor()
console.log(Math.floor(2.9)) // 2

floor์€ ๋ฐ”๋‹ฅ์„ ์˜๋ฏธํ•˜๋ฏ€๋กœ, ๋ฐ”๋‹ฅ๊นŒ์ง€ ๋Œ์–ด๋‚ด๋ฆฐ๋‹ค๊ณ  ์—ฐ์ƒํ•˜๋ฉด ๋˜๊ฒ ์ฃ ?

์œ ์šฉํ•œ Number ํ•จ์ˆ˜! ๋žœ๋ค ํ•จ์ˆ˜

Random
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ๋žœ๋คํ•œ ์ˆซ์ž๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋žœ๋ค ํ•จ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

var randomNumber = Math.random()
console.log(randomNumber);

// 0.7399028302061925

์ด๋•Œ ๋‚˜์˜ค๋Š” ๊ฒฐ๊ณผ๋Š” 0.0000000000000000์—์„œ 0.9999999999999999 ์˜ ๊ฐ’
์ฆ‰ 0์—์„œ 1๋ฏธ๋งŒ์˜ ๊ฐ’์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๊ฒฐ๊ณผ์— ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋ฒ”์œ„๋กœ ๊ณฑํ•˜๋ฉด ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๋žœ๋คํ•œ ์ˆซ์ž๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งŒ์•ฝ ํ•œ์ž๋ฆฌ ์ˆซ์ž๋ฅผ ์–ป๊ณ  ์‹ถ๋‹ค๋ฉด?

var randomNumber = Math.random();
console.log(Math.floor(randomNumber*10));
// ex) 9.697009826327621

์ด๋ ‡๊ฒŒ ๋‚˜์˜จ ๋žœ๋คํ•œ ๊ฐ’์—์„œ ๋‚ด๊ฐ€ ์–ป๊ณ  ์‹ถ์€ 9๋งŒ ์ทจํ•˜๊ณ  ๋‚˜๋จธ์ง€๋Š” ๋‚ด๋ฆผํ•จ์ˆ˜๋กœ ๋ฒ„๋ฆฌ๊ณ , 9๋งŒ ๋‚จ๊ธฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฐฉ์‹์„ ํ†ตํ•ด์„œ ์šฐ๋ฆฌ๋Š” ๋กœ๋˜๋ฅผ ์ถ”์ฒจํ•˜๊ฑฐ๋‚˜ ์ด๋ฒคํŠธ ๋‹น์ฒจ์ž๋ฅผ ๊ตฌํ•˜๋Š” ๋“ฑ์˜ ๋žœ๋คํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐธ ์œ ์šฉํ•˜์ฃ ?

Quiz
์ตœ์†Œ(min), ์ตœ๋Œ€๊ฐ’(max)์„ ๋ฐ›์•„ ๊ทธ ์‚ฌ์ด์˜ ๋žœ๋ค์ˆ˜๋ฅผ returnํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•ด๋ด…์‹œ๋‹ค.

function getRandom(min, max){
    return Math.floor((Math.random() * (max - min + 1)) + min);
}
  1. ์™œ max - min + 1 ์ธ๊ฐ€?
    ์šฐ๋ฆฌ๊ฐ€ ๋งŒ์•ฝ 3๋ถ€ํ„ฐ 10๊นŒ์ง€์˜ ๋žœ๋คํ•œ ์ˆซ์ž๋ฅผ ์–ป๊ณ  ์‹ถ๋‹ค๋ฉด?
    ์—ฌ๊ธฐ์„œ ์งˆ๋ฌธ, 3๋ถ€ํ„ฐ 10๊นŒ์ง€๋Š” ์ˆซ์ž๊ฐ€ ๋ช‡ ๊ฐœ ์žˆ์„๊นŒ?
    3, 4, 5, 6, 7, 8, 9, 10 ์ด 8๊ฐœ์˜ ์ˆซ์ž๊ฐ€ ์žˆ๋‹ค.
    ์ด๊ฑธ ๋‹ค ์จ๋ณด์ง€ ์•Š์•„๋„ ๊ตฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ์š”?
    10 - 3 = 7
    7 + 1 = 8 ( ์ฐพ์•˜๋„ค์š”! )
    ์ตœ๋Œ€๊ฐ’์—์„œ ์ตœ์†Œ๊ฐ’์„ ๋นผ๊ณ , + 1 ์„ ๋”ํ•˜๋ฉด ๋ช‡ ๊ฐœ์ธ์ง€ ๊ตฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
    ๊ทธ๋ž˜์„œ max - min + 1์„ ํ•ด์ค๋‹ˆ๋‹ค.

  2. Math.random() * (max - min + 1)
    0.0000000000000000์—์„œ 0.9999999999999999 ์˜ ๊ฐ’์—, 8์„ ๊ณฑํ•œ๋‹ค๊ณ  ํ•˜๋ฉด?
    0._________ ~ 7._________ ์˜ ๋žœ๋คํ•œ ๊ฐ’์ด ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
    1 * 8์€ 8์ด์ง€๋งŒ, Math.random()์œผ๋กœ ๋‚˜์˜ค๊ฒŒ ๋  ๊ฐ’์€ 1์„ ์ ˆ๋Œ€ ๋„˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
    ๊ทธ๋Ÿฐ๋ฐ ์šฐ๋ฆฌ๊ฐ€ ๊ตฌํ•˜๊ณ  ์‹ถ์€ ๊ฐ’์€ 0๋ถ€ํ„ฐ 7๊นŒ์ง€์˜ ๊ฐ’์ด ์•„๋‹ˆ์ฃ , 3๋ถ€ํ„ฐ 10๊นŒ์ง€์˜ ๊ฐ’์ž…๋‹ˆ๋‹ค.
    ๊ฐ์ด ์˜ค์‹œ๋‚˜์š”? ๋งž์Šต๋‹ˆ๋‹ค. 0 ~ 7 ๊ทธ๋ฆฌ๊ณ  3 ~ 10.
    ๋ญ”๊ฐ€ ๋”ํ•˜๊ณ  ์‹ถ์€ ๋งˆ์Œ์ด ๋“ค์ฃ ?

  3. Math.random() * (max - min + 1) + min
    ์šฐ๋ฆฌ๋Š” 3์—์„œ 10๊นŒ์ง€์˜ ๊ฐ’์„ ๊ตฌํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์ด๋ฏ€๋กœ
    0._________ ~ 7._________ + 3์„ ํ•ด์ฃผ๋ฉด, 3._______ ~ 10._______ ์˜ ๊ฐ’์ด ๋‚˜์˜ค๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์ฃ .

  4. Math.floor((Math.random() * (max - min + 1)) + min);
    ๊น”๋”ํ•œ ์ •์ˆ˜๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„œ ๋‚˜๋จธ์ง€ ์†Œ์ˆ˜์ ์„ ๋ฒ„๋ ค์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    ๊ทธ๋ž˜์„œ Math.floor๋กœ ์ด ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์‹ธ์ค๋‹ˆ๋‹ค.

object


๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ์ด๋Ÿฌํ•œ ์ •๋ณด๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ ๊ตฌํ˜„ํ•˜๋ ค๊ณ ํ•œ๋‹ค๋ฉด, ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

์ด๋Ÿฐ ์‹์œผ๋กœ ํ•˜๋‚˜์”ฉ ํ•˜๋‚˜์”ฉ ํ•˜๋“œ์ฝ”๋”ฉ์„ ํ•ด์•ผ ํ• ๊นŒ....? ๋งŒ์•ฝ ์ด๋Ÿฌํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐฑ๋งŒ๊ฐœ๋ผ๋ฉด? ๊ทธ์ค‘์—์„œ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ํ•˜๋‚˜์”ฉ ๋ฝ‘์•„์™€์•ผ ํ•œ๋‹ค๋ฉด? ์–ผ๋งˆ๋‚˜ ๋ณต์žกํ• ์ง€ ์ƒ์ƒ์ด ์กฐ์ฐจํ•˜๊ณ  ์‹ถ์ง€ ์•Š๋„ค์š”. ์ด๋Ÿฌํ•œ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ, ๊ฐ’๋“ค์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ object์ž…๋‹ˆ๋‹ค.
์œ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ object ์‹์œผ๋กœ ๋‹ค์‹œ ํ‘œํ˜„ ํ•ด๋ณด๋ฉด,

์šฐ๋ฆฌ์—๊ฒŒ๋Š” ์ง€๊ธˆ plan 1, plan 2, plan 3๋ผ๋Š” ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ์žˆ๋‹ค. ์ด ์˜ค๋ธŒ์ ํŠธ์—๋Š” name, price, space, transfer, pages ๋ผ๋Š” property๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. plan 1์˜ name, plan 1์˜ ๊ฐ€๊ฒฉ ๋“ฑ๋“ฑ ์ด๋Ÿฌํ•œ ๊ฐ ํ”„๋กœํผํ‹ฐ์— ๋“ค์–ด๊ฐ€๋Š” ๋‚ด์šฉ์ด ๊ฐ’(value) ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด, ์ด๋Ÿฌํ•œ ๊ฐ์ฒด๋Š” ์–ด๋–ค ์‹์œผ๋กœ ์„ ์–ธํ•ด์•ผ ํ• ๊นŒ์š”?

๊ฐ์ฒด๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ {} ์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
๋งŒ์•ฝ ๋นˆ ๊ฐ์ฒด๋ผ๊ณ  ํ•˜๋ฉด
var newObject = {}๊ฐ€ ๋˜๊ฒ ์ฃ ?
๊ทธ ์•ˆ์—๋Š” ํด๋ก  : ์œผ๋กœ ๊ตฌ๋ถ„๋œ ์ด๋ฆ„(propertyName) , ๊ฐ’ PropertyValue์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๋ชฉ๋ก์€ , ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

var student1 = {
  name : "carmin",
  hobby : "exercise",
  age : 20,
  favoriteAnimal: "dog"
}

๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค๋•Œ ์ฃผ์˜ ํ•ด์•ผํ•˜๋Š” ๊ฒƒ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.
-property ์ด๋ฆ„์€ ์ค‘๋ณต์ด ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
-property ์ด๋ฆ„๊ณผ property ๊ฐ’ ์‚ฌ์ด์—๋Š” ๊ผญ : ํด๋ก ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค.
-property๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” ,(์‰ฝํ‘œ)๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค.
-property ๊ฐ’์—๋Š” ๊ทธ ์–ด๋– ํ•œ type( string, number, array, object, funcrtion, etc)
๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด, ๊ฐ ๊ฐ์ฒด์˜ property๊ฐ’์— ์ ‘๊ทผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ์š”?

๋ฐฉ๋ฒ•์€ ๋‘๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

student1๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ๋™๋ฌผ์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด?

student1.favoriteAnimal

student1์˜ ์ด๋ฆ„์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

student1["name"]

์—ฌ๊ธฐ์„œ ํฌ์ธํŠธ๋Š”
๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์—์„œ [] ์‚ฌ์ด์— ํ”„๋กœํผํ‹ฐ name์„ ๋„ฃ์„ ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ "" ์Œ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ผ์„œ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Scope

Scope
์˜์–ด ์‚ฌ์ „์— scope์˜ ์˜๋ฏธ๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด '๋ฒ”์œ„'๋ผ๋Š” ๋œป์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.
scope๋ž€ __๋ณ€์ˆ˜๊ฐ€ ์“ฐ์ผ ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„__๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๋ณ€์ˆ˜๋Š” ํŠน์ •ํ•œ ๋ฒ”์œ„์—์„œ๋งŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๊ณ , ์–ด๋–ค ๋ฒ”์œ„๋Š” ๊ทธ ์–ด๋Š ๊ณณ์—์„œ๋„ ๋‹ค ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Block
block์ด๋ž€ {} ์œผ๋กœ ๊ฐ์‹ธ์ง„ ๋ถ€๋ถ„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๊ฐ€ ์“ฐ๋Š” function, if, for๋ฌธ์˜ ๋‚ด๋ถ€์— ์žˆ๋Š” ๊ฒƒ๋“ค ๋ชจ๋‘ ํ•˜๋‚˜์˜ block ์ž…๋‹ˆ๋‹ค.

๋งŒ์•ฝ, ๋ณ€์ˆ˜๊ฐ€ block {} ์•ˆ์—์„œ ์ •์˜ ๋˜์—ˆ๋‹ค๋ฉด, ๊ทธ ๋ณ€์ˆ˜๋Š” ์˜ค๋กœ์ง€ ๊ทธ {} ๋‚ด๋ถ€ ์•ˆ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋ ‡๊ฒŒ ๋ธ”๋ก {} ์•ˆ์—์„œ ์ •์˜๋œ ๋ณ€์ˆ˜๋ฅผ local(์ง€์—ญ) ๋ณ€์ˆ˜๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

function sayHi(){
  let greeting = "hello"
  return greeting;
}

console.log(greeting) // ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—๋Ÿฌ!

๋งŒ์•ฝ ์ฝ˜์†”์ฐฝ์— ์ณ๋ณธ๋‹ค๋ฉด VM619:1 Uncaught ReferenceError: greeting is not defined at <anonymous>:1:13 ์ด๋Ÿฌํ•œ ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. greeting์ด ์ •์˜ ๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค๊ณ  ํ•˜๋„ค์š”. ์™œ๋ƒํ•˜๋ฉด, greeting ์ด๋ผ๋Š” ๋ณ€์ˆ˜๋Š” sayHi๋ผ๋Š” ์ง€์—ญ ์Šค์ฝ”ํ”„ ์•ˆ์—์„œ๋งŒ ์“ธ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Global Scope

์•ž์—์„œ block ์ด๋ผ๋Š” ๊ณต๊ฐ„์ด ์žˆ๋‹ค๊ณ  ํ–ˆ์ฃ . ๊ทธ๋ ‡๋‹ค๋ฉด, ๊ทธ ๋‚˜๋จธ์ง€ ๊ณต๊ฐ„์€ ์–ด๋””์ผ๊นŒ์š”? ๋ฐ”๋กœ Global scope ์ „์—ญ ์Šค์ฝ”ํ”„์ž…๋‹ˆ๋‹ค.
์ „์—ญ ์Šค์ฝ”ํ”„๋Š” ์ฝ”๋“œ ์–ด๋””์—์„œ๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„ ์ž…๋‹ˆ๋‹ค.

Global variable
์ „์—ญ๋ณ€์ˆ˜๋Š” ์ด๋Ÿฌํ•œ ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ ๋งŒ๋“ค์–ด์ง„, ์ •์˜๋œ ๋ณ€์ˆ˜ ์ž…๋‹ˆ๋‹ค.

let greeting = "hello"
function sayHi(){
  console.log(greeting)
  return greeting;
}

console.log(sayHi());

// hello
// hello

greeting์€ ๋ธ”๋ก ๋ฐ–์˜ ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ ์„ ์–ธ๋œ ์ „์—ญ ๋ณ€์ˆ˜ ์ด๊ธฐ ๋•Œ๋ฌธ์— sayHi() ํ•จ์ˆ˜ ์•ˆ์—์„œ๋„ ์‹คํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Scope์˜ ์˜ค์—ผ

๊ธ€๋กœ๋ฒŒ ์Šค์ฝ”ํ”„์™€ ๋กœ์ปฌ ์Šค์ฝ”ํ”„๋ฅผ ์ž˜ ๊ตฌ๋ถ„ํ•ด์„œ ์จ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด, ๊ทธ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜์˜ ๊ทธ ์–ด๋Š ๊ณณ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ __globalnamespace__๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

namespace๊ฐ€ ๋ญ์•ผ? ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“œ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. namespace๋Š” ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค.
์ด๊ฒƒ์„ scope๋ผ๊ณ ๋„ ํ•˜๊ณ , ๋ณ€์ˆ˜์ด๋ฆ„์„ ์ด์•ผ๊ธฐ ํ• ๋•Œ๋Š” namespace๋ผ๊ณ ๋„ ํ•ฉ๋‹ˆ๋‹ค.

global๋ณ€์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋žจ์ด ์ข…๋ฃŒ๋˜๋Š” ์‹œ์ ๊นŒ์ง€ ๊ณ„์† ์–ด๋””์„œ๋“  ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— {} ์Šค์ฝ”ํ”„ ์•ˆ์—์„œ ์ƒ์„ฑ๋œ local ๋ณ€์ˆ˜๋Š” block์ด ๋๋‚˜๋ฉด ์“ธ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

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

const music = "BTS"  // ๊ฐ’์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š” const
const pop = "halsey" // const ์‚ฌ์šฉ
let award = "grammy" // ๊ฐ’์ด ๋ณ€ํ•˜๋Š” let์„ ์‚ฌ์šฉ

const theStage = () => {
  award = "BMA";

return "Special Stage :" + music + 'feat' + pop + "in" + award; 

console.log(theStage());
console.log(award)

//Special Stage :BTSfeathalseyinBMA
//BMA

์œ„์˜ ์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด award๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ ๋งŒ๋“ค์–ด์ง„ ์ „์—ญ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ let์œผ๋กœ ์„ ์–ธ์ด ๋˜์–ด์„œ ๊ฐ’์ด ๋ฐ”๋€” ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์•„๋‹ˆ๋‚˜ ๋‹ค๋ฅผ๊นŒ, theStage๋ผ๋Š” ํ•จ์ˆ˜์—์„œ award์˜ ๊ฐ’์„ ํ• ๋‹นํ–ˆ๊ณ  ๊ทธ ๊ฒฐ๊ณผ award๋ผ๋Š” ์ „์—ญ ๋ณ€์ˆ˜์˜ ๊ฐ’์ด "grammy" ์—์„œ "BMA"๋กœ ๋ฐ”๋€Œ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ scope์˜ ์˜ค์—ผ์„ ๋ง‰๊ธฐ ์œ„ํ•ด์„œ๋Š” global ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ตœ์†Œํ™” ํ•˜๊ณ  ์ตœ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ๋ธ”๋ก ์•ˆ์—์„œ let, const๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๋ณ€์ˆ˜๋ฅผ ์ƒˆ๋กญ๊ฒŒ ( ๊ฒน์น˜์ง€ ์•Š๊ฒŒ ) ๋งŒ๋“ค์–ด ๋‚ด๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ข‹์€ Scoping ์Šต๊ด€์„ ๊ธฐ๋ฆ…์‹œ๋‹ค!!

function whatIs(type) {
let description;

switch (type) {
  case 'scope':
    description = '๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๊ณ  ์“ฐ์ผ ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„';
    break;
  case 'block':
    description = ' {},์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ง„๊ฒƒ. ex)function, if๋ฌธ, for๋ฌธ';
    break;
  case 'global scope':
    description = '์ „์—ญ. block ์˜ ๋ฐ”๊นฅ ๋ถ€๋ถ„. ์–ด๋Š ๊ณณ์—์„œ๋„ ์ ‘๊ทผ ๊ฐ€๋Šฅ';
     break;
  case 'global variable':
    description = '์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜';
     break;
  case 'block scope':
    description = 'block ์•ˆ์— ์žˆ๋Š” ๋ถ€๋ถ„';
     break;
  case 'local variable':
    description = 'block ์•ˆ์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜. ๋ธ”๋ก์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ';
    break;
  case 'global namespace':
    description = '์–ด๋Š ๊ณณ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ „์—ญ ๋ณ€์ˆ˜์˜ ์ด๋ฆ„';
    break;
  case 'scope pollution':
    description = '๋ณ€์ˆ˜์ด๋ฆ„, ๋ณ€์ˆ˜์˜ ๋ฒ”์œ„๊ฐ€ ํ˜ผ์šฉ๋˜์–ด ์žˆ๋Š” ์ƒํ™ฉ';
    break;
  default :
    description = ''
    break;
}

return description;
}

class

ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ๋ฌด์—‡์ผ๊นŒ์š”?
ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐ์ฒด๋“ค๋กœ ๊ตฌ์„ฑํ•˜๊ณ , ๊ทธ ๊ฐ์ฒด๋“ค ๊ฐ„์— ์„œ๋กœ ์ƒํ˜ธ์ž‘์šฉ ํ•˜๋„๋ก ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์žˆ์–ด์„œ class, ๊ฐ์ฒด, ๊ฐ์ฒด ์ง€ํ–ฅ์€ ์ค‘์š”ํ•œ ์ฃผ์ œ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ๋„๋Œ€์ฒด ๊ฐ์ฒด ์ง€ํ–ฅ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€?
์šฐ์„  ๊ฐ์ฒด๋ž€, ์˜์–ด๋กœ object , ์˜๋ฏธ๋Š” ์‚ฌ๋ฌผ์ด๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ ์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด๊ฐ€ ์žˆ์ฃ . ์•ž์—์„œ { name = "carmin"} ๊ณผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ ๊ฐ์ฒด์™€ ์ด ๊ฐ์ฒด๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅธ๋ฐ์š”, ์—ฌ๊ธฐ์„œ์˜ ๊ฐ์ฒด๋Š” ํ‹€์ •ํ•œ ๋กœ์ง์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ–‰๋™(method)์™€ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ( ๋ฉค๋ฒ„ ๋ณ€์ˆ˜ ) ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ตฌ์กฐ์˜ ํ‹€์„ ์งœ๋†“๊ณ , ๋น„์Šทํ•œ ๋ชจ์–‘์˜ ๊ฐ์ฒด๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋งŒ์•ฝ, ์šฐ๋ฆฌ๊ฐ€ 'bmw' ๋ผ๋Š” ์ฐจ๋ฅผ ๊ฐ์ฒด๋กœ ์ •์˜ํ•ด๋ณธ๋‹ค๊ณ  ํ•ฉ์‹œ๋‹ค.
์ด bmw๋ผ๋Š” ๊ฐ์ฒด๋Š”, 5๊ฐœ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
name, price, getName, getPrice, applyDiscount

let bmw = {
  name : "bmw"
  price : 4000,
  getName : function(){
   return this.name;
  },
  getPrice: function(){ // ์ด๋ ‡๊ฒŒ ๊ฐ์ฒด์˜ ๊ฐ’์— ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
   return this.price;
  },
  applyDiscount : function(discount){
   return this.price * discount;
  }
}

}

์ด ๊ฐ์ฒด์—์„œ getPrice ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


const bmwPriceByFunction = bmw.getPrice(); /// 4000

์ด๋ ‡๊ฒŒ ๊ฐ์ฒด์˜ ๋‚ด๋ถ€ ์•ˆ์—์„œ ํ•ด๋‹น ๊ฐ์ฒด์˜ ํ”„ํผํ‹ฐ๋ฅผ ์ ‘๊ทผํ•˜๋ ค๋ฉด __this__๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— getPrice ๊ฐ’ ํ•จ์ˆ˜์—์„œ, this(bmw)์˜ price ํ‚ค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ  ๊ทธ ๊ฐ’์„ ๊ตฌํ•ด์˜ฌ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ bmw ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋žŒ๋ณด๋ฅด๊ธฐ๋‹ˆ, ์†Œ๋‚˜ํƒ€, sm์‹œ๋ฆฌ์ฆˆ ๋“ฑ ์ˆ˜ ๋งŽ์€ ์ฐจ๋“ค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค๋ฉด ๋งค๋ฒˆ ์œ„์—์„œ ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ• ๊นŒ์š”? ์•„๋‹™๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” class ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•ด์„œ ์ด๋Ÿฌํ•œ ๊ฐ์ฒด๋“ค์„ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

__์ƒ์„ฑ์ž (Constructor) __

classํด๋ž˜์Šค๋Š”, ์ด๋Ÿฌํ•œ ๊ฐ์ฒด์˜ ์„ค๊ณ„๋„์ž…๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  object์™€ class์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด๋Š”, constructor ์ด๋ผ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์œ ๋ฌด์ž…๋‹ˆ๋‹ค.
๋งŒ์•ฝ, class, constructor์„ ์ด์šฉํ•ด์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” car ์ด๋ผ๋Š” class๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

์ด๋Ÿฌํ•œ class๋กœ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋ด…์‹œ๋‹ค.
const sonata = new Car("sonata', 2000)
์ด๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด์ง„ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ธ์Šคํ„ด์Šค instance๋ผ๊ณ  ๋งํ•˜๋ฉฐ, ์ด๋ ‡๊ฒŒ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ๋งˆ๋‹ค constructor() ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

์œ„์—์„œ ๋ณด๋ฉด constructor ๋ฉ”์†Œ๋“œ ์•ˆ์— ์ฐจ ์ด๋ฆ„๊ณผ ๊ฐ€๊ฒฉ์˜ ๊ฐ’์ด ์ธ์ž๋กœ ๋“ค์–ด๊ฐ€์„œ ์ž‘์šฉ๋œ ๊ฒƒ์ด์ฃ .

-class์˜ ์ด๋ฆ„์€ ํ•ญ์ƒ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•˜๋ฉฐ CarmelCase๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
-Car class์˜ instance๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๋งˆ๋‹ค constructor๋ฉ”์†Œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
-constructor()๋ฉ”์†Œ๋“œ๋Š” ์ธ์ž๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์œ„์—์„œ๋Š” name, price๊ฐ€ ์ธ์ž์˜€์Šต๋‹ˆ๋‹ค.
-์ด ๋ฉ”์†Œ๋“œ ์•ˆ์—์„œ this ๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. class์˜ ์‹คํ–‰๋ฒ”์œ„์—์„œ this๋Š” ํ•ด๋‹น instance๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
-constructor()์—์„œ ์ธ์ž๋กœ ๋„˜์–ด๋…ธ๋Š” ๊ฐ’์œผ๋กœ car instance์˜ name, price ํ”„๋กœํผํ‹ฐ์— ๊ฐ’์„ ํ• ๋‹นํ–ˆ์Šต๋‹ˆ๋‹ค.
-์ด๋ ‡๊ฒŒ, ํด๋ž˜์Šค ๋‚ด์—์„œ name, price์™€ ๊ฐ™์ด ๋ณ€๊ฒฝ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ๊ฐ’์ด์ž, class๋‚ด์˜ ์ปจํ…์ŠคํŠธ ์–ด๋Š ๊ณณ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ณ€์ˆ˜๋ฅผ '๋ฉค๋ฒ„ ๋ณ€์ˆ˜'๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋ฉค๋ฒ„ ๋ณ€์ˆ˜๋Š” this ํ‚ค์›Œ๋“œ๋กœ ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค.
this.name
this.price๊ฐ€ ๋ฐ”๋กœ ๊ทธ ๋ฉค๋ฒ„ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค.'

Instance
๊ฐ‘์ž๊ธฐ ๋ฌด์Šจ ์ธ์Šคํ„ด์Šค? ์ธ์Šคํ„ดํŠธ ํ–„๋ฒ„๊ฑฐ ์•„๋‹ˆ์•ผ? ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.
์œ„์—์„œ ์šฐ๋ฆฌ๋Š” class instance๋ฅผ ์ƒ์„ฑํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.
const sonata = new Car("sonata', 2000) ์ด๋ ‡๊ฒŒ์š”!
์ด๋ ‡๊ฒŒ class๋ฅผ ํ†ตํ•ด์„œ ์ƒ์„ฑ๋œ ๊ฒƒ์„ ๋ฐ”๋กœ Instance๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
Instance๋Š” class์˜ ํ”„๋กœํผํ‹ฐ ์ด๋ฆ„๊ณผ method๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.
์ธ์Šคํ„ดํŠธ๋Š” ๊ทธ ๋งˆ๋‹ค ๋ชจ๋‘ ๋‹ค๋ฅธ property ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

bmw๋Š” ๊ฐ€๊ฒฉ์ด 4000 ์ด์—ˆ์ง€๋งŒ sonata๋Š” 2000 ์ด์—ˆ์ฃ ?

์ธ์Šคํ„ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฒ•
-class์ด๋ฆ„์— new๋ฅผ ๋ถ™์—ฌ์„œ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” car ์ด๋ผ๋Š” class ์•ž์— new ๋ฅผ ์ผ๊ณ ,
๊ทธ ๋’ค์— constructor์—์„œ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ธ์ž๋กœ ๋„˜๊ฒผ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๊ทธ ์ธ์ž๋Š” () ๊ด„ํ˜ธ ์•ˆ์— ๋“ค์–ด๊ฐ”์ฃ .
-newํ‚ค์›Œ๋“œ๋Š”, Car ์ด๋ผ๋Š” ํด๋ž˜์Šค์— ์ƒˆ๋กœ์šด instance๋ฅผ ์ƒ์„ฑํ• ๋•Œ ํ•„์š”ํ•œ ํ‚ค์›Œ๋“œ์ž…๋‹ˆ๋‹ค. ์ด ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด์„œ ์šฐ๋ฆฌ๋Š” constructor() ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์ƒˆ๋กœ์šด instance๋ฅผ ๋ฆฌํ„ดํ•ด์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” ์ด๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด์ง„ ์ƒˆ๋กœ์šด instance๋ฅผ ์ƒˆ๋กœ์šด ๋ณ€์ˆ˜์— ์ €์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

Method
๋ฉ”์†Œ๋“œ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๊ฐ์ฒด๊ฐ€ ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ฉ”์†Œ๋“œ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
์ดํ•ด๊ฐ€ ์ž˜ ์•ˆ๊ฐˆ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Class ์˜ method๋Š” ์œ„์—์„œ ๋ฐฐ์šด object์™€ ๋ฌธ๋ฒ•์ด ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋‹ค๋ฅธ ์ ์€ ํ”„๋กœํผํ‹ฐ๋งˆ๋‹ค comma(,)๋กœ ๊ตฌ๋ถ„ํ•ด์ฃผ์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

changeType ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๊ทธ ์ธ์ž์— ์ƒˆ๋กœ์šด ์ปคํ”ผํƒ€์ž… ์ด๋ฆ„์„ ๋„ฃ์–ด์ฃผ์—ˆ๋”๋‹ˆ coldbrew์˜ type ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์ด espresso ์—์„œ brewing์œผ๋กœ ๋ฐ”๋€Œ์—ˆ์Šต๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ค ๋ฉ”์†Œ๋“œ๋ฅผ ์‹คํ–‰ํ• ๋•Œ ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ์ ์šฉ๋  ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

profile
๋‚˜๋Š”์•ผ ์ฝ”๋ฆฐ์ด ํ•˜์ง€๋งŒ ๋ฌด๋Ÿญ๋ฌด๋Ÿญ ์ž๋ผ๊ณ  ์žˆ์ฃ 

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