본문 바로가기
programming/javascript

자바스크립트 변수 var 사용법과 변수 작성 규칙

by 개코 - 개발과 코딩 2021. 10. 8.

자바스크립트의 변수 중 var 가 있다. 이것은 자바스크립트를 사용하기 전에 원하는 값을 가질 수 있는 컨테이너 역할을 한다. 값이 변화하기 때문에 변수라는 호칭이 붙었다. 변수를 이용하면 문자 숫자 가릴 것 없이 변수에 값을 넣을 수 있다. 어쩌면 파이썬의 변수와 특징이 같다.

자바스크립트 변수 var
사용법과 변수 작성 규칙

자바스크립트의 변수는 선언 후 할당을 해서 사용한다.

변수의 사용은 파이썬과 비슷하지만 선언을 하지 않는다는 점에서 차이가 있다.

자바스크립트 변수 var 를 사용하기 위해선 변수명 앞에 var 를 사용하면 된다.

선언 후 할당

자바스크립트 변수는 선언 후 할당하여 사용하게 된다.

아래는 간단한 자바스크립트 변수를 선언하는 구분이다.

// 변수 선언
var vNum_1;
var vNum_2;

// 값 할당
vNum_1 = 0;
vNum_2 = 10;

// 변수 사용
var vResult = vNum_1 + vNum_2;

변수를 선언하고 할당하는 것은 하나의 구문으로 사용할 수 있다.

코드가 길어졌지만, 자바스크립트 변수는 선언 할당 사용의 과정을 거치게 된다.

변수 명명규칙

자바스크립트의 변수를 만들 때 이름을 정하게 된다.

이것을 변수명이라하고 규칙이 있다.

변수명을 만드는 명명규칙에는 다른 프로그램 언어들과 마찬가지 규칙을 사용할 수 있다.

그럼에도 자바스크립트의 변수명을 만드는 규칙을 아는 것은 중요하다.

  • 변수명에는 문자, 숫자, 밑줄, $ 기호가 포함될 수 있다.
  • 변수명은 문자, $, 밑줄로 시작할 수 있다.
    하지만, $, 밑줄은 가급적 변수시작문자로 사용하지 않는 것이 좋다.
  • 변수명은 대소문자를 구별한다.
    var GirlGroup 와 var girlgroup 는 다른 변수이다.
  • 자바스크립트에서 지정한 예약 키워드는 사용할 수 없다.

할당연산자와 수학연산자

사칙연산 중 + 키워드가 있다.

이것은 숫자를 더하는 역할을 하지만, 문자열을 만나면 문자열 형태로 결합을 하게 된다.

주의가 필요한 연산자이기도 하다.

하지만 문자열을 결합할 때는 이것만한 것이 없다.

데이터 타입 자료형 보기

자바스크립트에서 지정한 변수의 자료형인 데이터 타입을 보기 위해선 typeof() 함수를 사용한다.

자바스크립트가 다른 프로그램언어와 다르게 자료형을 지정하지 않기 때문에 코드가 길어질 경우 typeof() 함수로 구별할 필요가 있다.

위에서 언급한 내용들을 코드로 만들면 다음과 같다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 변수</h1>

        <script>
            
            var vNum_1 = 0
            var vNum_2 = 10
            var vResult = vNum_1 + vNum_2

            // document.write(vNum_1, typeof(vNum_1));
            console.log(vNum_1, typeof(vNum_1));
            console.log(vNum_2, typeof(vNum_2));
            console.log(vResult, typeof(vResult));

            var vString = "오징어게임";
            var vNum_3 = 456;

            var vResult_1 = vNum_1 + vNum_2 + vNum_3;
            var vResult_2 = vString + vNum_3;

            console.log(vString, typeof(vString));
            console.log(vResult_1, typeof(vResult_1));
            console.log(vResult_2, typeof(vResult_2));
            
        </script>
        
    </body>
</html>

결과화면을 보자.

숫자형태의 변수들은 + 연산자로 숫자가 더해진 것을 볼 수 있다.

+ 키워드를 사용해 문자가 숫자를 섞어 사용했을 경우 문자열로 결합이 된 것을 볼 수 있다.

반응형

댓글