2. 연산자(Operators)와 변환(Convert)
JavaScript에서 연산자(Operator)는 변수에 값을 할당하거나
변수들 간의 계산, 비교 등과 같은 작업을 수행하는데 사용되는 단어 혹은 심볼(symbol)입니다. 그래서 다른 프로그래밍 언어들에서와 마찬가지로
더하기, 빼기 같은 산술 연산자부터 시작해서 비트(bit) 연산을
수행하는 비트 연산자를 이용하여 다양한 작업을 수행할 수 있습니다. 여기서는 산술, 할당, 증감, 연속, 비교, 논리, 조건 연산자에
대해서만 설명을 합니다.
2.1 산술 연산자(Arithmetic Operator)
산술 연산자는 숫자형 데이터를 이용하여 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 그리고
나머지를 구하는 연산자를 의미하며 이들 연산자를 통해 두 수(number1, number2)를 이용하여
하나의 값을 구할 때 사용하며 형식은 다음과 같습니다.
var returnValue =
number1 + number2;
var returnValue = number1 - number2;
var returnValue = number1 * number2;
var returnValue = number1 / number2;
var returnValue = number1 % number2;
위 형식에서 number1, number2는 1, 3.14와 같은 실제 데이터일 수도 있지만 숫자형 데이터가 저장되어 있는 변수일 수 있습니다. 이제 예제를 통해 알아볼까요? 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>산술 연산자 예제</title>
<script
type="text/javascript">
var addValue=3+7;
var number1=12;
var number2=3;
var subValue=number1 - number2;
var multiValue=number1 * number2;
var divValue=number1 / number2;
var modValue=number1 % number2;
document.write("더하기 연산 결과 : " +
addValue);
document.write("<br />빼기
연산 결과 : " + subValue);
document.write("<br />곱하기
연산 결과 : " + multiValue);
document.write("<br />나누기
연산 결과 : " + divValue);
document.write("<br />나머지
연산 결과 : " + modValue);
</script>
</head>
<body>
</body>
</html>
위와 같이 작성한 후 “ArithmeticEx.html”로 저장하고 IE9를 통해 보면 다음과 같이 더하기부터 나머지한 결과를 나타냅니다.
2.2 할당 연산자(Assignment Operator)
할당 연산자는 변수에 값을 할당하는데 사용하는 연산자로 기본적인 = 연산자부터 시작해서 기존의 변수에 할당되어 있는 값에 명시한 값을 더하거나 빼는 등이 작업을 수행하는데 사용되는 연산자로 다음과 같은 연산자들이 있습니다.
|
연산자 |
설명 |
|
= |
변수에 값을 할당. var number = 3.14; |
|
+= |
기존에 선언된 변수에 명시한 값만큼을 더하기. number +=2 |
|
-= |
기존에 선언된 변수에 명시한 값만큼을 빼기. number -=2 |
|
*= |
기존에 선언된 변수에 명시한 값만큼을 곱하기. number *=2 |
|
/= |
기존에 선언된 변수에 명시한 값만큼을 나누기. number /=2 |
|
%= |
기존에 선언된 변수에 명시한 값만큼의 나머지. number %=2 |
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
…
<script
type="text/javascript">
var assignValue = 2;
var number = 10;
var modNumber2 = 15;
number += 2;
var addAssignValue=number;
number -= 2;
var subAssignValue=number;
number *= 2;
var multiAssignValue=number;
number /= 2;
var divAssignValue=number;
modNumber2 %= 2;
var modAssignValue=modNumber2;
document.write("할당 연산 결과 : " + assignValue);
document.write("<br />더하기
할당 연산 결과 : " + addAssignValue);
document.write("<br />빼기
할당 연산 결과 : " + subAssignValue);
document.write("<br />곱하기
할당 연산 결과 : " + multiAssignValue);
document.write("<br />나누기
할당 연산 결과 : " + divAssignValue);
document.write("<br />나머지
할당 연산 결과 : " + modAssignValue);
</script>
…
</html>
“AssignmentEx.html” 저장한 후 IE9를 통해 확인하면 다음과 같이 나타납니다.
2.3 단항 산술 연산자(Unary Arithmetic Operator)
코드를 보다 보면 변수의 값을 방금 전 사용할 할당 연산자를 이용하여 증가시키거나 감소시킬 수도
있지만 +나 –를 두 번 연속 사용하여 해당 변수에 할당된
값을 증감시킬 수 있습니다.
예를 들어 “var number = 5;”의 형태로
number 라는 변수에 5가 저장되어 있는데 6으로
증가시킨다면 “number++;”와 같이 코드를 뒤에 추가해주면 되고 만약 4의 값을 가지도록 하려면 “number--;”와 같이 코드를 추가해주면
됩니다. 정리하면 다음과 같습니다.
증가
var number=5;
number++;
감소
var number=5;
number--;
2.4 연결 연산자(Concatenation Operator)
앞서 산술 연산자에서 두 수의 합을 구하기 위해서 + 연산자를
사용했습니다. 그런데 만일 두 수가 아닌 문자열(string) 데이터를
저장하고 있는 변수들 사이에 +를 연산자를 사용할 경우에는 어떻게 될까요? 산술 연산자처럼 합(add)가 구해질까요? 결론적으로 말하면 두 변수에 대해서 합(add)이 되는 것이 아니라
연속(concate)되어 나열됩니다. 즉 연결된다는 것입니다. 그래서 이와 관련하여 사용되는 연산자를 나타내면 다음과 같습니다.
|
연산자 |
설명 |
|
+ |
두 문자열을 연결. “오늘은 “+ “일찍 퇴근” -> “오늘은 일찍 퇴근” |
|
+= |
기존의 문자열 변수에 새로운 문자열을 연결. |
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
…
<script
type="text/javascript">
var strData1 = "오늘은 ";
var strData2 = "일찍 퇴근";
var strResult =strData1 + strData2;
var strHope = "소박한 바램 : ";
strHope +="여가 생활을 하고 싶다.";
document.write("연속 연산 결과 : " + strResult);
document.write("<br />기존
데이터에 대한 연속 연산 : " + strHope);
</script>
…
</html>
“ConcatenationEx.html”로 저장하고 IE9를 통해 확인하면 다음과 같이
연속(연결) 연산자가 어떻게 사용되는지 알 수 있습니다.
2.5 비교 연산자(Comparison Operator)
비교 연산자는 두 변수 혹은 표현식이 같은가 다른가 혹은 크거나 같은가 등과 같은 비교를 위해
사용되는 연산자로 그 결과는 참(true) 또는 거짓(false)의
형태로 반환하여 이와 관련된 연산자는 다음과 같습니다.
|
연산자 |
설명 |
|
== |
두 변수 혹은 표현식이 같은가를 체크. 예를 들면 variable1 == variable2 |
|
!= |
두 변수 혹은 표현식이 다른가를 체크. 예를 들면 variable1 != variable2 |
|
> |
두 변수 혹은 표현식이 큰가를 체크. 예를 들면 variable1 > variable2 |
|
>= |
두 변수 혹은 표현식이 크거나 같은가를 체크. 예를 들면 variable1 >= variable2 |
|
< |
두 변수 혹은 표현식이 작은가를 체크. 예를 들면 variable1 < variable2 |
|
<= |
두 변수 혹은 표현식이 작거나 같은가를 체크. 예를 들면 variable1 <= variable2 |
|
=== |
두 변수 혹은 표현식이 값과 데이터 타입이 같은가를 체크. |
|
!== |
두 변수 혹은 표현식이 값과 데이터 타입이 다른가를 체크 |
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
…
<script
type="text/javascript">
//문자열 비교를 위한 변수 선언 및 초기화
--①
var strName1 =
"Korea";
var strName2 =
"korea";
//숫자 비교를
위한 변수 선언 및 초기화 --②
var number1 = 3;
var number2 = 3.14;
//"=="와 "===" 연산자 비교를 위한
변수 선언 및 초기화 --③
var variable1=33;
var variable2="33";
document.write("문자열이 같은가? : " + (strName1 ==
strName2));
document.write("<br/>문자열이
다른가? : " + (strName1 != strName2));
document.write("<br/>number1이 number2보다
큰가? : " + (number1 > number2));
document.write("<br/>number1이 number2보다
크거나 같은가? : " +
(number1 >= number2));
document.write("<br/>variable1,variable2가 같은가? : " + (variable1 == variable2));
document.write("<br/>variable1,variable2가 같은가? : " + (variable1 === variable2));
</script>
…
</html>
① 에서 문자열
비교를 위한 변수 strName1, strName2를 선언해주는데 strName1은
대문자로 시작하고 strName2은 소문자로 시작하여 동일한 데이터를 저장하도록 하였습니다.
그리고 이에 대한 비교를 “==”, “!=” 연산자를 수행하여 그 결과를 화면에 나타내도록
코드를 작성합니다. 다음으로 ②에서는 숫자 비교를 위한 변수들을 선언해주고 이에 대한 “>”,
“>=” 연산자를 이용하여 비교하도록 합니다.
마지막으로 ③에서는 “==”와 “===”
연산자의 차이점을 이해할 수 있도록 variable1은 “variable1=33;”의
형태로 숫자형 형태로 선언, 초기화해주고 variable2는
“variable2=”33”;”과 같이 문자열 변수의 형태로 선언, 초기화합니다. 그리고 document.write() 메서드를 이용하여 그 결과를
출력하도록 합니다. 작성이 완료되었으면 “ComparisonEx.html”로
저장한 후 IE9를 통해 그 결과를 확인하면 다음과 같습니다.
위 결과에서
보는 것처럼 “==”, “!=” 연산자를 이용한 문자열 비교는 대소문자를 구분하여 비교하여 “Korea”, “korea”가 다르다는 것을 나타냅니다. 다음으로
숫자형 데이터의 비교는 특별히 설명하지 않아도 이해될 것입니다. 마지막으로 “==” 연산자와 “===” 연산자의 차이점을 볼 수 있는 부분으로
이 예제의 부분에서 “==” 연산자는 variable1, variable2가
가진 값만 비교하여 “true”를 결과로 나타내지만 “===” 연산자는
variable1, variable2가 가진 값과 함께 데이터 타입도 비교하기 때문에 위의 결과와 같이
“false”를 반환하게 되는 것입니다.
2.6 논리 연산자(Logical Operator)
논리 연산자는 여러분이 지금까지 설명한 다양한 연산자들을 조합하여 비교 연산자에서 언급한 표현식
등을 만드는데 유용한 연산자로 그 결과는 참(true) 또는 거짓(false)의
형태로 반환하게 됩니다. 이와 관련된 연산자는 다음과 같습니다.
|
연산자 |
설명 |
|
&& |
두 변수 혹은 표현식이 모두 참일 때 참(true)을 반환. AND 연산을 나타냄 |
|
|| |
두 변수 혹은 표현식 중 하나 이상이 참일 때 참(true)을 반환. OR 연산을 나타냄 |
|
! |
변수나 표현식이 false이면 true를 반대로 true이면 false를 반환. NOT 연산을 나타냄 |
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
…
<script
type="text/javascript">
//문자열 비교를 위한 변수 선언 및 초기화 --①
var strName1 =
"Korea";
var strName2 =
"korea";
var stringCompare = (strName1 ==
strName2);
//숫자 비교를
위한 변수 선언 및 초기화 --②
var number1 = 3;
var number2 = 3.14;
var numberComp = (number1 <
number2);
//AND, OR, NOT 연산을 위한 변수 선언 및 초기화 --③
var ANDOperation = (stringCompare
&& numberComp);
var OROperation = (stringCompare ||
numberComp);
var NOTOperation =
!(stringCompare);
document.write("문자열이 같은가? : " +
stringCompare);
document.write("<br/>number1이 number2보다 작은가? : " + numberComp);
document.write("<br/>AND 연산: " + ANDOperation);
document.write("<br/>OR 연산 : " + OROperation);
document.write("<br/>NOT 연산 : " + NOTOperation);
</script>
</head>
…
</html>
①에서 “ComparisonEx.html”에서 사용한
문자열 비교를 위한 변수들인 strName1, strName2를 “==”연산자를
이용하여 비교한 결과값을 저장하는 변수 stringCompare을 선언합니다.
②에서는 “ComparisonEx.html”에서 사용한
숫자 비교를 위한 변수들인 number1, number2를 “<”
연산자를 이용하여 비교한 결과를 저장하는 변수 numberComp를 선언합니다.
③ 에서는 ①, ②에서 선언된 stringCompare, numberComp 변수들을 이용하여 AND, OR, NOT 연산을 수행하는
변수를 선언하고 그 결과를 저장합니다. 마지막으로 ocument.write()
메서드를 이용하여 그 결과를 출력하도록 합니다. 이제 작성이 완료되었으면 “LogicalEx.html”로 저장한 후 IE9를 통해 그 결과를
확인하면 다음과 같습니다.
2.7 조건 연산자(Conditional Operator)
조건 연산자는 보통 3항 연산자라고도 부르는데 그
이유는 조건 연산자과 관련된 연산에 필요한 피연산자(operand)가
3개가 이용되기 때문입니다. 이 3항 연산자는
뒤에 흐름제어 부분에서 다루어지는 if … else문과 유사하므로
if … else문의 대용으로 사용되기도 하며 다음과 같은 형식을 사용합니다.
표현식1? 표현식2 : 표현식3
위에서 표현식1이 참(true)이면 표현식1의
값은 표현식2가 되고 거짓(false)일 경우에는 표현식1의 값은 표현식3이 됩니다. 말로
설명하니 이해가 쉽지 않지요?
예제를 통해 알아보기 위해서 ““LogicalEx.html”에서 숫자 비교에 사용한 number1, number2를 이용하여 사용방법을 알아봅니다. 메모장을
열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
…
<script type="text/javascript">
var number1 = 3;
var number2 = 3.14;
var p1="3이 3.14보다 작다.";
var p2="3이 3.14보다 크다.";
var
Result = (number1 < number2)? p1 : p2 ;
document.write("Conditional
Operator 결과 : " + Result);
</script>
…
</html>
“ConditionalEx.html”이름으로 저장하고 IE9를 통해 확인하면 다음과 같이
나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 3. 흐름 제어(Flow Control) (0) | 2013.08.06 |
|---|---|
| 2.8 변환(Conversion) (0) | 2013.08.06 |
| 1.2 변수(Variable) (0) | 2013.08.06 |
| 1. JavaScript의 데이터 타입, 변수 (0) | 2013.08.06 |
| JavaScript (1) | 2013.08.06 |