๐Ÿ‘ฉ‍๐Ÿ’ปProgramming/JavaScript

[JS] ์ฝ”๋“œ ์ž‘์„ฑ tips

taesooya 2023. 2. 4.

https://yozm.wishket.com/magazine/detail/1836/

 

๋‚˜์œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑ ์Šต๊ด€๊ณผ ์ž‘๋ณ„ํ•˜๊ธฐ | ์š”์ฆ˜IT

๋ฉ‹์ง„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์„ธ๊ณ„๋กœ ์ฒซ๊ฑธ์Œ์„ ๋‚ด๋””๋”œ ๋•Œ, ์šฐ๋ฆฌ๊ฐ€ ํ•˜๋Š” ์ผ์ด ์ˆ˜๋ฐฑ๋งŒ ๋ช…์˜ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์–ด๋–ค ์˜ํ–ฅ์„ ์ฃผ๋Š”์ง€ ์ง์ ‘ ํ™•์ธํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋•๋ถ„์— ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์˜ ์ผ์ด ๋‹จ์ง€ ๋ช‡ ๊ฐœ์˜ ํ‚ค

yozm.wishket.com

1. var ๋Œ€์‹  let, const๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ

* ๋ฒ”์œ„๊ฐ€ ๋ถ„๋ช…ํ•ด์ง

* ์ „์—ญ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š์Œ

* ๋™์ผ ๋ณ€์ˆ˜๋ช…์„ ๋‹ค์‹œ ์„ ์–ธํ•  ๋•Œ ์˜ค๋ฅ˜๋ฅผ ํ‘œ์‹œํ•จ

 

2. ์ฃผ์„์€ ๋งฅ๋ฝ์„ ์„ค๋ช…ํ•ด์•ผ ํ•œ๋‹ค

* ์˜๊ฒฌ ์ค‘๋ณตํ•˜์ง€ ์•Š๊ธฐ. ๋ฌด์Šจ ์ผ์„ ํ•˜๋Š”์ง€๊ฐ€ ์•„๋‹Œ ์™œ ํ•˜๋Š”์ง€ ์ž‘์„ฑํ•˜๋ผ

* ํ•จ์ˆ˜ / ๋ณ€์ˆ˜ / ํด๋ž˜์Šค ์ด๋ฆ„์œผ๋กœ ์„ค๋ช…ํ•˜๋Š” ๊ฒƒ์ด ์žฅํ™ฉํ•œ ์ฃผ์„๋ณด๋‹ค ๋‚ซ๋‹ค

* ์ตœ๋Œ€ํ•œ ๋งŽ์ด ์š”์•ฝํ•˜๊ณ  ๋ฌธ๋‹จ ๋‹จ์œ„๋กœ ์ž‘์„ฑํ•˜์ง€ ๋ง ๊ฒƒ

* ์ฃผ์„์€ ์ˆ˜์ •๋˜์ง€ ์•Š์•„์•ผ ํ•จ

 

3. ==๋Œ€์‹  ===๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ

* ==๋Š” ์ผ๋ฐ˜ ํ•ญ๋“ฑ ์—ฐ์‚ฐ์ž ===๋Š” ์™„์ „ ํ•ญ๋“ฑ ์—ฐ์‚ฐ์ž

* ์ผ๋ฐ˜ ํ•ญ๋“ฑ ์—ฐ์‚ฐ์ž๋Š” ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ์œ ์‚ฌํ•œ ์—ฌ๋ถ€๋งŒ ํ™•์ธํ•จ

* ์™„์ „ ํ•ญ๋“ฑ ์—ฐ์‚ฐ์ž๋Š” ํ”ผ์—ฐ์‚ฐ์ž์˜ ํƒ€์ž…๊ณผ ๊ฐ’์„ ๋™์‹œ์— ํ™•์ธํ•จ

 

4. ์˜ต์…”๋„ ์ฒด์ด๋‹์„ ์‚ฌ์šฉํ•  ๊ฒƒ

* ?๋Š” ์˜ต์…”๋„ ์ฒด์ด๋‹ ์—ฐ์‚ฐ์ž

* ํ•ด๋‹น ๊ฐ์ฒด์˜ ๋ชจ๋“  ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ํ™•์ธํ•˜์ง€ ์•Š์•„๋„ ์†์„ฑ๊ฐ’์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Œ

const pokemon = {
	name: 'Charmander',
	info: {
		ability: 'Blaze'
  	  }
    }
    
    console.log(pokemon?.info?.ability) // Blaze
    console.log(pokemon.info.attack) // Error
    console.log(pokemon?.info?.attack) // undefined (no error)

 

5. ๋งค์ง ๋„˜๋ฒ„์™€ ๋งค์ง ์ŠคํŠธ๋ง์„ ์‚ฌ์šฉํ•  ๊ฒƒ

* ๋งค์ง ๋„˜๋ฒ„ / ๋งค์ง ์ŠคํŠธ๋ง :  ์ฝ”๋“œ์—์„œ ์ง์ ‘ ์‚ฌ์šฉ๋˜๋Š” ์ˆซ์ž ๋˜๋Š” ๋ฌธ์ž์—ด

* ์ƒ์ˆ˜์— ์ด๋Ÿฌํ•œ ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ

 

6. API ํ˜ธ์ถœ ์˜ค๋ฅ˜์— ๋Œ€ํ•œ ์ ์ ˆํ•œ ์ฒ˜๋ฆฌ

* asyn/await ์•ˆ์—์„œ try/catch๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฒ˜๋ฆฌํ•ด์•ผํ•จ

 

7. ๊ฐ์ฒด๋ฅผ ๋‹จ์ผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ•˜์ง€ ๋ง ๊ฒƒ

* ๊ฐ์ฒด์—์„œ ์—ฌ๋Ÿฌ ์†์„ฑ๊ฐ’์ด ํ•„์š”ํ•œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ, ๋‹จ์ผ ๊ฐ์ฒด๋ณด๋‹ค ์—ฌ๋Ÿฌ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ

* ํ•จ์ˆ˜์— ํ•„์š”ํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ •ํ™•ํžˆ ๋ช…์‹œํ• ์ˆ˜๋ก ์ฝ”๋“œ๋ฅผ ์ฝ๋Š” ๊ฒƒ์ด ์‰ฌ์›€

* ํ•จ์ˆ˜๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ฆ, ์œ ์ง€ ๋ณด์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ฆ, ๊ฐ€๋น„์ง€ ์ฝœ๋ ‰ํŒ… ํ˜น์€ ๋ถˆํ•„์š”ํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜ ์ƒ์„ฑ์„ ๋ฐฉ์ง€ํ•˜์—ฌ ์„ฑ๋Šฅ์ด ํ–ฅ์ƒ ๋จ

 

8. ์•ฝ์–ด๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ

* ๋ณ€์ˆ˜์˜ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ์‹œ if(!!x) {...}์™€ ๊ฐ™์€ ์•ฝ์–ด๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ

 

 

 

 

'๐Ÿ‘ฉโ€๐Ÿ’ปProgramming > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[js] ๋ณ€์ˆ˜์™€ ๋Œ์—ฐ๋ณ€์ด  (0) 2023.05.22

๋Œ“๊ธ€