Javascript - 명시적 변수 선언

Seong Ho Kim·2024년 1월 26일
0

Javascript

목록 보기
5/21
post-thumbnail

1. 명시적 변수 선언

  • var, let, const를 이용해서 변수를 선언하는 방식을 명시적 선언이라고 한다. 다음과 같이 var, let, const를 선언해서 변수를 사용하는 방법이다.

    • 1) var, let, const 기본 사용 예
      // 1. var, let, const 변수 사용 예(명시적 선언)
      var num = 3;
      console.log(num); // 3
      
      let str = "A";
      console.log(str); // A
      
      const constant = 10;
      console.log(constant); // 10
      • var, let, const를 완전하게 이해하기 위해선 호이스팅, 유효범위를 배우는 것이 중요함
    • 2) var(변수) 사용 예
      // 2. var 변수
      var num = 10;
      console.log(num); // 10
      
      var num = 20;
      console.log(num); // 20
      • 1. 같은 변수이름으로 중복 선언이 가능함
        • 처음에 num 이라는 변수에 10을 할당하면 10으로 출력되고, 다시 20 이라는 값으로 바꿔 할당하면 20으로 출력됨을 알 수 있음
          • 사용시 주의사항
            • 똑같은 이름의 변수가 중복되서 선언했더라도 값이 변경되면 변경된 데이터까지 함께 할당하기 때문에, 대규모 프로젝트 진행시에 큰 문제점이 발생할 수 있음 → (같은 이름을 사용하는 것을 권장하지 않고 다른이름으로 사용해야 하는것을 권장함)
    • 3) let(변수) 사용 예
      // 3. let 변수
      let numA = 30;
      console.log(numA); // 30
      
      let numB = 40;
      console.log(numB); // 40
      
      // 추가 예
      let numC = 30;
      console.log(numC); // 30
      
      numC = 40;
      console.log(numC); // 40
      • 1. 다른 변수이름으로 선언해서 사용해야 함
        • 처음에 numA 라는 변수에 30을 할당하면 numA는 30으로 데이터 값이 출력됨을 알 수 있고, numB 라는 변수에 40을 할당하면 numB는 40으로 데이터 값이 출력됨을 알 수 있음
      • 2. let 키워드를 사용하지 않을시 같은 변수이름을 중복으로 선언할 수 있음
        • 처음에 numC 라는 변수에 30을 할당하면 30이 출력되지만, let 키워드를 사용하지 않고 데이터 값을 40으로 할당하면 numC는 40으로 데이터 값이 출력됨을 알 수 있음
          • 사용시 주의사항
            • var 키워드와 다르게 변수이름이 서로 중복될시에 에러메세지를 현시하게됨
              • (대규모 프로젝트 진행시 혼동의 위험성을 줄일 수 있지만, 같은 변수 이름을 중복해서 사용하면 에러를 발생시키므로 주의해야함)
    • 4) const(상수) 사용 예
      // 4. const 키워드
      const numberA = 20;
      console.log(numberA); // 20
      
      const numberB = 30;
      console.log(numberB); // 30
      
      // 추가 예(Error)
      const number = 10;
      number = 20;
      console.log(number); // Type Error(출력 불가능)
      • 다른 변수이름으로 선언해서 사용해야 함
        • let 키워드와 같게 사용하는 방식은 똑같이 적용됨
          • 사용시 주의사항
            • let 키워드 처럼 같은 변수이름으로 중복 선언이 불가능함
            • 키워드를 사용하지 않고 할당시키더라도 변수에 할당된 데이터가 변경되지 않음
              • (결국, 최초에 할당된 데이터 값을 변경할 수 없다는 것을 알수 있다)
                • Tip. 상수란?
                  • 값이 변하지 않는 데이터를 의미한다
    • Tip. 변수 이름 사용시 규칙
      // 1. 변수 이름은 카멜레이스 방법으로 작성해야 한다.
      let userName = "김성호"; // (O) 첫글자는 소문자, 연결된 단어의 첫글자는 대문자로 시작
      let user_name = "김성호"; // (X) 
      
      // 2. 변수 이름은 "_, $, 문자"로만 시작한다.
      let 12day = "월요일"; // (X) 숫자로 시작 -> 에러발생
      let @12day = "월요일"; // (X) _,$ 이외의 특수문자로 시작 -> 에러발생
      
      let day12 = "월요일"; // (O) 문자로 시작
      let _day12 = "월요일"; // (O) _로 시작
      let $day12 = "월요일"; // (O) $로 시작
      
      // 3. 상수나 축약어는 대문자와 스네이크케이스 방식으로 작성한다
      const HTML = "Hyper Text Markup Language";
      const MAX_LEVEL = "99"; // 언더바(_)를 이용해서 언어를 연결해서 시작
      
      // 4. 예약어를 사용할 수 없음 (ex. var, let, const, typeof..등등)
      const num = 20; // (O) num은 변수 선언 키워드가 아닌 예약어(이름))이므로 사용할 수 있다.
      const var = 10; // (X) var는 변수 선언 키워드이기 때문에 예약어(이름)로 사용할 수 없다.
      • 변수 이름을 지을때 카멜레이스 방법으로 작성해야 한다
        • 카멜레이스란? 첫글자는 소문자, 연결된 단어의 첫글자는 대문자로 시작해서 작성하는 방법을 말한다.
      • 상수(Const)나 축약어는 대문자와 스네이크케이스 방법으로 작성해야 한다
        • 스네이크케이스란? 단어를 언더바(_)로 연결해서 작성하는 방법을 말한다
  • 요약정리

    • var 키워드 : 변수 이름을 중복으로 선언이 가능함
    • let 키워드 : 변수 이름을 중복으로 선언할 수 없음
      (단, let 키워드를 사용하지 않을시에 변수이름을 중복으로 사용할 수 있음)
    • const 키워드 : 변수 이름을 중복으로 선언할 수 없음
      (let 키워드와 다르게 최초에 할당된 데이터 값을 변경할 수 없음)
    • 변수 선언 : var, let 키워드
    • 상수 선언 : const 키워드
    • 변수 이름을 지을때 규칙 : 카멜레이스(예 : userName) 방법으로 작성해야 함
    • 상수나 축약어 사용시 규칙 : 스네이크케이스(예 : MAX_LEVEL) 방법으로 작성해야 함
    • 예약어 사용시 규칙 : var, let, const, typeof는 변수 선언 키워드이기 때문에 사용할 수 없음
    • 변수 이름 사용시 규칙 : 변수 이름은 “_, $, 문자”로만 사용해야 함
profile
안녕하세요 Junior UIUX Designer 입니다 😊

0개의 댓글

Powered by GraphCDN, the GraphQL CDN