Ian H Blog

지금까지는 이론 위주의 공부였고 이번 글부터 본격적으로 프로그래밍 문법을 배워봅시다.

연산자(Operator)

앞서 컴퓨터는 계산기로부터 발전한 것이라고 했으니 계산을 한번 시켜봅시다. 웹브라우저 콘솔을 열고(콘솔 여는 법 링크) 아래 명령을 입력합니다.

덧셈과 뺄셈은 우리가 아는 수학 기호를 그대로 +, -를 사용하고 곱셈과 나눗셈은 *, / 를 사용합니다.

+, -, *, /와 같이 데이터를 처리하는데 사용되는 기호를 연산자(operator)라고 합니다.

이 외에도 나눗셈 후 나머지를 구하는 연산자(%), 숫자의 값을 1 증가시키는 연산자(++) 등등 많은 연산자들이 있지만, 지금 모두 설명하지 않고 나올 때마다 설명하도록 하겠습니다.

;(세미콜론)은 프로그래밍에 사용되는 문장부호(punctuator)로 명령어의 끝을 나타냅니다. 자바스크립트에서는 한 줄에 두 개 이상의 명령어가 동시에 있지 않는 이상 세미콜론은 생략 가능합니다.

또한 연산자와 문장부호의 앞 뒤에 띄어쓰기가 있거나 없어도 결과에 영향을 주지 않는 다는 것도 알아 둡시다.

1+1;은 아래와 같이 분석할 수 있습니다.

명령 실행 후 콘솔에 2라는 값이 표시되는데, 이는 브라우저 콘솔이 편의상 마지막으로 실행된 명령의 결과 값을 보여주기 때문입니다.

위 예제처럼 두 개 이상의 명령어를 한번에 입력하면 가장 마지막 명령인 2*2;의 결과값만 콘솔 화면에 표시됩니다. 1+1; 명령의 값은 사라져 버린 것이죠. 마지막 명령의 결과값 4도 브라우저 콘솔이 편의상 표시해 주는 것이지, 프로그램을 짤 때 단순히 2*2; 이렇게만 작성하면 결과를 확인할 수도 없고, 다시 사용할 수도 없습니다.

계산을 한 후에 그 결과값(데이터)을 나중에 사용하려면 그 값을 따로 저장해 두었다가 다시 불러올 수 있게 해야 하는데 이러한 역할을 하는 것이 변수입니다.

변수(Variable)

변수(variable)은 데이터를 담아둘 수 있는 상자입니다. 이 변수라는 상자에는 어떤 내용이 들었는지를 알려주는 이름을 지어주어야 합니다.

변수는 아래의 명령으로 선언할 수 있습니다. 변수의 선언(declaration)은 프로그램에게 내가 정한 이름을 변수로 사용하겠다고 알리는 것입니다.

var 변수_이름;

var는 자바스크립트에서 변수를 선언할 때 사용되는 예약어(keyword)입니다. 예약어는 프로그래밍 언어에서 명령 작성을 위해 미리 점유해 놓은 단어로 이 단어들은 이미 특별한 용도를 가지고 있으므로 다른 용도(변수나 함수 이름을 만들 때)로 사용할 수 없습니다.

변수의 이름은 일정한 규칙하에 프로그래머가 마음대로 붙일 수 있습니다.

- 문자, 숫자 및 특수문자의 조합으로 변수의 이름을 지을 수 있음
- 숫자는 첫글자에는 사용 불가능, 첫글자가 아닌 경우 사용가능
- 특수문자는 연산자, 문장부호가 아닌 이상 사용가능
- 예약어와 동일한 단어는 사용불가능(var는 불가능. 하지만 var1과 같이 완전히 일치하지 않으면 사용가능)
- 띄어쓰기는 불가능

프로그래머는 규칙 내에서 마음대로 변수의 이름을 붙일 수 있지만, 변수의 이름을 지을 때는 의미가 분명하고 담고자 하는 데이터를 잘 표현할 수 있는 단어를 찾아서 사용하는 것이 좋습니다.

추가로 예약어나 변수 이름 등 프로그래밍에 사용되는 단어들은 낱말의 대소문자가 달라지면 다른 단어로 처리되는 것도 반드시 기억합시다.(var와 Var는 다른 단어로 취급)

자동차의 바퀴 수(데이터)를 저장할 변수를 선언해 봅시다.

위 명령을 입력하면 콘솔에 undefined라고 표시됩니다. 변수를 선언하는 명령은 실행된 후 결과값을 가지지 않는데, 데이터가 주어지지 않음을 나타내는 데이터가 undefined입니다. 나중에 다시 자세히 살펴볼 예정이니 지금은 그냥 undefined가 에러메세지가 아니라는 것만 알고 넘어갑시다.

이제 프로그램에 변수를 사용할 준비가 되었으니 데이터를 넣어 봅시다.

변수에 데이터를 넣는 것을 대입(assignment)이라고 합니다. 아래 명령으로 변수에 값을 넣을 수 있습니다.

선언된_변수_이름=데이터;

대입연산자 =를 사용해서 우항의 값을 왼쪽의 변수에 저장하는 연산을 합니다.

위에서 선언한 wheels 변수에 데이터를 넣어 봅시다. 일반적으로 자동차는 4개의 바퀴가 있으니 숫자 4를 넣어봅시다.

이제 wheels이라는 단어는 대입한 데이터 4와 동일하게 취급됩니다.  wheels 변수와 숫자를 연산시켜 봅시다. 이 자동차가 12대가 있다면 총 바퀴의 갯수는?

변수는 새 값을 받아 값이 변하기도 합니다. 차를 개조하여 기존의 바퀴갯수에서 2개를 더하였습니다.

대입연산자는 우항의 값을 먼저 구한 후 변수에 저장하기 때문에 위 명령에서 오른쪽 wheels는 이전에 저장된 4이고, 2를 더하여 6이 된 후 대입연산자 = 를 통해 다시 왼쪽의 wheels 변수에 대입됩니다. 앞으로 wheels 변수는 6이라는 데이터를 가지게 됩니다.

아래의 구문으로 변수의 선언과 데이터의 대입을 동시에 할 수도 있습니다.

var 변수_이름=데이터;

myName 이라는 변수명에 Ian이라는 문자열 데이터를 넣었습니다. 따옴표(")는 프로그램에게 해당 문자열이 데이터라는 것을 알려주는 역할을 한다고 이미 배웠습니다.

위 명령을 분석해 보면 다음과 같습니다.

마지막으로 변수이름에 변수이름이 될 수 없는 단어를 사용하여 변수 선언을 해보겠습니다.

Unexpected token var 에러가 납니다. 프로그램이 명령을 해석하는 과정에서 var를 인식한 후 이어서 변수 이름이 나와야하는데 예약어인 var가 나와서 기대하지 않은 토큰(여기서 토큰은 단어를 뜻합니다) var가 입력되었다고 에러로 알려주는 것입니다.

정리 및 요약

• 연산자(Operator): 데이터를 처리하는데 사용되는 기호

• 연산자	+	-	*	/
  용도	덧셈	뺄셈	곱셈	나눗셈

• 변수(Variable): 데이터를 담아둘 수 있는 상자
• 변수의 선언(declaration): 프로그램에게 내가 정한 이름을 변수로 사용하겠다고 알리는 것
• 예약어(Keyword): 프로그래밍 언어에서 명령 작성을 위해 미리 점유해 놓은 단어
• var는 자바스크립트에서 변수를 선언할 때 사용되는 예약어
• ;(세미콜론): 프로그래밍에 사용되는 문장부호(punctuator)로 명령어의 끝을 나타냄
• 변수 이름 규칙
  - 문자, 숫자 및 특수문자의 조합으로 변수의 이름을 지을 수 있음
  - 숫자는 첫글자에는 사용 불가능, 첫글자가 아닌 경우 사용가능
  - 특수문자는 연산자, 문장부호가 아닌 이상 사용가능
  - 예약어와 동일한 단어는 사용불가능(var는 불가능. 하지만 var1과 같이 완전히 일치하지 않으면 사용가능)
  - 띄어쓰기는 불가능
• 예약어나 변수 이름 등 프로그래밍에 사용되는 단어들은 낱말의 대소문자가 달라지면 다른 단어로 처리됨
• 대입(assignment): 변수에 데이터를 넣는 것
• 대입연산자 =: 오른쪽의 값을 왼쪽의 변수에 저장하는 연산자