μŠ€ν„°λ””/KAKAOCLOUDSCHOOL

[JavaScript] 개발자 지망생 μŠ€ν„°λ”” - 3일차

shineIT 2022. 11. 4. 23:21

JavaScript

πŸ’‘ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ μ‹€ν–‰ 방식
  πŸ‘‰ μ†ŒμŠ€ μ½”λ“œ 전체λ₯Ό λ²ˆμ—­ν•΄μ„œ λΉŒλ“œλ₯Ό μˆ˜ν–‰ν•œ ν›„ μ‹€ν–‰ν•˜λŠ” 방식 - C & C++, C#, Java λ“±
  πŸ‘‰ μ€„ λ‹¨μœ„λ‘œ λ²ˆμ—­ν•˜λ©΄μ„œ μ‹€ν–‰ν•˜λŠ” 방식 - Python, JavaScript λ“± (μ•„λž˜μͺ½μ— μ—λŸ¬κ°€ μžˆλ”λΌλ„ μœ„μͺ½μ˜ μ½”λ“œλŠ” μ‹€ν–‰ κ°€λŠ₯)

 

β–  JavaScript

  • μ›Ή νŽ˜μ΄μ§€μ˜ λ™μ  μ²˜λ¦¬λ₯Ό ν–₯μƒμ‹œν‚€κΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ νƒ„μƒν•œ μ–Έμ–΄ - λ„·μŠ€μΌ€μ΄ν”„ μ‚¬μ—μ„œ κ°œλ°œ
  • λ¬Έλ²•μ μœΌλ‘œλŠ” Java μ™€ μ•„λ¬΄λŸ° κ΄€λ ¨μ΄ μ—†κ³  Java의 λͺ‡ λͺ‡ ν΄λž˜μŠ€λ₯Ό κ°€μ Έμ™€μ„œ μ‚¬μš©
  • κΈ°λ³Έμ μœΌλ‘œλŠ” μ›Ή λΈŒλΌμš°μ € λ‚΄μ—μ„œλ§Œ λ™μž‘ν•˜λŠ” ν΄λΌμ΄μ–ΈνŠΈ κΈ°λ°˜μ˜ μ–Έμ–΄
  • 컴파일 ν•˜μ§€ μ•Šκ³  μ›Ή λΈŒλΌμš°μ €μ— μžˆλŠ” JavaScript Interpreter Engine μ΄ ν•΄μ„ν•΄μ„œ μ‹€ν–‰
  • μœ λ‹ˆμ½”λ“œλ₯Ό μ‚¬μš©ν•˜κ³  λŒ€μ†Œλ¬Έμžλ₯Ό κ΅¬λ³„
  • 동적 λ°”인딩(Dynamic Binding): μ‹€ν–‰ν•  λ•Œ λ©”λͺ¨λ¦¬μ˜ ν¬κΈ°κ°€ κ²°μ •됨
    • 이름을 λ§Œλ“€ λ•ŒλŠ” λ©”λͺ¨λ¦¬ 곡간 확보λ₯Ό ν•˜μ§€ μ•Šκ³  μ‹€μ œ 데이터가 λŒ€μž…λ  λ•Œ λ©”λͺ¨λ¦¬ 곡간을 확보
  • 객체 κΈ°λ°˜ μ–Έμ–΄: ν΄λž˜μŠ€λ₯Ό λ§Œλ“€μ§€ μ•Šκ³  λ°”λ‘œ κ°μ²΄λ₯Ό μƒμ„±ν•΄μ„œ μ‚¬μš©ν•˜λŠ” κ²ƒμ΄ κ°€λŠ₯
    • μ΅œκ·Όμ—λŠ” 클래슀λ₯Ό λ§Œλ“œλŠ” 문법이 μΆ”κ°€ - ES6, TypeScript
  • HTML5 μ˜ κΈ°λ°˜ μ–Έμ–΄
  • λ§Žμ€ λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ‘΄μž¬
    • jQuery: ν¬λ‘œμŠ€ λΈŒλΌμš°μ§•(ν•˜λ‚˜μ˜ μ½”λ“œλ‘œ μ—¬λŸ¬ λΈŒλΌμš°μ €μ—μ„œ μˆ˜ν–‰λ˜λ„둝)을 μ§€μ›ν•˜κΈ° μœ„ν•΄ λ“±μž₯
    • express.js, node.js: Application Serverλ₯Ό λ§Œλ“€κΈ° μœ„ν•œ λΌμ΄λΈŒλŸ¬λ¦¬
    • angular, react, vue: SPA(Single Page Applicaiton) κ΅¬ν˜„을 μœ„ν•œ λΌμ΄λΈŒλŸ¬λ¦¬
    • d3js: κ·Έλž˜ν”„ κ΅¬ν˜„을 μœ„ν•œ λΌμ΄λΈŒλŸ¬λ¦¬
    • bootstrap: λ°˜μ‘ν˜• μ›Ή λ””μžμΈμ„ μ‰½κ²Œ ν•΄μ£ΌλŠ” 라이브러리
    • react-native, ionic: λͺ¨λ°”일 μ•± κ°œλ°œμ„ μœ„ν•œ 라이브러리
    • eletron: pc 용 μ•± 개발 :
      • πŸ‘‰ M(Mongo DB)E(Express.js)A(Angular.js)N(Node.js), MER(React.js)N
  • μ’…λ₯˜
    • ECMA 5 - ES5: 2015λ…„ μ΄μ „μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ
    • ECMA 2015 ~ : ES6 λΆ€ν„° μ‹œμž‘ν•˜λŠ”λ° λ§€λ…„ λ°œν‘œ, ESNext
    • ESNext 에 Type 을 μΆ”κ°€ν•œ MS 의 TypeScript

β–  μž‘μ„±

  • 외뢀에 μž‘μ„±ν•΄μ„œ λΆˆλŸ¬λ“€μ΄λŠ” 방식
<script src="μžλ°”μŠ€ν¬λ¦½νŠΈ 파일의 경둜"></script>
    • μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ˜ ν™•μž₯μžλŠ” jsλ₯Ό μ£Όλ‘œ μ‚¬μš©
    • νƒ€μž…μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ˜ ν™•μž₯μžλŠ” tsλ₯Ό μ£Όλ‘œ μ‚¬μš©
    • reactμ—μ„œ μ»΄ν¬λ„ŒνŠΈ νŒŒμΌμ˜ ν™•μž₯자λ₯Ό κ΅¬λ³„ν•˜κΈ° μœ„ν•΄μ„œ jsx λ₯Ό μ‚¬μš©
  • HTML 파일 내뢀에 슀크립트 μ˜μ—­μ„ λ§Œλ“€μ–΄μ„œ μ‚¬μš© : <script> λ‚΄μš© </script>
  • νƒœκ·Έ μ•ˆμ— μ‚¬μš© : <νƒœκ·Έ μ΄λ²€νŠΈ="슀크립트 μ½”λ“œ" ... />
    • 가독성이 떨어짐

β–  κ·œμΉ™

  • HTML κ³Ό JavaScriptλŠ” μœ„μ—μ„œλΆ€ν„° μ½μ–΄μ„œ μˆœμ°¨μ μœΌλ‘œ μ‹€ν–‰
    • HTML에 μž‘μ„±λœ νƒœκ·Έλ“€μ„ JavaScriptμ—μ„œ μ‚¬μš©μ„ ν•  λ•ŒλŠ” λ©”λͺ¨λ¦¬μ— λ‘œλ“œκ°€ 되고 λ‚œ 이후에 μ‚¬μš©.
  • JavaScriptλŠ” ν•œ 쀄에 2개 μ΄μƒμ˜ 싀행문이 올 λ•Œ, 이λ₯Ό κ΅¬λΆ„ν•˜κΈ° μœ„ν•΄μ„œ μ„Έλ―Έμ½œλ‘ (;)으둜 ꡬ뢄해야 함. ν•œ 쀄에 ν•˜λ‚˜μ˜ λͺ…λ Ήλ¬Έλ§Œ μ˜€λŠ” κ²½μš°λŠ” μ„Έλ―Έμ½œλ‘ (;)을 ν•˜μ§€ μ•Šμ•„λ„ λ˜μ§€λ§Œ, 가독성과 개발자의 κ΄€μŠ΅μœΌλ‘œ μ„Έλ―Έμ½œλ‘ (;)을 μž‘μ„±ν•˜λŠ” 것이 μΌλ°˜μ μž„.
  • 주석
    • ν•œ μ€„ μ£Όμ„μ€ // λ’€μ— μž‘μ„±
    • μ—¬λŸ¬ μ€„ μ£Όμ„μ€ /* λ‚΄μš© */ μ•ˆμ— μž‘μ„±
  • μžˆλŠ” κ·ΈλŒ€λ‘œ ν•΄μ„
    • <![CDATA[]]> μ—μ„œ [] μ•ˆμ— μž‘μ„±ν•œ λ‚΄μš©μ€ ν•΄μ„ν•˜μ§€ μ•Šκ³  ν•˜λ‚˜μ˜ λ¬Έμžμ—΄λ‘œ νŒλ‹¨ν•¨.


β–  κ΅¬μ„± μš”μ†Œ

  • Keyword(μ˜ˆμ•½μ–΄)
    • JavaScriptμ—μ„œ 의미λ₯Ό λΆ€μ—¬ν•œ 단어 : 의미 변경이 μ•ˆλ¨
    • Control Character(μ œμ–΄λ¬Έμž): ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—μ„œ \ λ‹€μŒμ— 영문자 ν•˜λ‚˜λ₯Ό μΆ”κ°€ν•΄μ„œ κΈ°λŠ₯을 λΆ€μ—¬ν•œ 문자
      • \n: μ€„ λ°”κΏˆ
      • \t: νƒ­
      • \': μž‘은 λ”°μ˜΄ν‘œ
      • \": ν° λ”°μ˜΄ν‘œ
      • \\: \
      • \0: null
  • Identifier
    • μ‚¬μš©μžκ°€ μ˜λ―Έλ₯Ό λΆ€μ—¬ν•œ λ‹¨μ–΄
    • KeywordλŠ” μ‚¬μš©ν•˜λ©΄ μ•ˆλ¨
    • 숫자둜 μ‹œμž‘ X
    • νŠΉμˆ˜λ¬ΈμžλŠ” _ 와 $ 만 κ°€λŠ₯
    • 쀑간 곡백 μ•ˆλ¨
  • Data
    • Literal: μ‚¬μš©μžκ°€ μ§μ ‘ μž…λ ₯ν•˜λŠ” λ°μ΄ν„°
      • 숫자의 κ²½μš°λŠ” μ •μˆ˜ μ™€ μ‹€μˆ˜ ν˜•νƒœλ‘œ μž‘μ„±: 19, 28.4 -> 10μ§„μˆ˜ ν˜•νƒœλ‘œ μž‘μ„±
      • λ¬Έμžμ—΄μ˜ κ²½μš°λŠ” μž‘은 λ”°μ˜΄ν‘œ λ‚˜ ν° λ”°μ˜΄ν‘œ μ•ˆμ— κΈ°μž¬ -> 'a', "a"...
      • μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ¬Έμž μ™€ λ¬Έμžμ—΄μ„ κ΅¬λΆ„ν•˜μ§€ μ•ŠμŒ
      • Boolean μ˜ κ²½μš°λŠ” true μ™€ false
      • null: κ°€λ¦¬ν‚€λŠ” κ²ƒμ΄ μ—†μŒ
    • Variable(Identifier): λ°μ΄ν„°μ— λΆ™μΈ μ΄λ¦„
      • 일반적인 λ°μ΄ν„°: κ°’μ΄λ‚˜ κ°’λ“€μ˜ λͺ¨μž„
      • ν•¨μˆ˜: κΈ°λŠ₯을 μˆ˜ν–‰ν•˜λŠ” μ½”λ“œμ˜ λͺ¨μž„
      • 객체: λ°μ΄ν„° λ‚˜ ν•¨μˆ˜μ˜ λͺ¨μž„
      • 이름을 μƒμ„±ν•˜κ³  λ°μ΄ν„°λ₯Ό λŒ€μž…
      • var(let, const) 이름 = 데이터;

β–  좜λ ₯

  • λΈŒλΌμš°μ € 화면에 좜λ ₯
    • document.write(좜λ ₯ν•  λ‚΄μš©): λ²„퍼에 λͺ¨μ•„μ„œ μΆœλ ₯
    • document.writeln(좜λ ₯ν•  λ‚΄μš©): λ°”λ‘œ λ°”λ‘œ μΆœλ ₯, μ€„λ°”κΏˆλ„ ν•΄μ€Œ - HTMLμ—μ„œλŠ” νƒœκ·Έλ₯Ό μ΄μš©ν•΄μ„œ μ€„ λ°”κΏˆμ„ ν•¨.
  • λŒ€ν™”μƒμžμ— μΆœλ ₯
    • alert(좜λ ₯ν•  λ‚΄μš©)
  • 디버그 μ½˜μ†”에 μΆœλ ₯
    • console.log(좜λ ₯ν•  λ‚΄μš©)
      • μ½˜μ†”μ— 좜λ ₯ν•˜λ©΄ λΈŒλΌμš°μ € ν™”λ©΄μ—λŠ” 보이지 μ•Šκ³  λΈŒλΌμš°μ €μ˜ console μ°½μ΄λ‚˜ IDE의 console 창에 λ³΄μž„.

β–  Data μ˜ λΆ„λ₯˜ 

  • Immutable Data(λ³€κ²½ λΆˆκ°€λŠ₯ν•œ λ°μ΄ν„° - μ—¬λŸ¬ κ³³μ—μ„œ κ°™μ΄ μ‚¬μš©ν•˜κ±°λ‚˜ μ˜΅μ…˜) μ™€ Mutable Data(λ³€κ²½ κ°€λŠ₯ν•œ λ°μ΄ν„°)
  • Scala Data(1개의 λ°μ΄ν„°) μ™€ Vector Data(0개 μ΄μƒμ˜ λ°μ΄ν„° - List μ™€ Map)
    • μ΄λ¦„μ—λŠ” ν•˜λ‚˜μ˜ λ°μ΄ν„°λ§Œ λ§€ν•‘ κ°€λŠ₯
    • Scala Data 의 κ²½μš°λŠ” 이름이 데이터λ₯Ό μ˜λ―Έν•˜μ§€λ§Œ Vector Data 같은 κ²½μš°λŠ” 이름 μ΄μ™Έμ˜ λ³„λ„μ˜ 무엇인가가 μΆ”κ°€λ˜μ–΄μ•Ό 데이터λ₯Ό 의미. [인덱슀] λ˜λŠ” .이름
  • λ°μ΄ν„°μ˜ λͺ¨μ–‘에 λ”°λ₯Έ λΆ„λ₯˜
    • μ •ν˜• 데이터: λͺ¨λ“  λ°μ΄ν„°μ˜ λͺ¨μ–‘이 일정 - class, RDBMS
    • λΉ„μ •ν˜• λ°μ΄ν„°: λ°μ΄ν„°μ˜ λͺ¨μ–‘이 μΌμ •ν•˜μ§€ μ•Šμ€ κ²ƒ - Map, NoSQL
    • λ°˜μ •ν˜• λ°μ΄ν„°: λͺ¨μ–‘은 μΌμ •ν•˜μ§€ μ•Šμ€ κ²ƒ μ²˜λŸΌ λ³΄μ΄μ§€λ§Œ μ •ν˜•μœΌλ‘œ λ§Œλ“€ μˆ˜ μžˆλŠ” λ°μ΄ν„° - xml, json λ“± 

β–  Variable (λ³€μˆ˜) : 데이터에 λΆ™μ΄λŠ” μ΄λ¦„

  • λΆ„λ₯˜
    • Local Variable(μ§€μ—­ λ³€μˆ˜) - μžμ‹ μ˜ μ˜μ—­(μžλ°”μŠ€ν¬λ¦½νŠΈ λ‚˜ μžλ°”μ—μ„œλŠ” { }을 μ˜μ—­μœΌλ‘œ κ°„μ£Ό) λ‚΄μ—μ„œλ§Œ μ‚¬μš©μ΄ κ°€λŠ₯
    • Member Variable(멀버 λ³€μˆ˜) - λˆ„κ΅°κ°€(클래슀 λ‚˜ μΈμŠ€ν„΄μŠ€)에 μ†Œμ†λœ λ³€μˆ˜
    • Global Variable(μ „μ—­ λ³€μˆ˜) - μ˜μ—­ μ™ΈλΆ€μ—μ„œ μ„ μ–Έν•΄μ„œ λͺ¨λ“  κ³³μ—μ„œ μ‚¬μš©μ΄ κ°€λŠ₯
  • μ„ μ–Έ(생성) λ°©λ²•
이름;// μ΄λ ‡κ²Œ λ§Œλ“€λ©΄ μ „μ—­ λ³€μˆ˜
var(let λ˜λŠ” const) 이름; // μ§€μ—­ λ³€μˆ˜ λ‚˜ 멀버 λ³€μˆ˜
    • ν•¨μˆ˜ λ‚΄μ—μ„œ var λ‚˜ let, const 없이 이름을 λ§Œλ“€λ©΄ ν•¨μˆ˜κ°€ 호좜된 μ΄ν›„μ—λŠ” μ–΄λ””μ„œλ“ μ§€ μ‚¬μš©ν•  수 있게 λ˜μ–΄ 버림
    • var λ‚˜ let μ΄λ‚˜ const 와 ν•¨κ»˜ λ§Œλ“€μ–΄μ§€λ©΄ μžμ‹ μ˜ μ˜μ—­ λ‚΄μ—μ„œλ§Œ μ‚¬μš©μ΄ κ°€λŠ₯
    • μ΅œκ·Όμ—λŠ” var λ‚˜ let μ΄λ‚˜ const 없이 이름 λ§Œλ“œλŠ” 것을 잘 ν•˜μ§€ μ•ŠμŒ.
  • λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό λŒ€μž…
    • 이름 = 데이터; 
    • λ°μ΄ν„°λŠ” λ¦¬ν„°λŸ΄ μ΄λ‚˜ λ‹€λ₯Έ λ³€μˆ˜ λ˜λŠ” μ½”λ“œ κ°€λŠ₯
  • λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄μ„œ λŒ€μž…
    • var(let λ˜λŠ” const) μ΄λ¦„ = λ°μ΄ν„°;
    • var λ‚˜ let λ˜λŠ” const λΌλŠ” λ‹¨μ–΄μ—†μ΄ μƒˆλ‘œμš΄ μ΄λ¦„을 λ§Œλ“œλŠ” κ²ƒλ„ κ°€λŠ₯
  • 이름을 λ§Œλ“€ λ•ŒλŠ” κΈ°μ–΅ν•˜κΈ° μ’‹μ•„μ•Ό ν•˜κ³  μ΄λ¦„λ§ŒμœΌλ‘œ 데이터λ₯Ό μ˜ˆμΈ‘ν•  수 μžˆμ–΄μ•Ό 함.
  • let
    • var ν‚€μ›Œλ“œμ˜ λ¬Έμ œμ μ„ ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œ λ“±μž₯
    • λ™μΌν•œ scope μ•ˆμ—μ„œ λ™μΌν•œ μ΄λ¦„μ˜ let λ³€μˆ˜λ₯Ό μ„ μ–Έν•œ 수 μ—†κ³  μ‚¬μš©λ§Œ ν•΄μ•Ό 함
    <script>
        var x = 1000;//1000 μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό x 에 λŒ€μž…
        x =  100; //100μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό x에 λŒ€μž… - μˆ˜μ •
        //λ™μΌν•œ 이름을 κ³„μ†ν•΄μ„œ μƒμ„±ν•˜λŠ” 것이 κ°€λŠ₯ - μ‹€μ œλ‘œλŠ” μˆ˜μ •
        var x = 2000; //2000 μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό x 에 λŒ€μž…

        let y = 1000;//1000 μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό y 에 λŒ€μž…
        y =  100; //100μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό y에 λŒ€μž… - μˆ˜μ •
        //λ™μΌν•œ 이름을 κ³„μ†ν•΄μ„œ μƒμ„±ν•˜λŠ” 것이 λΆˆκ°€λŠ₯
        //var y = 2000; //2000 μ΄λΌλŠ” λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό y 에 λŒ€μž…
    </script>

 

    • hosting이 λ˜μ§€ μ•ŠμŒ
      • hosting: μ΄λ¦„을 λ§Œλ“€κΈ° μ „에 μ‚¬μš©ν•˜λŠ” κ²ƒ
      • var λŠ” hosting이 κ°€λŠ₯
    • undefined: μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” μ΄λ¦„μœΌλ‘œ null κ³ΌλŠ” λ‹€λ¦„
      • 이름을 λ§Œλ“€κ³  λ°μ΄ν„°λ₯Ό λŒ€μž…ν•˜μ§€ μ•Šκ±°λ‚˜ μ΄λ¦„이 μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” κ²½μš°
    <script>
        //x λŠ” var 둜 μ„ μ–Έλ˜μ„œ λ§Œλ“€κΈ° 전에 ν˜ΈμΆœν•˜λ©΄ undefined
        console.log(x);
        var x = 100;
        console.log(x);

        //y λŠ” let으둜 μ„ μ–Έλ˜μ„œ λ§Œλ“€κΈ° 전에 ν˜ΈμΆœν•˜λ©΄ error
        console.log(y);
        let y = 100;
        console.log(y);
    </script>

 

    • λ™μΌν•œ λΈ”λŸ­μ—μ„œ let을 μ΄μš©ν•΄μ„œ 두 번 μƒμ„±ν•˜λŠ” 것은 μ•ˆλ˜μ§€λ§Œ 블둝이 λ‹€λ₯΄λ©΄ κ°€λŠ₯.
    • λΈ”λŸ­μ΄ λ³€κ²½λ˜κ±°λ‚˜ μƒˆλ‘œ λ§Œλ“€μ–΄μ§€λ©΄ 이름 곡간이 μƒˆλ‘œ λ§Œλ“€μ–΄μ§€κΈ° λ•Œλ¬Έ
   <script>
        let data = 10;
        console.log("data:" + data);
        //λ¬Έμžμ—΄ κ³Ό 데이터λ₯Ό + ν•˜λ©΄ 데이터λ₯Ό λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•΄μ„œ κ²°ν•©
        data = 20; //κΈ°μ‘΄ 데이터가 μ°Έμ‘°ν•˜κ³  μžˆλŠ” 데이터λ₯Ό μˆ˜μ •
        {
            //κΈ°μ‘΄ λ°μ΄ν„°μ˜ 값을 λ³€κ²½ν•˜λŠ” 것이 μ•„λ‹ˆκ³  μƒˆλ‘œμš΄ μ˜μ—­μ— dataλ₯Ό λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€.
            //μ—¬λŸ¬ λΈ”λŸ­μ— λ™μΌν•œ 이름이 μ—¬λŸ¬ 개 μ‘΄μž¬ν•˜λ©΄ μžμ‹ μ˜ λΈ”λŸ­μ—μ„œ κ°€κΉŒμš΄ λΈ”λŸ­μ— λ§Œλ“  것을 μš°μ„ ν•©λ‹ˆλ‹€.
            let data = 2022;
            console.log("data:" + data);//κ°€κΉŒμš΄ κ³³μ—μ„œ λ§Œλ“  2022
        }
        console.log("data:" + data); //이전 λ‚΄λΆ€ λΈ”λŸ­μ΄ μ—†λ‹€κ³  보면 20
        //let λŒ€μ‹ μ— varλ₯Ό μ‚¬μš©ν•˜λ©΄ λ‚΄λΆ€ λΈ”λŸ­μ—μ„œ μ™ΈλΆ€ λΈ”λŸ­μ˜ 데이터λ₯Ό ν˜ΈμΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    </script>
  • const - constant μ˜ μ•½μžλ‘œ μΌλ°˜μ μœΌλ‘œ μƒμˆ˜λΌκ³  ν•¨
    • 데이터λ₯Ό λ³€κ²½ν•˜μ§€ λͺ»ν•˜λ„둝(immutable) ν•  λ•Œ μ‚¬μš©ν•˜λŠ” ν‚€μ›Œλ“œ
    • 데이터λ₯Ό λ³€κ²½ν•˜μ§€ λͺ»ν•œλ‹€λŠ” κ²ƒλ§Œ μ œμ™Έν•˜κ³ λŠ” let κ³Ό λ™μΌ
      • const μ΄λ¦„ = λ°μ΄ν„°;
      • 이름이 μ°Έμ‘°ν•˜λŠ” λ°μ΄ν„°λ₯Ό λ³€κ²½ν•  μˆ˜ μ—†μŒ
const con = 1000;
//con = 2000;  //constant variable 의 데이터λ₯Ό λ³€κ²½ν•  수 μ—†μ–΄μ„œ μ—λŸ¬
  • Naming λ°©λ²•
    • Camel ν‘œκΈ°λ²• 
      • 일반적인 λ³€μˆ˜ μ™€ ν•¨μˆ˜λŠ” μ†Œλ¬Έμžλ‘œ μ‹œμž‘
      • 2개 λ‹¨μ–΄ μ΄μƒμ˜ μ‘°ν•©μ΄λ©΄ λ‘λ²ˆμ§Έ λ‹¨μ–΄μ˜ μ‹œμž‘은 λŒ€λ¬Έμžλ‘œ μ‹œμž‘
      • 클래슀 μ΄λ¦„은 λŒ€λ¬Έμžλ‘œ μ‹œμž‘
    • Snake ν‘œκΈ°λ²•
      • μƒμˆ˜λŠ” λͺ¨λ‘ λŒ€λ¬Έμžλ‘œ ν‘œκΈ° - const CON = 1000;
    • 헝거리언 ν‘œκΈ°λ²• : 이름에 μžλ£Œν˜•을 ν‘œν˜„
      • byte  λ‚˜ boolean -> b
      • μ •μˆ˜ -> n
      • 문자 -> ch
      • μ‹€μˆ˜ -> f
      • λ¬Έμžμ—΄ -> str

β–  데이터 νƒ€μž…(Data Type - μžλ£Œν˜•)

   : 데이터λ₯Ό μ–΄λ–»κ²Œ μ–Όλ§ˆλ§ŒνΌμ˜ 곡간에 μ €μž₯ν•˜κ³  μ–΄λ–»κ²Œ 읽은 것 인가 ν•˜λŠ” 문제

 

  • 숫자 - Number
    • μ •μˆ˜ μ™€ μ‹€μˆ˜λ₯Ό 2μ§„μˆ˜λ‘œ λ³€ν™˜ν•΄μ„œ μ €μž₯
    • μ‹€μˆ˜λ₯Ό κ°€μ§€κ³  연산을 ν•  λ•ŒλŠ” 주의
    <script>
        console.log((1.0-0.8) == 0.2); //false

        var sum = 0;
        for(var i=0; i<1000; i++){
        sum = sum + 0.1;
        }   
        console.log(sum); //99.999...86
    </script>
  • λ¬Έμžμ—΄ - String
    • 생성 : μž‘μ€ λ”°μ˜΄ν‘œ (') λ‚˜ 큰 λ”°μ˜΄ν‘œ (") 사이에 문자λ₯Ό λ‚˜μ—΄ν•˜κ±°λ‚˜ new String(' λ‚˜ " 사이에 문자 λ‚˜μ—΄)
    • λ¬Έμžμ—΄ λ‚΄μ—μ„œ 쀄 λ°”κΏˆμ„ ν•˜κ³ μž ν•˜λŠ” κ²½μš°λŠ” \n 을 이용
    • λ¬Έμžμ—΄μ„ λ‹€λ₯Έ 데이터 와 + 연산을 ν•˜λ©΄ κ·Έ λ°μ΄ν„°μ˜ toString μ΄λΌλŠ” λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•΄μ„œ λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•œ ν›„ κ²°ν•©
  • Boolean
    • true λ˜λŠ” false
    • new Boolean(true λ˜λŠ” false)
  • undefined
    • 이름은 μ‘΄μž¬ν•˜λŠ”λ° μ•„직 λ°μ΄ν„°κ°€ μ„€μ •λ˜μ§€ μ•Šμ•˜κ±°λ‚˜ μ΄λ¦„이 μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” κ²½μš°
  • null
    • 이름은 μ‘΄μž¬ν•˜λŠ”λ° κ°€λ¦¬ν‚€λŠ” 데이터가 μ—†μŒ
    • undefined μ™€ null μ€ == λ‘œ λΉ„κ΅ν•˜λ©΄ λ™μΌν•˜λ‹€κ³  κ²°κ³Όκ°€ λ¦¬ν„΄
  • λ°μ΄ν„°μ˜ μžλ£Œν˜• ν™•인 typeof λ°μ΄ν„°
  • λ°°μ—΄(array - list)
    • λ™μΌν•œ μžλ£Œν˜•μ˜ 연속적인 λͺ¨μž„: λ¬Έλ²•μ μœΌλ‘œλŠ” μžλ£Œν˜•λ§Œ λ™μΌν•˜λ©΄ λ˜μ§€λ§Œ μ‹€μ œλ‘œλŠ” 비ꡐ가 κ°€λŠ₯ν•œ λ°μ΄ν„°λ§Œ λ¬Άμ–΄μ•Ό 함
      • JavaScriptμ—μ„œλŠ” λͺ¨λ“  데이터가 λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό κΈ°μ–΅ν•˜κΈ° λ•Œλ¬Έμ— λ™μΌν•œ μžλ£Œν˜•μ΄λΌκ³  ν•  수 있음.
    • 생성
var(let λ˜λŠ” const) 배열이름 = [값을 λ‚˜μ—΄];
var(let λ˜λŠ” const) 배열이름 = new Array(값을 λ‚˜μ—΄);
var(let λ˜λŠ” const) 배열이름 = new Array(μ •μˆ˜ 1개); //μ •μˆ˜ 개수 만큼 λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό μ €μž₯ν•  수 μžˆλŠ” 곡간을 확보
  • λ°°μ—΄μ˜ κ° μš”μ†Œμ— μ ‘κ·Ό
    • 배열이름[인덱슀]
    • μΈλ±μŠ€λŠ” 0λΆ€ν„° μ‹œμž‘ν•΄μ„œ λ°μ΄ν„°κ°œμˆ˜ - 1κΉŒμ§€
  • 배열이름.length λŠ” λ°μ΄ν„°μ˜ κ°œμˆ˜λ₯Ό λ¦¬ν„΄
  • 배열이름.toString() μ€ κ° μš”μ†Œμ˜ toString()을 ν•΄μ„œ κ²°κ³Όλ₯Ό ν•˜λ‚˜μ˜ λ¬Έμžμ—΄λ‘œ λ¦¬ν„΄
    • 좜λ ₯ν•˜λŠ” λ©”μ„œλ“œμ— 배열이름을 λŒ€μž…ν•˜λ©΄ toString을 ν˜ΈμΆœν•˜κΈ° λ•Œλ¬Έμ— 좜λ ₯ν•  λ•ŒλŠ” toString을 ν˜ΈμΆœν•˜μ§€ μ•Šμ•„λ„ 됨.
    • valueOf() λ‚˜ join(κ΅¬λΆ„λ¬Έμžμ—΄)을 μ΄μš©ν•΄μ„œλ„ λ‚΄λΆ€ 데이터λ₯Ό 확인할 수 있음.
    <script>
        var ar = ["μΉ΄λ¦¬λ‚˜", "μ§€μ €", "μœˆν„°", "닝닝"];
        console.log("데이터 개수:" + ar.length);
        //λͺ¨λ“  데이터λ₯Ό λΉ λ₯΄κ²Œ 확인
        console.log(ar.toString());
        //좜λ ₯ν•˜λŠ” λ©”μ„œλ“œμ— 이름을 λŒ€μž…ν•˜λ©΄ toString()을 ν˜ΈμΆœν•΄μ„œ κ²°κ³Όλ₯Ό ν•˜λ‚˜μ˜
        //λ¬Έμžμ—΄λ‘œ 좜λ ₯
        console.log(ar);
        //ν•˜λ‚˜μ”© 좜λ ₯
        console.log(ar[0]);
        //console.log(ar[4]); //잘λͺ»λœ 인덱슀 λŒ€μž… - undefined 
    </script>
  • λ°μ΄ν„°μ˜ μžλ£Œν˜• λ³€ν™˜
    • λ¬Έμžμ—΄μ„ μˆ«μž λ‚˜ Boolean으둜 λ³€ν™˜ν•  λ•ŒλŠ” Number(λ¬Έμžμ—΄) λ˜λŠ” Boolean(λ¬Έμžμ—΄)
    • λ‹€λ₯Έ μ’…λ₯˜μ˜ 데이터λ₯Ό λ¬Έμžμ—΄λ‘œ λ³€κ²½ν•  λ•ŒλŠ” toString()을 ν˜ΈμΆœν•˜λ©΄ 됨.
      • λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•˜λŠ” μ΄μœ λŠ” 좜λ ₯을 μœ„ν•΄μ„œ
      • 숫자 λ‚˜ Boolean μœΌλ‘œ λ³€ν™˜ν•˜λŠ” μ΄μœ λŠ” μ½μ–΄μ˜¨ λ°μ΄ν„°κ°€ μˆ«μž λ‚˜ Boolean μ΄ μ•„λ‹Œ λ¬Έμžμ—΄μ΄μ–΄μ„œ μ—°μ‚°μ΄ μ•ˆλ˜λŠ” κ²½μš° μ—°μ‚°μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄μ„œ
    <script>
        console.log("23" + "76");
        console.log(Number("23") + Number("76"));

        var input = prompt("숫자λ₯Ό μž…λ ₯ν•˜μ„Έμš”");
        console.log(typeof input);
        console.log(input + 4);
    </script>

β–  Operator(μ—°μ‚°μž) : 연산을 μˆ˜ν–‰ν•΄μ£ΌλŠ” λΆ€ν˜Έ λ‚˜ κΈ°ν˜Έ λ° λͺ…λ Ήμ–΄

  • μ—°μ‚°μžμ˜ κ°œμˆ˜μ— λ”°λ₯Έ λΆ„λ₯˜
    • Unary(단항) μ—°μ‚°μž: λ°μ΄ν„°(ν”Όμ—°μ‚°μž)κ°€ 1개만 μžˆμœΌλ©΄ μˆ˜ν–‰λ˜λŠ” μ—°μ‚°μž
    • Binary(이항) μ—°μ‚°μž: λ°μ΄ν„°(ν”Όμ—°μ‚°μž)κ°€ 2개 μžˆμœΌλ©΄ μˆ˜ν–‰λ˜λŠ” μ—°μ‚°μž
    • Ternary(μ‚Όν•­) μ—°μ‚°μž: λ°μ΄ν„°(ν”Όμ—°μ‚°μž)κ°€ 3개 μžˆμœΌλ©΄ μˆ˜ν–‰λ˜λŠ” μ—°μ‚°μž
  • μ—°μ‚°μ˜ κ²°κ³Όμ— λ”°λ₯Έ λΆ„λ₯˜
    • μ‚°μˆ  μ—°μ‚°: μˆ«μž μžμ²΄λ₯Ό κ°€μ§€κ³  μ—°μ‚°ν•΄μ„œ κ²°κ³Όλ₯Ό μˆ«μž ν˜•νƒœλ‘œ λ¦¬ν„΄ν•˜λŠ” μ—°μ‚°μž
    • 논리 μ—°μ‚°: true μ™€ false ν˜•νƒœλ‘œ μ—°μ‚°ν•΄μ„œ κ²°κ³Όλ₯Ό Boolean ν˜•νƒœλ‘œ λ¦¬ν„΄ν•˜λŠ” μ—°μ‚°μž
  • ν• λ‹Ή μ—°μ‚°μž
    • =
    • μ™Όμͺ½μ—λŠ” 이름(λ³€μˆ˜)이 와야 ν•˜κ³  였λ₯Έμͺ½μ—λŠ” 데이터(λ¦¬ν„°λŸ΄, λ³€μˆ˜ λ‚˜ μƒμˆ˜, 계산식, ν•¨μˆ˜ 호좜, ν•¨μˆ˜ 생성 ꡬ문 λ“±)κ°€ 였면 λ˜λŠ”λ° 였λ₯Έμͺ½ λ°μ΄ν„°μ˜ μ°Έμ‘°λ₯Ό μ™Όμͺ½μ˜ 이름이 가리킀도둝 ν•΄μ£ΌλŠ” μ—°μ‚°μžμž„.
  • 증감 μ—°μ‚°μž :
    • 단항 μ—°μ‚°μžλ‘œ μ •μˆ˜ λ³€μˆ˜μ—λ§Œ μ‚¬μš©μ΄ κ°€λŠ₯ν•œ μ—°μ‚°μž
      • ++ : μ •μˆ˜ λ³€μˆ˜μ˜ 데이터λ₯Ό 1μ¦κ°€μ‹œν‚€λŠ” μ—°μ‚°μž
      • -- : μ •μˆ˜ λ³€μˆ˜μ˜ 데이터λ₯Ό 1κ°μ†Œμ‹œν‚€λŠ” μ—°μ‚°μž
    • μ—°μ‚°μžμ˜ μœ„μΉ˜κ°€ λ°μ΄ν„°μ˜ μ•žλ„ κ°€λŠ₯ν•˜κ³  λ’€λ„ κ°€λŠ₯
    • λͺ…λ Ήλ¬Έ μ•ˆμ—μ„œ μ‚¬μš©λœλ‹€λ©΄ μ•žμ— 뢙은 κ²½μš°λŠ” 증감을 λ¨Όμ €ν•˜κ³  λͺ…령에 이용
    • 뒀에 뢙은 κ²½μš°λŠ” 데이터λ₯Ό λͺ…령에 μ‚¬μš©ν•˜κ³  μ¦κ°μ‹œν‚΄
    <script>
        var data = 20;
        data++;
        console.log(data); //21
        console.log(data++); //++ κ°€ 뒀에 λΆ™μ–΄μ„œ dataλ₯Ό λͺ…령문에 μ‚¬μš©ν•˜κ³  1 증가
        console.log(++data); //++ κ°€ μ•žμ— λΆ™μ–΄μ„œ dataλ₯Ό 1μ¦κ°€μ‹œν‚€κ³  λͺ…령문에 μ‚¬μš©
    </script>
  • 사칙 μ—°μ‚°μž
    • +, - , *, /, **
    • % : λ‚˜λ¨Έμ§€ κ΅¬ν•΄μ£ΌλŠ” μ—°μ‚°μž - μΌμ •ν•œ νŒ¨ν„΄μ„ κ°–λŠ” μž‘μ—…μ΄λ‚˜ μ½”λ“œμ˜ μœ νš¨μ„±μ„ λΉ λ₯΄κ²Œ κ²€μ‚¬ν•˜κ³ μž ν•  λ•Œ μ‚¬μš©
if(i % 3 == 0)
	document.write("λΉ¨κ°•");
if(i % 3 == 1)
	document.write("νŒŒλž‘");
if(i % 3 == 2)
	document.write("λ…Έλž‘");
  • 비ꡐ μ—°μ‚° : >, >= , <, <=: ν¬κΈ°λ₯Ό λΉ„κ΅ν•΄μ„œ Boolean으둜 λ¦¬ν„΄, λ¬Έμžμ—΄λ„ κ°€λŠ₯
    • == : κ°™λ‹€ 인데 μžλ£Œν˜•μ€ ν™•μΈν•˜μ§€ μ•ŠμŒ
    • != : λ‹€λ₯΄λ‹€ 인데 μžλ£Œν˜•μ€ ν™•μΈν•˜μ§€ μ•ŠμŒ 
    • === : μžλ£Œν˜•κΉŒμ§€ μΌμΉ˜ν•΄μ•Όλ§Œ true
    • !== : κ°’μ΄λ‚˜ μžλ£Œν˜• λ‘˜ 쀑에 ν•˜λ‚˜λ§Œμ΄λΌλ„ λ‹€λ₯΄λ©΄ true
    <script>
        console.log(1 > 2);
        console.log("ABC" > "BCD"); //λ¬Έμžμ—΄μ˜ 크기 비ꡐ κ°€λŠ₯

        console.log(1 == 2);
        console.log(1 == "1"); // == 은 μžλ£Œν˜•μ„ ν™•μΈν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— true
        console.log(1 === "1"); // === 은 μžλ£Œν˜•κΉŒμ§€ ν™•μΈν•˜κΈ° λ•Œλ¬Έμ— false
    </script>
λŒ“κΈ€μˆ˜0