01.JavaScript 기초 - 변수와 상수

🌈 변수와 상수

🔥 변수 짓는 방법

🔥 변수 선언

🔥 변수의 종류(let & const)

🔥 바람직한 변수명

🔥 동적 타입 언어

1. 변수 짓는 방법

• 변수명에는 숫자, 문자, $, _을 이용해 만들 수 있음
• 단, 첫글자에는 숫자가 오지 못함
• 변수명은 대소문자를 구분하기 때문에 대소문자가 일치하지 않으면 다른 변수임
• 예약어는 사용할 수 없음(break, case, catch, class, const, continue, debugger 등)
  • 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords

✍🏻 javascript

let $ = 1; // '$'라는 이름의 변수 선언
let _ = 2; // '-'라는 이름의 변수 선언
alert($ + _); // 3
// let 1a; // 변수명 첫글자에는 숫자가 올 수 없음
// let my-name; // 하이픈 "-"은 변수명에 올 수 없음

2. 변수 선언

• 변수 선언 방법
  • 🔍 let 변수명; 👈 값이 비어있는 변수 선언
  • 🔍 let 변수명 = 변수값; 👈 값이 있는 변수 선언
• 전역변수는 {} 밖에 있는 변수로 어디에서든 변수를 이용할 수 있는 장점이 있음
• 단, 전역변수는 계속 메모리에 할당되어 있기 때문에 비효율적임
• 효율적인 코드 작성을 위해서는 꼭 필요한 변수만 전역변수로 선언해야 함
• {}(스코프) 개념 : {}안에서는 밖에 변수를 불러올 수 있으나, {} 밖에서는 {} 안에 변수를 불러올 수 없음
• 변수 출력은 console.log() 함수를 이용(python에 print와 같은 기능)

✍🏻 javascript

// globalName는 스코프 박에서 선언한 변수
let globalName = "I'm global Name"; //전역변수이기 때문에 어디서든 사용 가능
// 스코프 생성 : 스코프 내에 변수들은 스코프 내에서만 사용할 수 있음
{
  let name = "jaewon";
  console.log(name);
  name = "hello";
  console.log(name);
  console.log(globalName);
}
console.log(name); // 전역변수가 아니기 때문에 출력되지 않음
console.log(globalName); // global name

3. 변수의 종류(let & const)

• 값이 변할 수 있는 변수(Mutable data type)를 선언할 때는 let을 사용하여 변수 지정
• 즉, let은 변수를 읽기 및 쓰기 모두 가능
• 값을 변경 할 수 없는 상수(Immutable data type)를 선언할 때는 const를 사용
• 즉, const는 변수를 읽기만 가능
• 과거에는 var로 변수를 지었으나, 1)보안 2)안정성 3)실수로 인하여 현재 사용하지 않음
• var를 사용하였을 때, var hoisiting 문제가 발생(어디에 선언했는지 상관없이 맨 위로 끌어올림)하고 블록 스콥을 무시하고 밖에서도 사용이 되는 등 기대하지 않는 위험부담이 발생함

4. 바람직한 변수명

• 간결하고 명확해야 함(변수가 담고 있는 것이 무엇인지 잘 설명해야함)
• userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용
• 줄임말이나 a,b,c와 같은 짧은 이름은 지양
• 최대한 서술적이고 간결하게 명명(data나 value는 나쁜 이름의 예시임. 이런 이름은 아무것도 설명 못함)
• 자신의 규칙이나 소속된 조직의 규칙을 따름
• 변수를 사용하는 곳과 가까운 곳에 배치
• 중복하여 사용한다면 전역 변수로 배치

5. 동적 타입 언어

• Javascript는 동적 타입 언어임
• 데이터 타입의 이미 정해진 타입을 필요에 따라 언제든 바뀔 수 있는 특성을 동적 타입 언어(dynamically type)라 부름

✍🏻 javascript

// Dynamic typing : dynamically typed language
let text = "hello"; // value: hello, type: string
console.log(`value: ${text}, type: ${typeof text}`);
text = 1; // value: 1, type: number
console.log(`value: ${text}, type: ${typeof text}`);
text = "7" + 5; // value: 75, type: string
console.log(`value: ${text}, type: ${typeof text}`);
text = "8" / "2"; // value: 4, type: number
console.log(`value: ${text}, type: ${typeof text}`);