λ³€μˆ˜-01

μ΄μ„œλ¦ΌΒ·2024λ…„ 7μ›” 30일

JavaScript

λͺ©λ‘ 보기
3/28

1. λ³€μˆ˜ (Variable)

1.1. λ³€μˆ˜ μ„ μ–Έκ³Ό μ‚¬μš©

  • λ³€μˆ˜λŠ” β€˜λ³€ν•  수 μžˆλŠ” μˆ˜β€™, ’변할 수 μžˆλŠ” 정보’λ₯Ό λœ»ν•©λ‹ˆλ‹€.
  • ν”„λ‘œκ·Έλž¨μ„ λ§Œλ“€ λ•Œ μ‚¬μš©ν•˜λŠ” μˆ«μžλ‚˜ λ¬Έμžμ™€ 같은 데이터λ₯Ό λ©”λͺ¨λ¦¬μ— λ³΄κ΄€ν•˜λŠ”λ°, λ©”λͺ¨λ¦¬μ— μ €μž₯λ˜μ–΄ μžˆλŠ” 값에 μ ‘κ·Όν•˜κΈ° μœ„ν•΄μ„œ 이름을 λΆ™μ΄λŠ” ν¬μŠ€νŠΈμž‡κ°™μ€ μ—­ν• 
  • var, let ν‚€μ›Œλ“œλŠ” λ³€κ²½ κ°€λŠ₯ν•œ λ³€μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œ, constλŠ” λ³€κ²½ν•  수 μ—†λŠ” λ³€μˆ˜λ₯Ό μ„ μ–Έν•  λ•Œ μ‚¬μš©
    var a; // μ„ μ–Έ
    let b = 10; //μ„ μ–Έ + ν• λ‹Ή
    const name = 'weniv';

1.2. λ³€μˆ˜λͺ… μž‘μ„± κ·œμΉ™

  • λ³€μˆ˜ μ΄λ¦„μ—λŠ” 문자, 숫자, μ–Έλ”μŠ€μ½”μ–΄(_), λ‹¬λŸ¬($)만 μ‚¬μš©.
  • 숫자 X.
  • μ˜ˆμ•½μ–΄ X.
  • λŒ€μ†Œλ¬Έμžλ₯Ό ꡬ뢄.
  • μœ λ‹ˆμ½”λ“œ 문자λ₯Ό ν—ˆμš©ν•˜λ―€λ‘œ ν•œκΈ€μ΄λ‚˜ 일본어도 λ³€μˆ˜λͺ…에 μ‚¬μš© κ°€λŠ₯ν•˜λ‚˜ ꢌμž₯ν•˜μ§€ μ•ŠμŒ.

πŸ’‘ 넀이밍 κ·œμΉ™

  1. μΉ΄λ©œμΌ€μ΄μŠ€: 첫 κΈ€μžλŠ” μ†Œλ¬Έμž, 각 λ‹¨μ–΄μ˜ 첫 κΈ€μžλŠ” λŒ€λ¬Έμž
    β†’firstName, totalCount, userAge
  2. μŠ€λ„€μ΄ν¬ μΌ€μ΄μŠ€: 각 단어λ₯Ό μ–Έλ”μŠ€μ½”μ–΄(_)둜 μ—°κ²°
    β†’ first_name, total_count, user_age
  3. 파슀칼 μΌ€μ΄μŠ€: λ‹¨μ–΄μ˜ 첫 κΈ€μžλ₯Ό λŒ€λ¬Έμž
    β†’ FirstName, TotalCount, UserAge
  4. ν—κ°€λ¦¬μ•ˆ μΌ€μ΄μŠ€: λ³€μˆ˜λͺ…에 νƒ€μž… μ’…λ₯˜λ₯Ό ν•¨κ»˜ μž‘μ„±
    β†’ strUserName, $submitButton

πŸ’‘ μ–΄λ–€ 넀이밍 κ·œμΉ™μ„ μ“°λ‚˜μš”?

  • λ³€μˆ˜, ν•¨μˆ˜, λ©”μ„œλ“œλŠ” 주둜 카멜 μΌ€μ΄μŠ€λ₯Ό μ‚¬μš©.
  • μƒμ„±μž ν•¨μˆ˜, 클래슀 μ΄λ¦„μ—λŠ” 주둜 파슀칼 μΌ€μ΄μŠ€λ₯Ό μ‚¬μš©.

2. λ³€μˆ˜ ν‚€μ›Œλ“œμ™€ νŠΉμ§•

varletconst
μž¬μ„ μ–ΈOXX
μž¬ν• λ‹ΉOOX
// μž¬μ„ μ–Έ
var valueB = 20;
var valueB = 30;

let valueC = 10;
let valueC = 20; // μž¬μ„ μ–Έ 였λ₯˜ λ°œμƒ

// μž¬ν• λ‹Ή
var valueVar = 15;
valueVar = 25;

let valueLet = 20;
valueLet = 30;

const valueLet = 5;
valueLet = 10; // μž¬ν• λ‹Ή 였λ₯˜ λ°œμƒ

πŸ’‘ μ–΄λ–€ ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•΄μ„œ μ„ μ–Έν•΄μ•Ό ν• κΉŒ?

var ν‚€μ›Œλ“œλŠ” λ³€μˆ˜μ˜ μž¬μ„ μ–Έμ΄ κ°€λŠ₯ν•˜κΈ° λ•Œλ¬Έμ— 예기치 λͺ»ν•œ 였λ₯˜κ°€ λ°œμƒν•  수 있음. μ½”λ“œμ˜ 가독성과 μœ μ§€λ³΄μˆ˜μ„±μ„ 높이기 μœ„ν•΄ letκ³Ό constλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŒ.

letκ³Ό const ν‚€μ›Œλ“œλŠ” μ„œλ‘œ λ‹€λ₯Έ μš©λ„λ₯Ό κ°€μ§€κ³  μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ constλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 더 쒋은 κ²½μš°κ°€ λ§ŽμŠ΅λ‹ˆλ‹€.

  1. μ˜λ„ν•˜μ§€ μ•Šμ€ κ°’μ˜ 변경을 λ°©μ§€
    λ³€μˆ˜μ˜ 값이 ν•œ 번 ν• λ‹Ήλ˜λ©΄ λ³€κ²½ν•  수 μ—†μŒ. μ˜λ„ν•˜μ§€ μ•Šμ€ κ°’μ˜ 변경을 λ°©μ§€ν•  수 μžˆμ–΄, μ½”λ“œμ˜ 예츑 κ°€λŠ₯성을 높이며 버그λ₯Ό 쀄일 수 있음.
  2. 가독성 ν–₯상
    λ‹€λ₯Έ κ°œλ°œμžλ“€μ΄ λ³€μˆ˜μ˜ 값이 변경될 κ°€λŠ₯성이 μ—†λ‹€λŠ” 것을 λΉ λ₯΄κ²Œ 인지할 수 있으며 선언을 ν•  λ•Œ μ΄ˆκΈ°ν™”λ₯Ό ν•¨κ»˜ ν•΄μ•Όν•˜κΈ° λ•Œλ¬Έμ— μ–΄λ–€ 데이터가 μ‚¬μš©λ˜λŠ”μ§€ ν™•μΈν•˜κΈ° 용이. 이런 const의 νŠΉμ„±μ€ μ½”λ“œμ˜ 가독성을 높이고 μœ μ§€λ³΄μˆ˜μ„±μ„ ν–₯상.
  • "use strict"λͺ¨λ“œλž€?
// λ³€μˆ˜μ˜ ν‚€μ›Œλ“œλ₯Ό μƒλž΅ν•˜κ³  μ„ μ–Έκ³Ό 할당을 ν•˜λ©΄ 였λ₯˜κ°€ λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
valueA = 10;
console.log(valueA);
// 엄격λͺ¨λ“œ
"use strict";

valueA = 10;
console.log(valueA);

β†’ 엄격λͺ¨λ“œ(strict mode)μ—μ„œλŠ” 였λ₯˜κ°€ λ°œμƒ.

profile
κΎΈμ€€ν•œ μ—΄μ •μœΌλ‘œ λ‚˜μ•„κ°€λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발자

0개의 λŒ“κΈ€