자바스크립트 자료형 II

 자바스크립트로 코드를 작성하여 실행하는 방법으로 Visual Studio Code를 이용할 수 있지만 파일을 저장하여 저장된 파일을 실행해야만 결과값을 확인할 수 있기 때문에 좀 더 간단한 방법으로 구글 크롬을 이용하면 편리합니다.

 

 구글 크롬을 여시고 주소입력란에 'about:blank'라고 입력하고 엔터를 칩니다. 그럼 아무 내용이 없는 창이 열립니다. 그럼 F12 키를 누르거나 Ctrl + Shift + I 키를 동시에 누릅니다. 그러면 우측에 아래 그림과 같은 창이 뜹니다. 이를 개발자 도구라 부릅니다.

 

[그림1] 구글 크롬의 개발자 도구

 개발자 도구에서 console 탭을 누르고 '>' 옆에 코드를 입력하여 엔터키를 누르면 코드가 바로 실행되어 그 결과를 확인할 수 있습니다.

 

1. 상수와 변수

 상수는 하나의 값을 나타내며 변화가 없지만, 변수는 그 값이 입력에 따라 변합니다.

상수를 선언할때는 const를 이용하여 선언합니다. 상수 선언 방법은 다음과 같습니다.

 

   const 이름 = 값

 

const는 이름에 값을 입력하라는 명령어입니다.

 

 예를들어 원주율을 입력할때마다 수치를 입력하기는 번거롭기 때문에 다음과 같이 선언합니다. 

 

    const pi = 3.141592

 

그러면 pi는 3.141592라는 값을 가진 상수가 됩니다. 즉 원주율을 사용하고 싶을때 3.141592라는 수치를 직접 입력하여도 되지만 간단히 pi라 입력하여 원주율을 사용하는 것이 훨씬 편리합니다. 여기서 '='의 의미는 수학에서 말하는 같다라는 의미보다는 pi라는 변수에 3.141592라는 값을 대입(입력)한다는 의미입니다. 이렇게 하나의 값으로 입력된 상수는 프로그램내에서 다른 값으로 변경이 불가능합니다. 

 

 반면에 변수는 값이 입력에 따라 계속 변합니다. 변수를 선언할때는 let을 사용하여 선언합니다. 변수 선언 방법은 다음과 같습니다.

 

   let 이름 = 값

 

 형식은 상수 선언과 동일하지만 명령어가 const가 아닌 let으로 다릅니다. 

 

 이번에는  pi라는 변수에 3.1415192라는 값을 입력하려면,

 

    let pi = 3.141592

 

와 같이 입력하면 됩니다. 하지만 상수 pi의 경우에는 그 값이 변할 수 없지만 지금의 변수 pi는 값을 얼마든지 변경할 수 있습니다.

 

 상수와 변수에 대해 설명했던 내용을 코드로 입력하여 실행한 결과를 [그림2]에서 확인할 수 있습니다.

[그림2] 상수 선언후 값을 변경했을때의 결과

 [그림2]에서 보시면 처음에 상수 pi에 3.141592라는 값을 입력했고 다음에 pi에 3을 다시 입력하는 코드를 작성하자 pi는 값을 가진 상수이므로 변수를 사용하라는 에러 메시지가 나온 것을 볼 수 있습니다. 그리고, 다음에 pi를 다시 상수로 선언하면서 값을 2로 입력하라는 코드에 대해서는 pi는 이미 선언되어 있다는 에러메시지가 나타난 모습을 보실 수 있습니다.

 

 이와 같이 상수로 선언된 경우에는 그 값을 변경하거나 같은 이름으로 상수를 재선언할 수 없음을 알 수 있습니다.

 

이제 F5키를 눌러 초기화를 시키고 변수를 선언하는 코드를 입력하고 그 결과를 [그림3]에 보여드립니다.

[그림3] 변수 선언후 값을 변경했을때의 결과

 [그림3]에서 보시면 처음에 변수 pi에 3.141592라는 값을 입력하고, 변수 a에는 2라는 값을 입력했습니다. 

그리고 a와 pi를 곱하였더니 그 결과값으로 6.283184가 나오는 것을 보실 수 있습니다.

다시 변수 pi에 3이라는 값을 입력하고 다시 a와 pi를 곱하였더니 이번에는 6이 결과값으로 출력되는 것을 알 수 있습니다. 즉 변수는 값을 얼마든지 변경하여 대입할 수 있습니다.

 

 그런데, 마지막에 pi를 상수로 선언하면서 3.141592를 대입하는 코드를 입력하여 실행하니 에러메시지가 출력됩니다. 이는 pi가 이미 변수로 선언되어있기 때문에 발생한 에러입니다. 즉 같은 이름의 상수 선언은 불가능하다는 것입니다.

 

 2. 연산자

 연산자에는 앞에서 사용한 '='와 같은 대입연산자가 있으며, 일반적으로 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 사칙연산자도 있습니다. 이외에 복합 대입연산자와 증감 연산자라는 것이 있습니다. 

 

  2-1 복합 대입연산자

    복합 대입연산자는 대입 연산자인 '='와 다른 연산자를 함께 사용합니다.

복합 대입연산자	설명
+=	변수에 입력되어 있는 값에 주어진 값을 더합니다.
-=	변수에 입력되어 있는 값에 주어진 값을 뺍니다.
*=	변수에 입력되어 있는 값에 주어진 값을 곱합니다.
/=	변수에 입력되어 있는 값을 주어진 값으로 나눕니다.
%=	변수에 입력되어 있는 값을 주어진 값으로 나눈 나머지를 구합니다.

    복합 대입연산자를 실제 코드로 작성하여 입력한 후 그 결과값을 [그림4]에 나타냈습니다.

 

[그림4] 복합 대입연산자 코드 입력 및 실행 결과

   [그림4]에서 처음에 변수 a를 선언하면서 10을 입력했습니다. 그 후 복합 대입연산자를 입력하여

 결과 값을 나타내 보았습니다.

 

  2-2 증감 연산자

증감 연산자	설명
a++	선언된 명령을 먼저 실행한 후 변수 a에 입력되어 있는 값에 1을 더합니다.
++a	변수  a에 입력되어 있는 값에 1을 더한 후 선언된 명령을 실행합니다.
a--	선언된 명령을 먼저 실행한 후 변수 a에 입력되어 있는 값에서 1을 뺍니다.
--a	변수 a에 입력되어 있는 값에서 1을 뺀 후 선언된 명령을 실행합니다.

     증감 연산자도 바로 코드를 작성하여 그 결과값을 확인하면서 살펴보겠습니다.

[그림5] 증감 연산자 코드 입력 및 실행 결과

     [그림5]에서 처음에 변수 a를 선언하면서 10을 입력하였습니다. 아래는 다음 코드들의 설명입니다.

 

    1 + a++ : 변수 a는 10을 가지고 있으므로 우선 1 + a를 실행하여 결과값은 11이 됩니다.

              그리고 나서 a의 값을 1증가 시켜 변수 a의 값은 11이 됩니다. (다음 실행 코드 결과 참조)

 

    a++ - 1 : 변수 a의 값은 11이므로 11에서 1을 뺀 10이 결과값으로 출력됩니다.

              그리고 나서 a의 값을 1증가 시켜 변수 a의 값은 12가 됩니다. (다음 실행 코드 결과 참조)

 

    ++a - 1 : 이번에는 변수 a의 값을 먼저 1증가 시켜 13이 됩니다.

             그 후 13에서 1을 빼면 12가 결과값으로 출력됩니다.

 

    a-- - 1 : 변수 a의 값은 13이므로 13에서 1을 뺀 12가 결과값으로 출력됩니다.

            그리고 나서 a의 값을 1감소 시켜 변수 a의 값은 12가 됩니다. (다음 실행 코드 결과 참조)

 

    --a - 1 : 변수 a의 값을 먼저 1감소 시켜 11이 됩니다.

            그 후 11에서 1을 빼면 10이 결과값으로 출력됩니다.

 

       이와같이 증감 연산자는 변수의 앞에 오느냐 뒤에 오느냐에 따라 실행 순서가 달라진다는 것을

      기억해두셔야 합니다.