JavaScript(3)

연산자

연산자

• 연산 - 데이터를 처리해서 결과물을 산출하는 것
• 연산자 - 연산에 사용되는 표시나 기호
• 피연산자 - 연산의 대상이 되는 데이터

종류	구분	연산자
최우선 연산자	직접 접근	(), [], .
단항 연산자		++, --, +sign, -sign
이항 연산자	산술 연산자	+, -, *, / ,%
	비교 연산자	> , <, >=, <=, ==, !==, ===, !==
	논리 연산자	&&, ||
삼함 연산자		? : ;
대입 연산자	순수 대입	=
	복합 대입	+=, -=, *=, /*, %=

연산자 우선순위 : 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입

 

단항 연산자

• 부호 연산자 [+ -]
• 논리 부정 연산자 [!]
• 증감 연산자 [++ --]

단항 연산자

부호 연산자 : + -

변수의 부호를 유지(+)하거나 변경(-)할 때 사용.

실제 값을 바꾸는 것은 아니며, 값을 바꾸기 위해서는 대입

연산자 (=)을 사용해야 함.

 

부호 연산자 예시

<script>

        let num = 200;

        console.log(+num);

        console.log(-num);

        console.log(num);

        //실제 값을 바꾸기 위해서는 =을 사용해줘야함.

        num = -num;

        console.log(num);

    </script>

논리 부정 연산자 : !

논리값을 부정하여 반대 값으로 변경. 제어문을 활용할 때 많이 쓰임

 

논리부정 연산자 예시

<h3>논리 부정 연산자 : !</h3>

    <p>true(참) -> false(거짓) , false ->true</p>

    <script>

        let yes = true;

        let no = !yes;

        console.log(no);

    </script>

단항 연산자

증감 연사자 : ++ --

피연산자의값에 1을 더하거나 빼는 연산자

위치에 따라 출력 값이 다르게 나타남

 

전위 연산 : 먼저 연산 후 다른 연산 실행

후위 연산 : 다른 연산 우선 실행 후 연산

<script>

        let addNum = 2;

        console.log(++addNum);

        // ++addNum

        // addNum = addNum+1;

        console.log(--addNum);

        // --addNum;

        // addNum = addNum-1;

    </script>

증감 연산자

전위, 후위 연산자 예시

<h2>전위 연산자, 후위 연산자</h2>

    <p>

        전위 연산자 : ++a, --a

        후위 연산자 : a++, a--

    </p>

    <script>

        let a = 2, b = 0 ;

        // let a = 2;

        // let b = 0;

        console.log(a);

        console.log(b);

        //전위연산자

        b = --a;

        // a = a-1;

        // b = a;

        console.log(a);     //1

        console.log(b);     //1

        // 초기화

        a = 2; b = 0;

        // 후위 연산자

        b = a--;

        // b = a;

        // a = a -1;

        console.log(a);

        console.log(b);

        let num1 = 20;

        let num2 = 0;

        num2 = ++num1;

        console.log(num1);

        console.log(num2);

        num1 = 20;

        num2 = 0;

        num2 = num1++;

        console.log(num1);

        console.log(num2);

    </script>

복합 대입 연산자

다른 연산자와 대입 연사자가 결합한 것으로

자기 자신과 연산 후 연산 결과를 자신에게 누적 대입

a += 10 === a = a+10

a -= 10 === a = a-10

a *= 10 === a = a*10

a / =10 === a = a/10

a % = 10 === a = a % 10

[증감 연산과 비슷해 보이지만 증감연사자는 (++, --)는 1씩 증가

대입 연사자는 원하는 값을 증가시키고 그 변수에 저장 가능]

<h2>예제4</h2>

    <input type="text" id="writeText">

    <button onclick="addText();">문자열 누적하기</button>

    <textarea id="printText"></textarea>

    <script>

        function addText(){

            let one = document.getElementById('printText').value;

            let two = document.getElementById('writeText').value;

            one += two;

            document.getElementById('printText').value = one;

        }

    </script>

 

이항 연산자

• 산술 연산자 : +  -  *  /  %
• 비교 연산자 : >  <  >=  <=  == !=
• 논리 연산자 : && ||

산술 연산자

연산 방법과 우선 순위가 일반 수학과 동일

산술 연산자 설명

+ : 더하기  / *:곱하기

- : 빼기

/ : 나누기의 몫 구하기

% : 나누기의 나머지 구하기

<h2>산술연산자</h2>

    <p> + , -, *, / , % 계산하기</p>

    <input type="number" id="num_1">

    <input type="number" id="num_2">

    <input type="button" id="cal_btn" value="계산하기">

    <script>

        document.getElementById('cal_btn').onclick = function(){

            let first = Number(document.getElementById('num_1').value);  

            let second = document.getElementById('num_2');

            second = second.value;

            second = Number(second);

            console.log('+ :'+(first+second));

            console.log('- : '+(first-second));

            console.log('* : '+(first*second));

            console.log('/ : '+(first/second));

            console.log('% : '+(first%second));

        }

    </script>

비교 연산자

데이터가 같은지, 다른지 비교하는 경우 사용 / 비교 결과 값으로 항상 논리 값(true, false)이 나옴

피연산자로 모든 자료형(기본형,  참조형)사용 가능

a	b	a == b	a! =b
3	5	false	true
5	5	true	false

동등 연산자

== [동등 연산자 , 데이터가 같은지, 다른지 비교할 때 사용, 데이터의 type이 다른 경우에도 값만 일치하면 true]

console.log(1=='1'); //true

===[일치 연산자 / 데이터의 type이 다르면 fasle]

<script>

        console.log(null == undefined);  //true

        console.log(null === undefined); //false

        console.log(true == 1); //true

        console.log(true === 1); //false

        console.log(true == '1'); //true

        console.log(true === '1'); //false

        console.log(0 == -0); //true

        console.log(0 === -0); //true

        console.log(NaN == NaN); //false

        console.log(NaN === NaN); //false

    </script>

 

<h2>비교 연산자</h2>

    <p>

        == : 동등비교 <br>

        != : 불일치비교 <br>

        === : 자료형 포함 동등비교 <br>

        !== : 자료형 포함 불일치 비교 <br>

        대소비교 : >, <, <=, >=

    </p>

    <script>

        let cNum = 200;

        let cStr = '200';

        let cNum2 = 100;

        let cStr2 = '300';

        console.log(cNum==cStr);

        console.log(cNum===cStr);

        console.log(cNum!=cStr);

        console.log(cNum!==cStr);

        console.log(cNum < cStr);

        console.log(cNum <= cStr);

        // 비교 연산자 여러개 연결

        // and 와 or

        // and(&&) : 둘 다 충족할 때 true

        // or(||) : 둘중에 하나만 충족해도 true

        console.log(cNum < 300 && cNum > 100);

        console.log(cNum < 300 || cNum > 400);

    </script>  

비교 연산자

> >= <= < : 두 피연산자의 값의 크기 비교 일치하면 true, 불일치하면 false 반환

 

논리연산자

&& : 두 피연산자가 모두 true일 때 true 반환 AND

|| : 두 피연산자 중 하나만 true여도 true반환  OR

<h2>비교 연산자</h2>

    <p>

        == : 동등비교 <br>

        != : 불일치비교 <br>

        === : 자료형 포함 동등비교 <br>

        !== : 자료형 포함 불일치 비교 <br>

        대소비교 : >, <, <=, >=

    </p>

    <script>

        let cNum = 200;

        let cStr = '200';

        let cNum2 = 100;

        let cStr2 = '300';

        console.log(cNum==cStr);

        console.log(cNum===cStr);

        console.log(cNum!=cStr);

        console.log(cNum!==cStr);

        console.log(cNum < cStr);

        console.log(cNum <= cStr);

        // 비교 연산자 여러개 연결

        // and 와 or

        // and(&&) : 둘 다 충족할 때 true

        // or(||) : 둘중에 하나만 충족해도 true

        console.log(cNum < 300 && cNum > 100);

        console.log(cNum < 300 || cNum > 400);

    </script>

   

    <script>

        console.log(null == undefined);  //true

        console.log(null === undefined); //false

        console.log(true == 1); //true

        console.log(true === 1); //false

        console.log(true == '1'); //true

        console.log(true === '1'); //false

        console.log(0 == -0); //true

        console.log(0 === -0); //true

        console.log(NaN == NaN); //false

        console.log(NaN === NaN); //false

    </script>