Blinking Hello Kitty Angel

javascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ˜๋ณต๋ฌธ ์ด์ •๋ฆฌ / ์ง์ˆ˜ ํ™€์ˆ˜ ๊ตฌ๋ณ„ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ ๋งŒ๋“ค๊ธฐ

xoouxa 2023. 2. 23. 15:04

โ€œ ์ง€์—ฐ๋˜๋Š” ํ”„๋กœ์ ํŠธ์— ์ธ๋ ฅ์„ ๋” ํˆฌ์ž…ํ•˜๋ฉด ์˜คํžˆ๋ ค ๋” ๋Šฆ์–ด์ง„๋‹ค. โ€

- Frederick Philips Brooks
Mythical Man-Month ์ €์ž
728x90

๐Ÿ“ ๊ฐ™์€ ๋™์ž‘์„ ์†์‰ฝ๊ฒŒ ๋ฐ˜๋ณตํ•˜๋Š” ๋ฐ˜๋ณต๋ฌธ

 

โœ๐Ÿปfor ๋ฌธโœ๐Ÿป

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐ˜๋ณต๋ฌธ์€ for๋ฌธ ์ž…๋‹ˆ๋‹ค.

for๋ฌธ์€ ์กฐ๊ฑด์— ๋“ค์–ด๊ฐ€๋Š” ๊ฐ’์ด ์ผ์ •ํ•˜๊ฒŒ ์ปค์ง€๋ฉด์„œ ๋ช…๋ น์„ ๋ฐ˜๋ณตํ•  ๋•Œ ํŽธ๋ฆฌํ•˜๊ณ   

for๋ฌธ์—์„œ๋Š” ๋ช‡ ๋ฒˆ ๋ฐ˜๋ณตํ–ˆ๋Š”์ง€ ๊ธฐ๋กํ•˜๊ธฐ ์œ„ํ•ด ์นด์šดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  for๋ฌธ์˜ ์ฒซ ๋ฒˆ์งธ ํ•ญ์—์„œ ์นด์šดํ„ฐ ๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

for๋ฌธ์€ ์ดˆ๊ธฐ์‹, ์กฐ๊ฑด์‹, ์ฆ๊ฐ์‹์„ ์‚ฌ์šฉํ•ด ๋ฐ˜๋ณต์„ ์ œ์–ดํ•˜๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ๋ฐ˜๋ณต๋ฌธ ์ž…๋‹ˆ๋‹ค.

๊ธฐ๋ณธํ˜•
for (์ดˆ๊นƒ๊ฐ’; ์กฐ๊ฑด; ์ฆ๊ฐ€์‹) { ... }

1) ์ดˆ๊นƒ๊ฐ’ : ๋ช‡ ๋ฒˆ ๋ฐ˜๋ณตํ• ์ง€ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด ์นด์šดํ„ฐ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ,
                 ์ด ํ•ญ๋ชฉ์—์„œ ์นด์šดํ„ฐ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ 
์ดˆ๊ธฐํ™” ํ•ฉ๋‹ˆ๋‹ค. ์ดˆ๊นƒ๊ฐ’์€ 0์ด๋‚˜ 1๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
2)  ์กฐ๊ฑด :    ๋ฌธ์žฅ์„ ๋ฐ˜๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์ฒดํฌํ•  ์กฐ๊ฑด ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
                  ์ด ์กฐ๊ฑด์„ ๋งŒ์กฑํ•ด์•ผ for๋ฌธ์— ์žˆ๋Š” ๋ช…๋ น์„ ๋ฐ˜๋ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3) ์ฆ๊ฐ€์‹ : ๋ฌธ์žฅ์„ ์‹คํ–‰ํ•œ ํ›„ ์นด์šดํ„ฐ ๋ณ€์ˆ˜๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
                   ๋ณดํ†ต ์นด์šดํ„ฐ๊ฐ’์„ ํ•˜๋‚˜ ๋” ์ฆ๊ฐ€์‹œํ‚ค๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
for (var i=0; i<=10; i++){
  console.log(i);
  }

์œ„ ์ฝ”๋“œ๋Š” 0๋ถ€ํ„ฐ 10๊นŒ์ง€ ์ˆซ์ž๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

๋ณ€์ˆ˜ i๋Š” ์ดˆ๊ธฐ๊ฐ’ 0์œผ๋กœ ์‹œ์ž‘ํ•˜์—ฌ, ์กฐ๊ฑด์‹ i < 10์ด true์ผ ๋•Œ๊นŒ์ง€ ๋ฐ˜๋ณต๋˜๋ฉฐ, ๋ฐ˜๋ณต๋งˆ๋‹ค i์˜ ๊ฐ’์„ 1์”ฉ ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค.

 

 

๐Ÿค” ์ดˆ๊นƒ๊ฐ’์€ ์ฒ˜์Œ์— ํ•œ ๋ฒˆ๋งŒ ํ• ๋‹นํ•˜๊ณ  ์กฐ๊ฑด ์ฒดํฌ์™€ ๋ช…๋ น์‹คํ–‰, ์ฆ๊ฐ€์‹์„ ๊ณ„์† ๋ฐ˜๋ณตํ•œ๋‹ค๋Š” ๊ฑฐ ๊ธฐ์–ตํ•˜์„ธ์š” 
๐Ÿค” ๋ณ€์ˆ˜ ์„ ์–ธ ์‹œ, const๋ฅผ ์“ฐ๋ฉด ๊ฐ’ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€ํ•˜์—ฌ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋‹ˆ ์ฃผ์˜ํ•˜์„ธ์š”

 

โœ๐Ÿปwhile ๋ฌธโœ๐Ÿป

์กฐ๊ฑด์‹๋งŒ์„ ์‚ฌ์šฉํ•ด ๋ฐ˜๋ณต์„ ์ œ์–ดํ•˜๋Š” ๋ฐ˜๋ณต๋ฌธ์ž…๋‹ˆ๋‹ค.

์กฐ๊ฑด์‹์ด true์ผ ๋•Œ ๊นŒ์ง€ ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค.

var i = 0;
while (i<10) {
	console.log(i);
    i++;
}

 

์œ„ ์ฝ”๋“œ๋Š” for๋ฌธ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

๋ณ€์ˆ˜ i๋Š” ์ดˆ๊ธฐ๊ฐ’ 0์œผ๋กœ ์‹œ์ž‘ํ•ด, ์กฐ๊ฑด์‹ i < 10์ด true์ผ ๋•Œ ๊นŒ์ง€ ๋ฐ˜๋ณต๋˜๋ฉฐ, ๋ฐ˜๋ณต๋งˆ๋‹ค i์˜ ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค.

 

โœ๐Ÿปdo while ๋ฌธโœ๐Ÿป

while๋ฌธ๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ, ๋จผ์ € ํ•œ ๋ฒˆ ์‹คํ–‰ํ•œ ํ›„ ์กฐ๊ฑด์‹์„ ํ‰๊ฐ€ํ•ด ๋ฐ˜๋ณต ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐ˜๋ณต๋ฌธ์ž…๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ตœ์†Œ ํ•œ ๋ฒˆ์€ ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค.

var i = 0;
do {
	consloe.log(i);
    i++
} while (i < 10);

์œ„ ์ฝ”๋“œ๋„ for๋ฌธ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

๋ณ€์ˆ˜ i๋Š” ์ดˆ๊ธฐ๊ฐ’ 0์œผ๋กœ ์‹œ์ž‘ํ•˜์—ฌ, do - while๋ฌธ์˜ ์ฝ”๋“œ ๋ธ”๋Ÿญ์ด ๋จผ์ € ํ•œ ๋ฒˆ ์‹คํ–‰ ๋˜๋ฉฐ, ๊ทธ ํ›„์— ์กฐ๊ฑด์‹ i < 10์ด

true์ผ ๋•Œ ๊นŒ์ง€ ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ณต๋งˆ๋‹ค i์˜ ๊ฐ’์„ 1์”ฉ ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค.


๐Ÿ“ ์ง์ˆ˜ ํ™€์ˆ˜ ๊ตฌ๋ณ„ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ ๋งŒ๋“ค๊ธฐ

์ด๋ฒˆ์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ์ˆซ์ž๋ฅผ userNumber์— ํ• ๋‹นํ•œ ํ›„ ์ง์ˆ˜์ธ์ง€, ํ™€์ˆ˜์ธ์ง€ ๊ตฌ๋ณ„ํ•˜๋Š” ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋„๋ก

ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

See the Pen Untitled by leeyouna21 (@leeyouna21) on CodePen.

 

๐Ÿ“ ์ฃผ์˜ !! (`${userNumber} : ์ง์ˆ˜`) : 
๋ถ€๋ถ„์—์„œ ์ž‘์€ ๋”ฐ์˜ดํ‘œ (' ') ๊ฐ€ ์•„๋‹Œ ๋ฐฑํ‹ฑ(` `)์„ ์‚ฌ์šฉํ•ด์•ผํ•จ์„ ๋ช…์‹ฌํ•˜์ž !!๐Ÿ“

 

34๋ฅผ ์ž…๋ ฅํ•˜๋ฉด

 

โœจ๊ฒฐ๊ณผ