연산자란?

  자바스크립트에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.

 

산술 연산자

  산술 연산자에는 더하기(+), 빼기(-), 곱하기 (*), 나누기(/), 나머지(%)가 있다.

  산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 이상 있어야 한다.

  

  다음 예제는 산술 연산자를 사용하는 예제이다.

<script>
    var num1=15;
    var num2=2;
    var result;
    result = num1 + num2;
    document.write(result, "<br>");	//17
    result = num1 - num2;
    document.write(result, "<br>");	//13
    result = num1 * num2;
    document.write(result, "<br>");	//30
    result = num1 / num2;
    document.write(result, "<br>");	//7.5
    result = num1 % num2;
    document.write(result, "<br>");	//1
</script>

문자 결합 연산자

  문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터이다.

  여러개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다.

 

  다음과 같이 더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로

  문자형 데이터로 형 변환되고 문자 결합이 이루어져 하나의 문자형 데이터를 반환한다.

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
ex)"do it" + "javascript" = "do it javascript";

문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
ex) "100" + 200 = "100200";

  다음은 t1, t2, t3, t4라는 변수에 문자와 숫자 데이터를 각각 넣고 하나의 문자 데이터로 결합하는 예제이다.

<script>
    var t1="학교종이";
    var t2="땡땡땡";
    var t3=8282;
    var t4="어서 모이자";
    var result;
    
    result=t1+t2+t3+t4;
    document.write(result);	//학교종이 땡땡땡 8282 어서 모이자
</script>

대입 연산자

  대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용한다.

  복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입연산자가 복합적으로 적용된것을 말한다.

  다음은 대입연산자 예제이다.

<script>
    var num1=10;
    var num2=3;
    
    num1+=num2;	//num1 = num1(10)+num2(3);
    document.write(num1, "<br>");	//13
    
    num1-=num2;	//num1 = num1(10)-num2(3);
    document.write(num1, "<br>");	//10
    
    num1*=num2;	//num1 = num1(10)*num2(3);
    document.write(num1, "<br>");	//30
    
    num1%=num2;	//num1 = num1(10)%num2(3);
    document.write(num1, "<br>");	//0
</script>

  다음은 여러개의 문자형 데이터로 저장된 HTML 태그를 복합 대입 연산자를 이용하여 하나의 문자로 결합한 다음

  document.write(str);을 이용하여 화면에 출력하는 예제이다.

<script>
    var srt="<table border='1'>";
    str +="<tr>";
    str +="<td>1</td><td>2</td><td>3</td>";
    str +="</tr>";
    str +="</table>";
    
    <!--여러개의 문자형 데이터가 하나의 문자로 결합되어 str에 저장.
         즉, 한개의 문자형 데이터로 결합.-->
    
    document.write(str);
    
    <!--str을 출력하면 문자가 아닌 태그로 인식되어 표가 출력.-->
</script>

  결과화면

  문자형 데이터로 저장된 태그를 복합 대입 연산자를 사용해서 하나의 데이터로 결합 하였기 때문에

  표가 만들어 진다.

 

증감연산자

  증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소연산자(--)가 있다.

  증감 연산자는 앞에서 배운 연산자와는 달리 피연산자가 한 개만 필요한 단항 연산자이다.

  증감 연산자는 어느위치에 오는가에 따라 결과값이 달라진다.

변수의 값을 1만큼 감소시킨다.
변수--; 또는 --변수;

변수의 값을 1만큼 증가시킨다.
변수++; 또는 ++변수;
var A=++B;
<!-- 먼저 B의 값을 1만큼 증가시키고 증가된 B의 값을 A에 대입한다.-->

var A=B++;
<!-- B의 값을 A에 먼저 대입한 뒤 B의 값을 1만큼 증가시킨다-->

  다음은 증감연산자를 사용해 증감 처리 하고 문서에 출력하는 예제이다.

<script>
    var num1=10;
    var num2=20;
    var result;
    
    num1--;			//9
    document.write(num1, "<br>");
    
    num1++;			//10
    document.write(num1, "<br>");
    
    result = num2++;		//result: 20, num2:21
    document.write(result, "<br>");
    
    result = ++num2;		//result:22, num2:22
    document.write(result, "<br>");
</script>

비교연산자

  두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자이다.

  연산된 결과값은 true, false로 논리형 데이터를 반환한다.

  

  다음은 비교연산자의 종류이다.

  비교 연산자 ==와 !+는 피연산자의 자료형(type)이 비교 연산자의 실행 결과에 영향을 미치지 않는다.

  다음 예제의 경우 변수 k에는 숫자형 데이터 10이 저장되었고, 변수 m에는 문자형 데이터 "10"이

  저장되었다.

  그리고 두 변수 모두 숫자형 데이터 10과 같은지 비교하였고 결과는 둘 다 true를 반환한다.

var k=10, m="10";
k==10	//true
m==10	//true

  비교연산자 중 ===와 !==는 피연산자 자료형에 따라 결과값이 달라진다.

  다음 예제의 경우 변수 k에는 숫자형 데이터 10이 저장되었고, k===10은 숫자형 데이터로 둘다 일치하기 때문에 

  true를 반환한다.

  하지만 m에는 문자형 데이터 "10"이 저장되었다. 문자형데이터 "10"과 숫자형데이터 10은 자료형이 다르므로

  m===10은 false를 반환한다.

var k=10, m="10";
k===10	//true
m===10	//false
<script>
    var a=10;
    var b=20;
    var c=10;
    var f="20";
    var result;
    
    result=a>b;		//false
    document.write(result, "<br>");	<!-- a(10)>b(20)은 false가 반환된다.-->
    result=a<b;		//true
    document.write(result, "<br>");
    result=a<=b;	//true
    document.write(result, "<br>");
    result=b==f;	//true
    document.write(result, "<br>");	<!-- b(20)==f("20"은 자료형과 상관없이 숫자만 비교하여 true가 반환된다.-->
    result=a!=b;	//true
    document.write(result, "<br>");	<!-- a(10)!=b(20)은 데이터가 다르므로 true가 반환된다-->
    result=b===f;	//false
    document.write(result, "<br>");	<!-- b(20==f("20")은 숫자는 같지만 자료형이 다르므로 false가 반환된다.-->
</script>

 

논리연산자

  논리 연산자에는 ||(or), &&(and), !(not)이 있다.

  논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결과값을 반환한다.

 

연산자 우선순위

  1. ()

  2. 단항 연산자(--, ++, !)

  3. 산술 연산자(*, /, %, +, -)

  4. 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)

  5. 논리 연산자(&&, ||)

  6. 대입(복합대입)연산자(=, +=, -=, &=, /=, %=)

 

  다음은 비교연산자와 논리연산자를 적용한 예제이다.

  코드 한줄에 비교연산자와 논리연산자가 함께 포함되어 있다면 연산자 우선순위에 따라 비교연산이 먼저 실행되고,

  그 다음 논리연산자가 실행된다.

<script>
    var a=10;
    var b=20;
    var m=30;
    var n=40;
    
    var result;
    result = a>b || b>=m || m>n;		//false||false||false
    document.write(result, "<br>");		//false
    
    result = a>b || b>=m || m<=n;		//false||false||true
    document.write(result, "<br>");		//true
    
    
    result = a<=b && b>=m && m<=n;		//true&&false&&true
    document.write(result, "<br>");		//false
    
    
    result = a<=b || b<=m && m<=n;		//true&&true&&true
    document.write(result, "<br>");		//true
    
    
    result = !(a>b);				//!false를 계산
    document.write(result, "<br>");		//true
</script>

  연산자는 피연산자 중 true가 한개라도 포함되어 있으면 true를 반환한다.

  &&연산자는 피연산자 중 false가 한개라도 포함되어 있으면 false를 반환한다.

  !연산자는 피연산자가 false면 true를 반환한다.

 

삼항 조건 연산자

  삼항 조건 연산자는 조건식(true또는 false의 결과값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항연산자로,

  연산을 위해 피연산자가 3개 필요하다.

 

  삼항 조건 연산자는 연산한 결과 조건식의 만족 여부에 따라 실행하는 코드를 다르게 실행하고자 할 때

  사용한다. 예를 들어 방문자로부터 입력받은 나이값이 20세 이상이면 '성인'이라 출력하고,

  미만이면 '미성년자'라고 출력하도록 할 때 사용할 수 있다.

조건식 ? 자바스크립트 코드 1 : 자바스크립트 코드 2;
<script>
    var a=10;
    var b=3;
    
    var result=a>b ? "javascript" : "hello";
    <!-- a(10)>b(3)은 true 이므로 "javascript"가 result에 저장된다.-->
    document.write(result);	//javascript
</script>

 

예제

  적정 체중을 구하는 테스트기.

    적정 체중 계산법 : 적정체중 = (본인신장 - 100) x 0.9

  

  결과 폼

신장: 180(cm)
체중: 74(kg)
적정 체중: (180-100) x 0.9 = 72(kg)
결과: 적정 체중은 72kg이며, 현재 적정 체중에서 2kg 초과한 것을 알 수 있습니다.

  신장과 체중은 추후 바뀔 수도 있으므로 변수에 저장한다. 신장이 바뀌면 적정 체중도 바뀔것이므로,

      적정체중도 변수에 저장한다.

<script>
    var userHeight=180;	//신장
    var userweight=74;	//체중
    
    //평균체중 = (신장 - 100) x 0.9
    var nomal_w=(userHeight - 100) * 0.9; //결과값을 nomal_w에 저장
    document.write(nomal_w);
</script>

  코드 작성하기

    코드내에서 변수에 직접 대입하는 것이 아닌 사용자가 직접 입력해서 사용할 수 있도록 코드를 작성.

    사용자가 입력 할 수 있는 창을 만들때는 prompt() 메소드를 사용한다.

    prompt() 메소드의 기본형은 prompt("질문","기본응답"); 이며, 사용자로부터 입력된 값은 문자형 데이터로 반환한다.

<script>
    var name=prompt("당신의 이름은?","");		//이름입력
    var height=prompt("당신의 신장은?","");		//신장입력
    var weight=prompt("당신의 몸무게는?","");		//체중입력
    
    var nomal_w=(height - 100)*0.9;		//평균체중
    var result=weight>=nomal_w - 5 && weight <= nomal_w + 5;	//오차범위 +-5
    result = result ? "적정 체중입니다." : "적정 체중이 아닙니다";
    document.write(name+"님은"+result);
</script>

(참고 : do it 자바스크립트+제이쿼리 입문)

'Java Script' 카테고리의 다른 글

객체(내장객체)  (1) 2020.05.19
제어문  (0) 2020.05.19
변수  (0) 2020.05.16
자바 스크립트 기초문법  (1) 2020.05.16
자바스크립트 간단한 실행문 예제  (1) 2020.05.16

+ Recent posts