[JavaScript] μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성

객체 λ¦¬ν„°λŸ΄μ— μ˜ν•œ 객체 생성방식은 κ°€μž₯ 일반적으고 κ°„λ‹¨ν•œ 객체 생성 λ°©μ‹μž…λ‹ˆλ‹€. ν•˜μ§€λ§Œ, 이외에도 λ‹€μ–‘ν•œ λ°©λ²•μœΌλ‘œ 객체λ₯Ό 생성할 수 있고 각각의 μž₯단점이 μ‘΄μž¬ν•©λ‹ˆλ‹€. ** 객체 λ¦¬ν„°λŸ΄μ— μ˜ν•œ 객체 생성 방식에 λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ μ•„λž˜λ₯Ό μ°Έκ³ ν•˜μ„Έμš”. https://j-su2.tistory.com/56?category=1037205 [JavaScript] 객체 λ¦¬ν„°λŸ΄ κ°μ²΄λž€? μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 개체기반의 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œ, μ›μ‹œ 값을 μ œμ™Έν•œ λͺ¨λ“  값은 κ°μ²΄νƒ€μž…μž…λ‹ˆλ‹€. μ΄λŠ” λ‹€μ–‘ν•œ νƒ€μž…μ˜ 값을 ν•˜λ‚˜μ˜ λ‹¨μœ„λ‘œ κ΅¬μ„±ν•œ 볡합적인 자료ꡬ쑰둜 μ›μ‹œ κ°’κ³Ό λ‹€λ₯΄κ²Œ j-su2.tistory.com Object μƒμ„±μž ν•¨μˆ˜ new μ—°μ‚°μžμ™€ ν•¨κ»˜ Object μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ 빈 객체λ₯Ό μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•©λ‹ˆλ‹€. 이후 ν”„λ‘œνΌν‹° ..

[JavaScript] let, const ν‚€μ›Œλ“œμ™€ 블둝 레벨 μŠ€μ½”ν”„

var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜μ˜ 문제점 ES5κΉŒμ§€ λ³€μˆ˜λ₯Ό μ„ μ–Έν•  수 μžˆλŠ” μœ μΌν•œ 방법은 var ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€. λ‹€μŒκ³Ό 같은 var ν‚€μ›Œλ“œμ˜ λ…νŠΉν•œ νŠΉμ§•λ“€μ€ 주의λ₯Ό κΈ°μšΈμ΄μ§€ μ•ŠμœΌλ©΄ μ‹¬κ°ν•œ 문제λ₯Ό λ°œμƒμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€. λ³€μˆ˜ 쀑볡 μ„ μ–Έ ν—ˆμš© var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” 쀑볡 선언이 κ°€λŠ₯ν•΄μ„œ μ˜λ„μΉ˜ μ•Šκ²Œ λ¨Όμ € μ„ μ–Έλœ λ³€μˆ˜μ˜ 값이 λ³€κ²½λ˜λŠ” λΆ€μž‘μš©μ΄ λ°œμƒν•©λ‹ˆλ‹€. var x = 1; var y = 1; // var ν‚€μ›Œλ“œκ°€ μ—†λŠ” κ²ƒμ²˜λŸΌ λ™μž‘ var x = 100; // μ΄ˆκΈ°ν™”λ¬Έμ΄ μ—†λŠ” λ³€μˆ˜ 선언문은 λ¬΄μ‹œλ¨ var y; console.log(x); // 100 console.log(y); // 1 x와 yκ°€ 쀑볡 선언됨 xλŠ” μ΄ˆκΈ°ν™”λ¬Έμ΄ μžˆμ–΄μ„œ var ν‚€μ›Œλ“œκ°€ μ—†λŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•΄ 100으둜 값이 변경됨..

[JavaScript] μ „μ—­ λ³€μˆ˜μ˜ 문제점

λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ° λ³€μˆ˜λŠ” 생물과 μœ μ‚¬ν•˜κ²Œ μƒμ„±λ˜κ³  μ†Œλ©Έλ˜λŠ” 생λͺ… μ£ΌκΈ°λ₯Ό 가지고 있고 μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜μ—μ„œ μƒμ„±λ˜κ³  μ†Œλ©Έλ©λ‹ˆλ‹€. λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ°λŠ” λ©”λͺ¨λ¦¬ 곡간이 ν™•λ³΄λœ μ‹œμ λΆ€ν„° λ©”λͺ¨λ¦¬ 곡간이 ν•΄μ œλ˜μ–΄ κ°€μš© λ©”λͺ¨λ¦¬ 풀에 λ°˜ν™˜λ˜λŠ” μ‹œμ κΉŒμ§€λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. μ’…λ₯˜ 생λͺ… μ£ΌκΈ° 지역 λ³€μˆ˜ - ν•¨μˆ˜μ˜ 생λͺ… 주기와 λŒ€λΆ€λΆ„ 일치 - ν•¨μˆ˜κ°€ 호좜되면 μƒμ„±λ˜κ³  ν•¨μˆ˜κ°€ μ’…λ£Œν•˜λ©΄ μ†Œλ©Έ μ „μ—­ λ³€μˆ˜ - *μ „μ—­ 객체의 생λͺ… 주기와 일치 - μ½”λ“œκ°€ λ‘œλ“œλ˜μžλ§ˆμž κ³§λ°”λ‘œ ν•΄μ„λ˜κ³  싀행됨 - μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 생λͺ… 주기와 κ°™μŒ *μ „μ—­ 객체 : μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° 이전 단계에 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진에 μ˜ν•΄ μ–΄λ–€ 객체보닀도 λ¨Όμ € μƒμ„±λ˜λŠ” νŠΉμˆ˜ν•œ 객체. λΈŒλΌμš°μ € ν™˜κ²½μ€ window 객체, Node.js ν™˜κ²½μ—μ„œλŠ” global 객체λ₯Ό μ˜λ―Έν•¨ μ „μ—­ λ³€μˆ˜μ˜ 문제..

[JavaScript] μŠ€μ½”ν”„

μŠ€μ½”ν”„(Scope)λž€? μŠ€μ½”ν”„λŠ” μ§μ—­ν•˜μžλ©΄ "λ²”μœ„"λΌλŠ” 뜻이고, μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ μŠ€μ½”ν”„λŠ” μ‹λ³„μžκ°€ μœ νš¨ν•œ λ²”μœ„λ₯Ό λœ»ν•©λ‹ˆλ‹€. λ³€μˆ˜ 이름, ν•¨μˆ˜ 이름, 클래슀 이름 λ“± λͺ¨λ“  μ‹λ³„μžλŠ” μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜μ— μ˜ν•΄ λ‹€λ₯Έ μ½”λ“œκ°€ μ‹λ²½μž μžμ‹ μ„ μ°Έμ‘°ν•  수 μžˆλŠ” 유효 λ²”μœ„κ°€ κ²°μ •λ˜λŠ”λ° 이 유효 λ²”μœ„κ°€ μŠ€μ½”ν”„μž…λ‹ˆλ‹€. // μ „μ—­ λ³€μˆ˜ var x = 'global'; function foo() { // 지역 λ³€μˆ˜ var x = 'local'; console.log(x); // "local" } console.log(x); // "global" μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 이름이 같은 두 개의 λ³€μˆ˜ μ€‘μ—μ„œ μ–΄λ–€ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•΄μ•Ό ν•  것인지 μ‹λ³„μž 결정해야함 μŠ€μ½”ν”„λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μ‹λ³„μžλ₯Ό 검색할 λ•Œ μ‚¬μš©ν•˜λŠ” κ·œμΉ™ μŠ€μ½”ν”„ λ‚΄μ—μ„œ ..

[JavaScript] ν•¨μˆ˜

ν•¨μˆ˜λž€? μˆ˜ν•™μ˜ ν•¨μˆ˜λŠ” "μž…λ ₯"을 λ°›μ•„ "좜λ ₯"을 λ‚΄λ³΄λ‚΄λŠ” 일련의 과정을 μ •μ˜ν•œ κ²ƒμž…λ‹ˆλ‹€. ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ ν•¨μˆ˜λ„ 이와 같은 κ°œλ…μΈλ° 일련의 과정을 문으둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ κ²ƒμž…λ‹ˆλ‹€. // ν•¨μˆ˜ μ„ μ–Έ function add(x,y) { return x + y; } // ν•¨μˆ˜ 호좜 add(2,5); // λ°˜ν™˜κ°’ 7 ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ •μ˜λ₯Ό 톡해 μƒμ„±λ˜κ³  인수λ₯Ό λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜μ— μ „λ‹¬ν•˜λ©΄μ„œ ν•¨μˆ˜μ˜ 싀행을 λͺ…μ‹œμ μœΌλ‘œ μ§€μ‹œν•˜λŠ” ν•¨μˆ˜ ν˜ΈμΆœμ„ μ§„ν–‰ν•˜λ©΄ μ½”λ“œ 블둝에 λ‹΄κΈ΄ 문듀이 μΌκ΄„μ μœΌλ‘œ μ‹€ν–‰λ˜κ³  μ‹€ν–‰ 결과인 λ°˜ν™˜κ°’μ„ λ°˜ν™˜ν•©λ‹ˆλ‹€. μ‹λ³„μž : ν•¨μˆ˜λ₯Ό κ΅¬λΆ„ν•˜λŠ” ν•¨μˆ˜ 이름 (add) λ§€κ°œλ³€μˆ˜(parameter) : ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μž…λ ₯을 μ „λ‹¬λ°›λŠ” λ³€μˆ˜(x,y) 인수(argument) ..

[JavaScript] μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ

μ›μ‹œκ°’κ³Ό 객체의 차이점 μ›μ‹œκ°’κ³Ό 객체의 νŠΉμ§•μ„ μžμ„Ένžˆ μ•Œμ•„λ³΄κΈ° μ•žμ„œ 차이점을 ν‘œλ‘œ 정리해 λ³΄κ² μŠ΅λ‹ˆλ‹€. μ›μ‹œκ°’ 객체 νƒ€μž… λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’ λ³€κ²½ κ°€λŠ₯ν•œ κ°’ λ³€μˆ˜μ— ν• λ‹Ήν•˜λ©΄ λ³€μˆ˜μ— μ‹€μ œ 값이 μ €μž₯됨 λ³€μˆ˜μ— ν• λ‹Ήν•˜λ©΄ λ³€μˆ˜μ— 참쑰값이 μ €μž₯됨 λ‹€λ₯Έ λ³€μˆ˜μ— ν• λ‹Ήν•˜λ©΄ μ›μ‹œ 값이 λ³΅μ‚¬λ˜μ–΄ 전달 λ‹€λ₯Έ λ³€μˆ˜μ— ν• λ‹Ήν•˜λ©΄ μ°Έμ‘° 값이 λ³΅μ‚¬λ˜μ–΄ 전달(참쑰에 μ˜ν•œ 전달) μ›μ‹œ κ°’μ˜ νŠΉμ§• λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’ ν•œλ²ˆ μƒμ„±λœ μ›μ‹œ 값은 읽기 μ „μš©κ°’μœΌλ‘œ μ›μ‹œ νƒ€μž…μ˜ 값은 변경이 λΆˆκ°€λŠ₯ν•œ κ°’μž…λ‹ˆλ‹€. 값은 λ³€μˆ˜μ— μ €μž₯된 λ°μ΄ν„°λ‘œμ„œ ν‘œν˜„μ‹μ΄ ν‰κ°€λ˜μ–΄ μƒμ„±λœ κ²°κ³Όλ₯Ό λ§ν•˜κΈ° λ•Œλ¬Έμ— λ³€κ²½ λΆˆκ°€λŠ₯ν•˜λ‹€λŠ” 것은 λ³€μˆ˜κ°€ μ•„λ‹ˆλΌ μ›μ‹œ κ°’ 자체λ₯Ό λ³€κ²½ν•  수 μ—†λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ”°λΌμ„œ λΆˆλ³€μ„±μ„ κ°–λŠ” μ›μ‹œ 값을 ν• λ‹Ήν•œ λ³€μˆ˜λŠ” μž¬ν• λ‹Ή 이외에 λ³€μˆ˜ 값을 λ³€κ²½ν•  수 μžˆλŠ” ..

[JavaScript] 객체 λ¦¬ν„°λŸ΄

κ°μ²΄λž€? μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 개체기반의 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œ, μ›μ‹œ 값을 μ œμ™Έν•œ λͺ¨λ“  값은 κ°μ²΄νƒ€μž…μž…λ‹ˆλ‹€. μ΄λŠ” λ‹€μ–‘ν•œ νƒ€μž…μ˜ 값을 ν•˜λ‚˜μ˜ λ‹¨μœ„λ‘œ κ΅¬μ„±ν•œ 볡합적인 자료ꡬ쑰둜 μ›μ‹œ κ°’κ³Ό λ‹€λ₯΄κ²Œ λ³€κ²½ κ°€λŠ₯ν•œ κ°’μž…λ‹ˆλ‹€. 객체λ₯Ό μ •μ˜ν•˜μžλ©΄ ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ‘œ κ΅¬μ„±λœ μ§‘ν•©μ²΄μž…λ‹ˆλ‹€. ν”„λ‘œνΌν‹° : 객체의 μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λŠ” κ°’. keyκ³Ό value둜 ꡬ성. λ©”μ„œλ“œ : ν”„λ‘œνΌν‹°(μƒνƒœ 데이터)λ₯Ό μ°Έμ‘°ν•˜κ³  μ‘°μž‘ν•  수 μžˆλŠ” λ™μž‘. var counter = { num: 0, increase() { this.num++; } }; μœ„μ˜ μ˜ˆμ‹œμ™€ 같이 κ°μ²΄λŠ” μƒνƒœμ™€ λ™μž‘μ„ ν•˜λ‚˜μ˜ λ‹¨μœ„λ‘œ ꡬ쑰화 ν•  수 μžˆμ–΄μ„œ μœ μš©ν•©λ‹ˆλ‹€. 객체 λ¦¬ν„°λŸ΄μ— μ˜ν•œ 객체 생성 μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ μ–Έμ–΄λ‘œμ„œ λ‹€μ–‘ν•œ 객체 생성 방법을 μ§€μ›ν•©λ‹ˆλ‹€. 객체 *리..