예제로 배우는 자바스크립트 요약 및 코드 분석 2장-1

2장 데이터 형과 연산자

  자바 스크립트 변수 이름 짓기, 데이터 형, 연산자, 기초 프로그램 작성법 등에 대해 공부한다. 자바 스크립트의 데이터 형에는 숫자, 문자열, 불, Null, Undefined, Bigint, 객체, 심볼 여덟 가지가 있다. 이 데이터 형들의 특성과 활용법에 대해 배우고, 숫자와 문자열 등을 계산하기 위한 산술 연산자, 문자열 연결 연산자, 할당 연산자, 비교 연산자, 논리 연산자에 대해 학습한다. 또한 연산자를 활용하여 간단한 프로그램을 작성하는 방법을 익힌다.

 

2.1 변수란?

  컴퓨터에서 변수(variable)은 숫자나 문자와 같은 데이터를 저장하는 곳을 말한다. 더 정확하게 설명하자면 데이터가 컴퓨터 메모리에 저장되는 주소이다.

2.1.1 변수 선언

  자바 스크립트에서는 일반적으로 먼저 변수를 선언한 다음 그 변수를 선언한다. 변수를 선언하는데는 var, let, const 세개의 키워드가 사용된다. var는 예전에 사용하던 키워드고 2015년에 let과 const가 변수를 선언하는 키워드로 선언됬었다. var 키워드는 지금도 사용되지만 지금은 주로 let과 const를 사용한다. 앞으로도 let과 const를 사용해서 예제가 나온다.

let을 사용해서 변수를 선언하고 값을 저장하는 방법에 대해서 알아볼 것이다.

예제 2-1. let으로 변수 선언하기

let.html

코드 원문

<script>
        let name="홍길동"
        console.log(name);

        name="김길동";
        console.log(name);
</script>

예제 2-1. let으로 변수 선언하기

let.html

코드 분석

<!-- 자바스크립트 코드 시작 -->
<script>
        let name="홍길동"
        // 키워드 let으로 변수 name 선언 후 변수에 문자열 '홍길동' 저장
        console.log(name);
        // console.log(name) 메서드로 변수 name에 저장된 값 콘솔에 출력

        name="김길동";
        // 변수 name에 문자열 '김길동' 저장 이전 데이터는 날라간다.
        console.log(name);
        // console.log(name) 메서드로 변수 name에 저장된 값 콘솔에 출력
</script>
<! -- 자바 스크립트 코드 끝 -->

이 예제와 같이 let을 사용해서 변수를 선언한 경우에는 얼마든지 필요에 따라 저장된 값을 바꿀 수 있다.

 

  const로 선언된 변수는 저장된 값을 바꿀 수 없다. const는 constant(상수)의 약어이다. 상수는 값이 변하지 않는 수를 의미한다. const로 선언하고 값을 할당하면 값을 바꿀 수 없다. 만약 재할당하려고 하면 오류가 발생된다.

 

  예제 2-1에서 키워드 let대신 const를 사용한 예제를 살펴보겠다.

예제 2-2. const로 변수 선언하기

const.html

코드 원문

<script>
        const name = "홍길동";
        console.log(name);

        name="김길동";              // 오류 발생 : 재할당 불가
        console.log(name);
</script>

예제 2-2. const로 변수 선언하기

const.html

코드 분석

<script>
        const name = "홍길동";
        // const 변수 name 선언하고 문자열 "홍길동" 저장
        console.log(name);
        // console.log(name) 메서드로 데이터값 콘솔에 출력

        name="김길동";              // 오류 발생 : 재할당 불가
        console.log(name);
        // console.log(name) 메서드로 데이터값 콘솔에 출력
</script>

 

2.1.2 변수 이름 짓기

  자바스크립트에서는 변수의 이름을 식별자(identifire)라고 한다. 식별자를 만들때 사용되는 몇가지 규칙이 있다.

1. 변수 이름에는 영어 알파벳, 숫자, 밑줄(_), $를 사용한다.

2. 변수 이름은 숫자로 시작할 수 없다.

3. 변수에서는 대소문자를 구분합니다. 가령 Apple과 apple은 다른 변수이다.

4. 변수 이름을 길게 짓고 싶으면 밑줄(_)이나 캐멀 케이스(CamelCase)를 사용한다.

변수 이름에 중간에 알파벳 대문자가 들어가면 이를 카멜케이스라고 한다.

 

다음 예제에서는 식별자 규칙이 적용된 변수 이름이 사용된다.

예제 2-3. 올바른 변수 이름 사용 예

variable_name.html

코드 원문

<script>
        let a = 5;
        let font1 = "돋움";
        let _price = 30000;
        let max_width = 600;
        let maxWidth = 800;

        document.write(a + "<br>");
        document.write(font1 + "<br>");
        document.write(_price + "<br>");
        document.write(max_width + "<br>")
        document.write(maxWidth);
</script>

예제 2-3. 올바른 변수 이름 사용 예

variable_name.html

코드 분석

<script>
        let a = 5;
        // 변수 a를 선언하고 값 5 저장
        let font1 = "돋움";
        // 변수 font1를 선언하고 문자열 "돋움" 저장
        let _price = 30000;
        let max_width = 600;
        let maxWidth = 800;

        document.write(a + "<br>");
        // document.write() 함수로 변수 a에 저장된 값 출력하고 개행
        document.write(font1 + "<br>");
        // document.write() 함수로 변수 font1에 저장된 값 출력하고 개행
        document.write(_price + "<br>");
        document.write(max_width + "<br>")
        document.write(maxWidth);
</script>