TIL - 21.07.03๐Ÿ‘จโ€๐Ÿ’ป - Js

3892 ๋‹จ์–ด JavaScriptTILJavaScript

TIL - 21.07.03 ๐Ÿ‘จโ€๐Ÿ’ป

๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜

๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋น„๋กฏํ•œ ์—ฌ๋Ÿฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค์ด ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋œป ํ•œ๋‹ค.

let user = {
  name: 'sunghoon',
  job: 'dev',
}
// { name: 'sunghoon', job: 'dev' } ์ธ ๊ฐ์ฒด๊ฐ€ 
// user๋ผ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น๋˜์–ด์„œ user๋ฅผ ํ†ตํ•ด ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋จ.

user = null;
// user์— null์ด ํ• ๋‹น๋˜๋ฉด์„œ { name: 'sunghoon', job: 'dev' } ๋ผ๋Š” ๊ฐ์ฒด๋Š” ๋„๋‹ฌ ๋ถˆ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  
//ํ•ด๋‹น ๊ฐ’์€ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜์— ์˜ํ•ด ์‚ญ์ œ๋จ.

๊ธฐ์ค€

๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜์ด ์ž‘๋™ํ•˜๋Š” ๊ธฐ์ค€์€ ๋„๋‹ฌ ๊ฐ€๋Šฅ์„ฑ(reachability)์ด๋ฉฐ ๋„๋‹ฌ ๊ฐ€๋Šฅํ•œ ๊ฐ’์ด๋ž€ ์–ด๋–ป๊ฒŒ๋“  ์ ‘๊ทผ๊ฐ€๋Šฅํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ฐ’์„ ๋œป ํ•œ๋‹ค.

์ „์—ญ ๋ณ€์ˆ˜์™€ ๊ฐ™์ด ์–ด๋””์„œ๋“ ์ง€ ๋„๋‹ฌ๊ฐ€๋Šฅํ•˜๊ธฐ์— ํŠน๋ณ„ํ•œ ์ด์œ ๊ฐ€ ์—†๋‹ค๋ฉด ์‚ญ์ œ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ๋“ค์€ ํŠน๋ณ„ํ•œ ์ด์œ ๊ฐ€ ์—†์œผ๋ฉด ์‚ญ์ œ๋˜์ง€ ์•Š๋Š”๋‹ค.

์‚ญ์ œ ์•Œ๊ณ ๋ฆฌ์ฆ˜

์—ฌ๋Ÿฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์žˆ์ง€๋งŒ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ mark and sweep ๋ฐฉ์‹์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด๋‹ค.
mark and sweep ๋ฐฉ์‹์€ ์ „์—ญ ๋ณ€์ˆ˜์™€ ๊ฐ™์€ ๋ฃจํŠธ์ •๋ณด์— ํ‘œ์‹(mark)๋ฅผ ๋‚จ๊ธฐ๊ณ , ๊ทธ ๋‹ค์Œ์œผ๋กœ ๋ฃจํŠธ๊ฐ€ ์ฐธ์กฐํ•˜๋Š” ๊ฐ์ฒด๊นŒ์ง€ ๋ฐฉ๋ฌธํ•ด ์ „๋ถ€ ํ‘œ์‹์„ ๋‚จ๊ธด๋‹ค.
๋ฃจํŠธ์—์„œ ๋„๋‹ฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๊ฐ์ฒด์— ๋ฐฉ๋ฌธํ• ๋•Œ๊นŒ์ง€ ํ•ด๋‹น ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜๋‹ค๊ฐ€ ๋” ์ด์ƒ ๋„๋‹ฌ ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๊ฐ€ ์—†์„๋•Œ ํ‘œ์‹์ด ์—†๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ์‚ญ์ œํ•œ๋‹ค.

new ์—ฐ์‚ฐ์ž์™€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜

new ์—ฐ์‚ฐ์ž์™€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์œ ์‚ฌํ•œ ๊ฐ์ฒด๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ๋งŒ๋“ค์–ด์•ผ ํ• ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๊ธฐ์ˆ ์  ์ฐจ์ด๋Š” ์—†์œผ๋‚˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ ๋‘ ๊ด€๋ก€๋ฅผ ๋”ฐ๋ฅธ๋‹ค.

  • ํ•จ์ˆ˜ ์ด๋ฆ„์˜ ์ฒซ ๊ธ€์ž๋Š” ๋Œ€๋ฌธ์ž๋กœ ์ž‘์„ฑํ•œ๋‹ค.
  • ์ด๋ฆ„ ์•ž์— 'new' ์—ฐ์‚ฐ์ž๋ฅผ ๊ผญ ๋ถ™ํžŒ๋‹ค.
function AddUser(name, job){
  this.name = name;
  this.job = job;
}
const user1 = new AddUser('sunghoon', 'dev');

console.log(user1) // { name: 'sunghoon', job: 'dev' }

new ์—ฐ์‚ฐ์ž์™€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ• ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์ž‘๋™ํ•œ๋‹ค.

  1. ๋นˆ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ด ํ•จ์ˆ˜ ๋‚ด this์— ํ• ๋‹นํ•œ๋‹ค.
  2. ํ•จ์ˆ˜์˜ ๋ณธ๋ฌธ์„ ์‹คํ–‰ํ•˜์—ฌ this์— ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
  3. ๊ฐ์ฒด this๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

return ์‚ฌ์šฉ์‹œ

์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด this์— ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ ํ›„ ์ž๋™์œผ๋กœ ๊ฐ์ฒด this๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ์— return์ด ํ•„์š”์—†๋‹ค.
ํ•„์š” ์—†์ง€๋งŒ ๋งŒ์•ฝ ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด return๋ฌธ์ด ์ž‘์„ฑ๋œ๋‹ค๋ฉด, ๋ฐ˜ํ™˜๋˜๋Š” ๊ฒƒ์ด ๊ฐ์ฒด์ผ ๊ฒฝ์šฐ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋งŒ์•ฝ ์›์‹œ ์ž๋ฃŒํ˜•์ด ๋ฐ˜ํ™˜๋œ๋‹ค๋ฉด return๋ฌธ์„ ๋ฌด์‹œํ•œ๋‹ค.

GOOD ๐Ÿ˜‰

๊ณต๋ถ€๋Ÿ‰์ด ๋งŽ์ง€๋Š” ์•Š์ง€๋งŒ ๊ทธ๋ž˜๋„ ์•„์นจ์— ์ผ์–ด๋‚ฌ์„ ๋•Œ๋ณด๋‹ค ์ง€์‹์ด ๋Š˜์—ˆ๋‹ค.

BAD ๐Ÿ˜ฅ

๋„ˆ๋ฌด ๋†€์•„์„œ ๊ณต๋ถ€๋Ÿ‰ ์ž์ฒด๊ฐ€ ์ ๋‹คใ… 

TO DO ๐Ÿ”ฅ

  • DOM ๊ตฌ์กฐ
  • ์ด๋ฒคํŠธ
  • ๊ณ ์ฐจํ•จ์ˆ˜
  • react
  • node.js

Retrospect ๐Ÿง

์–ด์ œ ๋ฐค์— ์ž๋ฉด์„œ ๋“œ๋ผ๋งˆ๋ฅผ ๋ช‡๋ฒˆ ๋ณด๊ณ  ์žค๋”๋‹ˆ ์˜ค๋Š˜ ๋Šฆ์ž ๋„ ์ž๋ฒ„๋ ธ๊ณ , ์ผ์–ด๋‚˜์„œ๋„ ์นจ๋Œ€์— ๋นˆ๋‘ฅ๊ฑฐ๋ฆฌ๋‹ค๊ฐ€ ๋„ทํ”Œ๋ฆญ์Šค๋ฅผ ์ผœ๋ฒ„๋ ธ๋‹ค.

์ž๊ธฐ๋ฐ˜์„ฑ์˜ ์‹œ๊ฐ„์ด ํ•„์š”ํ•œ ์‹œ์ ์ธ ๋“ฏ ํ•˜๋‹ค.

Reference ๐Ÿ™‡

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ - https://ko.javascript.info/

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ