[JavaScript] 변수-기초

2022. 6. 28. 12:10·Language/JavaScript
728x90

변수

: 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용한다.

name = "Mike";
age = 30;

줄 마지막 세미콜론(;)은 한 줄이 끝났다는 의미로 써준다. 생략해도 되지만, 항상 적어 주는것이 좋다.

위 예제에서 name 변수에 Mike라는 값이 들어갔고, age 변수에는 30 이라는 값이 들어갔다.

Mike는 쌍따옴표로 감싸져 있는데 자바스크립트에서 문자는 항상 따옴표로 감싸줘야한다.

따옴표('...')나 쌍따옴표("...") 어떤 걸로 감싸도 상관없다. 따옴표로 감싸주지 않으면 자바스크립트는 오류를 발생시킨다.

그리고 변수를 만들다 보면 가끔 원일을 알 수 없는 오류를 발생하는 경우가 있는데 class = "수업"; 같은 코드는 에러가 난다. 자바스크립트에는 예약어라는 것이 있는데 예약어는 변수로 사용할 수 없다. class 단어는 예약어이기 때문에 사용할 수 없어서 오류가 나는것이다.

 

변수 선언 후 접근은 alert()와 console.log()로 할수 있는데, alert는 경고창을 띄우는 함수이고, console.log는 로고를 찍는 함수다.

name = "Mike"; //변수 선언
age = 30;      //변수 선언

alert(name); //Mike라는 경고창이 뜬다.
name = "Mike"; //변수 선언
age = 30;      //변수 선언

console.log(age); //console창에 30이 뜬다.

사실 이렇게 변수를 사용하는것은 매우 위험하다. name이라는 변수명이 유일하다는 보장이 없기 때문이다.

혼자 만드는 작은 프로젝트라면 괜찮겠지만, 여러 개발자가 만드는 큰 프로젝트일 경우 만약 다른 개발자가 저 name 이라

는 변수를 사용하면 마지막으로 선언된 내용으로 덮어 씌어지게 된다.

이를 방지하기 위해 2가지 키워드가 존재하는데 let이랑 const이다.

위 코드를 let을 이용해 선언해보면

let name = "Mike";    //변수 선언
// 1000 lines...(다른 개발자가 작성한 것)
let name = "google";

이렇게 하면 구문오류(Syntax Error)가 발생한다. 오류에 이미 name은 선언되고 있다고 뜬다. 이럴 경우 다른 개발자가 이미 사용하고 있구나하고 다른 이름으로 바꿀것이다.

근데 let은 한번 선언 후에 다른 값으로 바꿀 수 있다.

let grade = "F";    //변수 선언
//...1000 lines (다른 개발자가 작성한 것)
grade = "A+";

이럴때는 의도적으로 let을 생략하고 적으면 된다.

최초에 선언하는 모든 변수에 let을 붙인다면 이미 사용하고 있을 때 에러를 통해 알 수 있다.

 

const는 절대로 바뀌지 않는 상수를 입력할 때 사용한다.

const로 선언된 변수를 바꾸려고 하면 에러가 발생한다. 그래서 보통 파이나, 최댓값, 생일등 바뀌지 않는 값을 입력할 때 사용하고, 대문자로 선언하는게 좋다. 다른 개발자에게 이것이 상수라는 것을 알리는 것이다.

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2020-02-02';

정리해보면 자바스크립트에서 변수를 선언할때는 변하지 않는 값은 const 변할 수 있는 값은 let으로 선언한다. 

의도치 않는 동작을 방지할 수 있다.

모든 변수를 일단 const로 선언하고, 나중에 변경 될 여지가 있는 변수들만 let으로 바꿔주면 된다.

 

변수에 대해 더 알아보면

  • 변수는 문자와 숫자, $와 _만 사용한다.

const MY_HOME = "...";

let_ = 1;

let$ = 3;

  • 첫 글자는 숫자가 될 수 없다.

let 1stGrade = 'A+'; (X)

  • 예약어는 사용할 수 없다.

let let = 90; (X)

  • 가급적 상수는 대문자로 알려준다.

const MAX_SIZE = 90;

  • 변수명은 읽기 쉽고 이해할 수 있게 선언한다.

let a = 1; (X)

let userNumber = 3; 

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 기본 타입  (0) 2022.06.29
[JavaScript] 변수(variable)  (0) 2022.06.29
[JavaScript] 자바스크립트 기본 문법(함수(function),객체(object),배열(array))  (0) 2022.06.19
[JavaScript] 자바스크립트 기본 문법(문(statement),표현식(Expression))  (0) 2022.06.19
[JavaScript] 자바스크립트 기본 문법((연산자(Operator),키워드(Keyword),주석(Comment))  (0) 2022.06.18
'Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] 기본 타입
  • [JavaScript] 변수(variable)
  • [JavaScript] 자바스크립트 기본 문법(함수(function),객체(object),배열(array))
  • [JavaScript] 자바스크립트 기본 문법(문(statement),표현식(Expression))
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    객체
    변수
    event
    JavaScript
    array
    Python
    web
    제어문
    Java
    object
    react
    CSS
    MySQL
    next.js
    타입스크립트
    파이썬
    리액트
    자바스크립트
    HTML
    TypeScript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[JavaScript] 변수-기초
상단으로

티스토리툴바