관리 메뉴

λͺ©λ‘πŸ“š Language & CS knowledge/JavaScript (λͺ¨λ˜μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive) (39)

Daehyunii's Dev-blog

17μž₯ μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성

객체λ₯Ό μƒμ„±ν•˜λŠ” λ°©μ‹μ—λŠ” μ—¬λŸ¬κ°€μ§€κ°€ μžˆλ‹€. λŒ€ν‘œμ μœΌλ‘œ μ•žμ„œ 배운 객체 λ¦¬ν„°λŸ΄μ„ μ‚¬μš©ν•˜λŠ” 방법이 μžˆλ‹€. μ΄λ²ˆμ— 곡뢀 ν•  λ‚΄μš©μ€ μƒμ„±μž ν•¨μˆ˜λ₯Ό ν†΅ν•œ 객체 생성이닀. 17.1 Object μƒμ„±μž ν•¨μˆ˜(빌트인 μƒμ„±μž ν•¨μˆ˜) new μ—°μ‚°μžμ™€ ν•¨κ»˜ Object μƒμ„±μž ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ 빈 객체λ₯Ό μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€. 빈 객체λ₯Ό μƒμ„±ν•œ 이후 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•˜μ—¬ 객체λ₯Ό μ™„μ„±ν•  수 μžˆλ‹€. μƒμ„±μž ν•¨μˆ˜λž€ new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” ν•¨μˆ˜λ₯Ό λ§ν•œλ‹€. μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•΄ μƒμ„±λœ 객체λ₯Ό μΈμŠ€ν„΄μŠ€λΌ ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” Object μƒμ„±μž ν•¨μˆ˜ 외에도 μ—¬λŸ¬κ°€μ§€ 빌트인 μƒμ„±μž ν•¨μˆ˜λ₯Ό μ œκ³΅ν•œλ‹€. (String, Number, Boolean, Function, Array, Date, RegExp, Promi..

16μž₯ ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈ

16.1 λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œ ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈλ₯Ό μ΄ν•΄ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ¨Όμ € λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œμ˜ κ°œλ…μ— λŒ€ν•΄ μ•Œκ³  μžˆμ–΄μ•Ό ν•œλ‹€. λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ κ΅¬ν˜„ μ•Œκ³ λ¦¬μ¦˜μ„ μ„€λͺ…ν•˜κΈ° μœ„ν•΄ ECMAScript μ‚¬μ–‘μ—μ„œ μ‚¬μš©ν•˜λŠ” μ˜μ‚¬ ν”„λ‘œνΌν‹°μ™€ μ˜μ‚¬ λ©”μ„œλ“œλ‹€. ECMAScript 사양에 λ“±μž₯ν•˜λŠ” 이쀑 λŒ€κ΄„ν˜Έ( [[...]] )둜 감싼 이름듀이 λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œλ‹€. λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ λ‚΄λΆ€ λ‘œμ§μ΄λ―€λ‘œ μ›μΉ™μ μœΌλ‘œ 직접 μ ‘κ·Όν•˜κ±°λ‚˜ ν˜ΈμΆœν•  수 μžˆλŠ” 방법을 μ œκ³΅ν•˜μ§€ μ•ŠλŠ”λ‹€. 단, 일뢀 λ‚΄λΆ€ 슬둯과 λ‚΄λΆ€ λ©”μ„œλ“œμ— ν•œν•˜μ—¬ κ°„μ ‘μ μœΌλ‘œ μ ‘κ·Όν•  수 μžˆλŠ” μˆ˜λ‹¨μ„ μ œκ³΅ν•  뿐이닀. (ex __proto__) 16.2 ν”„λ‘œνΌν‹° μ–΄νŠΈλ¦¬λ·°νŠΈμ™€ ν”„λ‘œνΌν‹° λ””μŠ€ν¬λ¦½ν„° 객체 μžλ°”μŠ€ν¬..

15μž₯ let, const ν‚€μ›Œλ“œμ™€ 블둝 레벨 μŠ€μ½”ν”„

15.1 var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜μ˜ 문제점 ES5κΉŒμ§€ λ³€μˆ˜λ₯Ό μ„ μ–Έν•  수 μžˆλŠ” μœ μΌν•œ 방법은 var ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμ΄μ—ˆλ‹€. var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ λ³€μˆ˜λŠ” λ…νŠΉν•œ νŠΉμ§•μ΄ μžˆλ‹€. 15.1.1 λ³€μˆ˜ 쀑볡 μ„ μ–Έ ν—ˆμš© var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” 쀑볡 선언이 κ°€λŠ₯ν•˜λ‹€. var x = 1; // λ³€μˆ˜ μ„ μ–Έ 및 κ°’μ˜ ν• λ‹Ή var x = 100; // μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진에 μ˜ν•΄ var ν‚€μ›Œλ“œκ°€ λ¬΄μ‹œλ˜κ³  x λ³€μˆ˜μ— μž¬ν• λ‹Ήμ΄ 이뀄진닀. console.log(x); // 100 15.1.2 ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„ μ•žμ—μ„œ μ •λ¦¬ν•œ λ‚΄μš©κ³Ό 같이 var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ˜€λ‘œμ§€ ν•¨μˆ˜μ˜ μ½”λ“œ λΈ”λ‘λ§Œμ„ 지역 μŠ€μ½”ν”„λ‘œ μΈμ •ν•œλ‹€. λ”°λΌμ„œ ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œ var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ½”λ“œ 블둝 λ‚΄μ—μ„œ 선언해도 λͺ¨λ‘ μ „μ—­ λ³€μˆ˜κ°€ λœλ‹€..

14μž₯ μ „μ—­ λ³€μˆ˜μ˜ 문제점

14.1 λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ° 14.1.1 지역 λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ° λ³€μˆ˜λŠ” 선언에 μ˜ν•΄ μƒμ„±λ˜κ³  할당을 톡해 값을 κ°–λŠ”λ‹€. 그리고 μ–Έμ  κ°€ μ†Œλ©Έν•œλ‹€. 즉 λ³€μˆ˜λŠ” 생물과 μœ μ‚¬ν•˜κ²Œ μƒμ„±λ˜κ³  μ†Œλ©Έλ˜λŠ” 생λͺ… μ£ΌκΈ°κ°€ μžˆλ‹€. λ³€μˆ˜λŠ” μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜(μ „μ—­or지역)μ—μ„œ μƒμ„±λ˜κ³  μ†Œλ©Έν•œλ‹€. μ „μ—­ λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ°λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 생λͺ… 주기와 κ°™λ‹€. ν•˜μ§€λ§Œ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ„ μ–Έλœ 지역 λ³€μˆ˜λŠ” ν•¨μˆ˜κ°€ 호좜되면 μƒμ„±λ˜κ³  ν•¨μˆ˜κ°€ μ’…λ£Œν•˜λ©΄ μ†Œλ©Έν•œλ‹€. 즉, 지역 λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ°λŠ” ν•¨μˆ˜μ˜ 생λͺ… 주기와 μΌμΉ˜ν•œλ‹€. λ‹€μ‹œ 말해 지역 λ³€μˆ˜λŠ” ν•¨μˆ˜κ°€ 호좜되면 지역 λ³€μˆ˜κ°€ μƒμ„±λ˜κ³ , ν•¨μˆ˜μ˜ μ’…λ£Œμ™€ ν•¨κ»˜ 지역 λ³€μˆ˜λ„ μ†Œλ©Έν•œλ‹€. 14.1.2 μ „μ—­ λ³€μˆ˜μ˜ 생λͺ… μ£ΌκΈ° ν•¨μˆ˜μ™€ 달리 μ „μ—­ μ½”λ“œλŠ” λͺ…μ‹œμ μΈ 호좜 없이 μ‹€ν–‰λœλ‹€. λ‹€μ‹œ 말해, μ „μ—­ μ½”λ“œλŠ” ν•¨μˆ˜ ..

13μž₯ μŠ€μ½”ν”„

13.1 μŠ€μ½”ν”„λž€? μŠ€μ½”ν”„λž€ μ‹λ³„μž μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜μ— μ˜ν•΄ λ‹€λ₯Έ μ½”λ“œκ°€ μ‹λ³„μž μžμ‹ μ„ μ°Έμ‘°ν•  수 μžˆλŠ” 유효 λ²”μœ„λ₯Ό λ§ν•œλ‹€. 즉, μŠ€μ½”ν”„λŠ” μ‹λ³„μžκ°€ μœ νš¨ν•œ λ²”μœ„λ₯Ό λ§ν•œλ‹€. μ•žμ„œ κ²½ν—˜ν•œ 바와 같이 ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μ°Έμ‘°ν•  수 있고 ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” μ°Έμ‘°ν•  수 μ—†λ‹€. 이것은 λ§€κ°œλ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μžˆλŠ” μœ νš¨λ²”μœ„, 즉 λ§€κ°œλ³€μˆ˜μ˜ μŠ€μ½”ν”„κ°€ ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€λ‘œ ν•œμ •λ˜κΈ° λ•Œλ¬Έμ΄λ‹€. function add(x, y){ console.log(x, y); return x + y; } console.log(add(2, 5)); // 2 5 // 7 console.log(x,y); // ReferenceErrorλ°œμƒ λ³€μˆ˜λŠ” μ½”λ“œμ˜ κ°€μž₯ λ°”κΉ₯ μ˜μ—­λΏ μ•„λ‹ˆλΌ μ½”λ“œ λΈ”λ‘μ΄λ‚˜ ν•¨μˆ˜ λͺΈμ²΄ λ‚΄μ—μ„œλ„ μ„ μ–Έν•  수 ..

12μž₯ ν•¨μˆ˜

12.1 ν•¨μˆ˜λž€? ν•¨μˆ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ κ°€μž₯ μ€‘μš”ν•œ 핡심 κ°œλ…μ΄λ‹€. ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ ν•¨μˆ˜λŠ” 일련의 과정을 문으둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ 것이닀. ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ •μ˜λ₯Ό 톡해 μƒμ„±ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” λ‹€μ–‘ν•œ λ°©λ²•μœΌλ‘œ μ •μ˜ν•  수 μžˆλ‹€. // ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜ function add(x,y){ return x + y; } ν•¨μˆ˜ μ •μ˜λ§ŒμœΌλ‘œ ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λŠ” 것은 μ•„λ‹ˆλ‹€. 인수λ₯Ό λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜μ— μ „λ‹¬ν•˜λ©΄μ„œ ν•¨μˆ˜μ˜ 싀행을 λͺ…μ‹œμ μœΌλ‘œ μ§€μ‹œν•΄μ•Ό ν•œλ‹€. 이λ₯Ό ν•¨μˆ˜ 호좜이라 ν•œλ‹€. ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ μ½”λ“œ 블둝에 λ‹΄κΈ΄ 문듀이 μΌκ΄„μ μœΌλ‘œ μ‹€ν–‰λ˜κ³  μ‹€ν–‰ κ²°κ³Ό, 즉 λ°˜ν™˜κ°’μ„ λ°˜ν™˜ν•œλ‹€. function add(x,y){ return x + y; } console.log(add(2,3..

11μž₯ μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ

11μž₯ μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ μ›μ‹œ νƒ€μž…μ˜ κ°’(μ›μ‹œ κ°’) 객체 νƒ€μž…μ˜ κ°’(객체) κ°’μ˜ λ³€κ²½ κ°€λŠ₯ μ—¬λΆ€ λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’ λ³€κ²½ κ°€λŠ₯ν•œ κ°’ λ³€μˆ˜μ— ν• λ‹Ήμ‹œ, μ €μž₯λ˜λŠ” 것 μ‹€μ œ 값이 μ €μž₯ μ°Έμ‘° 값이 μ €μž₯ 값이 ν• λ‹Ή 된 λ³€μˆ˜λ₯Ό λ‹€λ₯Έ λ³€μˆ˜μ— ν• λ‹Ήμ‹œ 값에 μ˜ν•œ 전달(μ›μ‹œ κ°’ 볡사) 참쑰에 μ˜ν•œ 전달(μ°Έμ‘° κ°’ 볡사) 11.1 μ›μ‹œ κ°’ 11.1.1 λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’(μ›μ‹œ νƒ€μž…μ˜ κ°’, μ›μ‹œ κ°’) μ›μ‹œ νƒ€μž…μ˜ κ°’, 즉 μ›μ‹œ 값은 λ³€κ²½ λΆˆκ°€λŠ₯ν•œ 값이닀. ν•œλ²ˆ μƒμ„±λœ μ›μ‹œ 값은 읽기 μ „μš© κ°’μœΌλ‘œ λ³€κ²½ν•  수 μ—†λ‹€. λ³€κ²½ λΆˆκ°€λŠ₯ν•˜λ‹€λŠ” 것은 λ³€μˆ˜κ°€ μ•„λ‹ˆλΌ 값에 λŒ€ν•œ 이야기이닀. λ³€μˆ˜λŠ” μž¬ν• λ‹Ήμ„ 톡해 μ–Έμ œλ“ μ§€ λ³€μˆ˜ 값을 λ³€κ²½ν•  수 μžˆλ‹€. μž¬ν• λ‹Ή μ΄μ „μ˜ μ›μ‹œ 값을 λ³€κ²½ν•˜λŠ” 것이 μ•„λ‹ˆλΌ μƒˆλ‘œμš΄ λ©”λͺ¨λ¦¬ 곡간을 ν™•λ³΄ν•˜κ³  μž¬ν• λ‹Ήν•œ μ›μ‹œ 값을 ..