JNB
rss

skin by 이글루스

자바스크립트

연산자 정리 06.10.03 17:30

자바스크립트를 프로그래밍 하는데 필요한 자료형들을 사용하는 방법으로 자바스크립트에서는 산술연산자, 관계연산자, 조건연산자, 논리연산자, 증감연산자, 대입연산자 등 6종의 연산자를 제공합니다.

이들 연산자에는 우선순위가 정해져 있습니다.

우선순위

연산자

내용

1

() , []

괄호 / 대괄호

2

!, ~, ++, --

부정 / 증감 연산자

3

*, /, %

곱셈 / 나눗셈 연산자

4

+, -

덧셈 / 뺄셈 연산자

5

<<, >>, >>>

비트단위의 쉬프트 연산자

6

<, <=, >, >=

관계 연산자

7

==, !=

 

8

&

비트단위의 논리연산자

9

^

 

10

|

 

11

&&

논리곱 연산자

12

||

논리합 연산자

13

? :

조건 연산자

14

=, +=, -=, *=, /=, %=, <<=, >>=, &=, ^=, ~=

대입 / 할당 연산자

하나하나 따라하면서 배워 보도록 하죠.

1. 산술연산자

+

더하기

-

빼기

*

곱하기

/

나누기

%

나눈 나머지

 

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. var num1 = 5, num2 = 3;
  4. document.write("num1 + num2 = " + (num1 + num2) + "<br>");
  5. document.write("num1 - num2 = " + (num1 - num2) + "<br>");
  6. document.write("num1 * num2 = " + (num1 * num2) + "<br>");
  7. document.write("num1 / num2 = " + (num1 / num2) + "<br>");
  8. document.write("num1 % num2 = " + (num1 % num2) + "<br>");
  9. //-->
  10. </SCRIPT>

2. 관계연산자

관계연산자는 두 개의 데이터값 과의 관계를 대소로 판단하여 참(true), 혹은 거짓(false)로 반환합니다

A > B

A 가 B 보다 크다

A >= B

A 가 B 보다 크거나같다

A < B

A 가 B 보다 작다

A <= B

A 가 B 보다 작거나 같다

A == B

A 는 B 와 같다

A !=B

A 는 B 와 같지 않다

여기에서 중요한 것은 A 와  B 가 같다는 표현을 할 때는 '=' 가 아닌 '==' 로 표현한다는 것입니다. 자바스크립트에서 '='는 대입연산자로서 A = B 라고 하면 A 라는 변수에 B 값을 대입한다는 뜻입니다. 꼭 알아두세요

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. var num1 = 5;
  4. var num2 = 3;
  5. document.write("num1=5 이고, num2=3 일때<br><br>");
  6. document.write("num1 > num2 연산의 결과는 " + (num1 > num2) + "<br>");
  7. document.write("num1 >= num2 연산의 결과는 " + (num1 >= num2) + "<br>");
  8. document.write("num1 < num2 연산의 결과는 " + (num1 < num2) + "<br>");
  9. document.write("num1 <= num2 연산의 결과는 " + (num1 <= num2) + "<br>");
  10. document.write("num1 == num2 연산의 결과는 " + (num1 == num2) + "<br>");
  11. document.write("num1 != num2 연산의 결과는 " + (num1 != num2) + "<br>");
  12. //-->
  13. </SCRIPT>

3. 조건연산자

조건연산자는 조건의 결과가 참 혹은 거짓중 하나일 때 사용하는 연산자입니다

형식 : 조건식 ? 구문-1 : 구문-2

조건식의 결과가 참(true)이면 구문-1을 실행하고, 거짓(false)이면 구문-2를 실행합니다

 

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. var num1 = 5;
  4. var num2 = 3;
  5. num1 > num2 ?
  6. document.write('num1 이 num2 보다 큽니다') : document.write('num2 가 num1 보다 큽니다')
  7. //-->
  8. </SCRIPT>

위의 조건식을 보면, 5번째줄에서 num1 이 num2 보다 큰지 여부를 물어보고 참이면(5>3이면) 첫 번째 구문을 실행시키고, 거짓이면 두 번째 구문을 실행시켜 줍니다.

유사하게 사용되는 if ~ else 문도 있는데 뒤에서 다뤄 보기로 합니다

4. 논리연산자

논리연산자는 각 논리값들 사이에 사용되는 연산자로 다음과 같은 형태로 사용되며, 결과값을 true 나 false 로 받을 수 있는 연산자입니다.

그 의미는 다음과 같습니다

연산자

의미

연산적용

결과

!

부정, NOT 의 의미

!(참)

 

&&

AND 의 의미로 두가지 모두 참일 때만 참 입니다

참&&참

참&&거짓

거짓&&참

거짓&&거짓

참(true)

거짓(false)

거짓(false)

참(true)

||

OR 의 의미로 두 개중 하나만 참이면 참이 됩니다

참||참

참||거짓

거짓||참

거짓||거짓

참(true)

참(true)

참(true)

거짓(false)

아래에 논리연산자를 사용한 몇가지 예제가 있습니다

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. a = 3;
  4. document.write("a 는 2보다 작은 수인가? : " + (a < 2) + "<br>");
  5. document.write("a 는 2보다 큰 수인가? : " + (a > 2) + "<br>");
  6. document.write("a 는 2보다 크고, 5보다 작은 수인가? : " + (a < 2 < 5) + "<br>");
  7. document.write("a 는 3의 배수이거나 5의 배수인가? : " + (a%3==0 || a%5==0 ) + "<br>");
  8. document.write("a 는 3의 배수이면서 동시에 5의 배수인가? : " + (a%3==0 && a%5==0 ) + "<br>");
  9. document.write("a 는 4가 아닌가? : " + (a != 4) + "<br>");
  10. //-->
  11. </SCRIPT>

5. 증감연산자

증감연산자는 특정 변수에 저장되어 있는 값을 1씩 증가 혹은 감소시킬 때 사용하는 연산자로서 ++, -- 등이 있습니다

예를들어

a = 3 일 때, ++a 는 4, --a 는 2 가 됩니다

즉, 변수 a 의 값에 3 이라는 값이 저장되어 있으면 ( a = 3) ++a 의 결과는 4 가 되고, --a 의 결과는 2가 됩니다

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. a = 3;
  4. document.write("a = 3 일때,<br>");
  5. document.write("++a 는 ===> " , ++a , "<br>");
  6. document.write("--a 는 ===> " , --a , "<br>");
  7. //-->
  8. </SCRIPT>

예제를 보고 결과값이 의도한 대로 나왔나요?

3번 라인에서 a 변수의 값은 3입니다. 그런데 5번라인에서 a 의 값을 1 증가시켰죠? 그래서 5번 라인의 결과(a 의 값)는 4가 됩니다.

그런데, 6번 라인에서 a 의 값을 1 감소시켰죠? 이때 a 의 값은 당초 3에서 1이 감소된 것이 아니라, 5번라인에서 증가된 값, 즉 4에서 1을 다시 감소시켰으니 최종적으로 a 의 값은 3이 되었습니다

위의 예에서 처럼 변수앞에 증감연산자를 사용할 경우를 선행연산자라 하고, 변수 다음에 증감연산자를 사용하는 것을 후행연산자라 합니다.

위치에 따른 선,후행연산자는 다음과 같이 사용됩니다

a = 3 일 경우

b = ++a 는 3+1 즉, a=b=4가 되고, b = --a 는 3-1 즉, a=b=2 가 됩니다

반대로 후행처리를 할 경우

b = a++ 는 b=a=3 이 되며, a 는 다시 값이 1 증가하여 4가 됩니다

이렇게 증감 연산자는 선행처리냐, 후행처리냐에 따라 그 결과가 다르게 나타납니다

6. 대입연산자

대입연산자는 변수에 특정 값을 저장하는 연산자로 "=" 가 있습니다

a = 45 일 때 = 가 대입연산자입니다. 즉 오른쪽값 45를 a 라는 왼쪽에 있는 변수에 저장하는 거죠.

대입연산자 중에 누적 대입연산자 라는 것도 있는데, "+=" , "/=" 의 형식으로 사용됩니다

예를들면,

a = 10 일 때

a += 3 이면 결과적으로 a 의 값은 13이 됩니다

 

지금까지 자바스크립트에서 지원되는 6가지의 연산자를 살펴 보았습니다.

어때요? 머리 아프다구요? 걱정 마세요.

앞으로 재미있는 예제들을 통해 직접 실전경험을 해 보면 저절로 알 게 되어 있습니다.


        

    
Copyright 1999-2018 Zeroboard / skin by JY