JavaScript의 기초 문법 : 연산자

모든 프로그래밍 언어의 경우에는 산술연산자, 비교연산자 그리고 논리연산자를 반드시 가지고 있다. 나머지 할당연산자, 비트연산자, 문자열 연산자, 조건(삼항)연산자는 언어에 따라서 선택적으로 있다. 쉼표 연산자, 단항 연산자, 관계 연산자의 경우에는 JavaScript에만 존재한다.

연산자

산술연산자

덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등의 연산에 사용된다.

연산자	이름	설명
+	덧셈	숫자 피연산자를 더한다. ( 1+2 = 3) 문자열을 연결한다. ( "안녕"+"하세요" = 안녕하세요) : 문자열 연산자
-	뺄셈	두개의 피연산자를 뺀다. ( 2-1 = 1)
*	곱셈	두 피연산자를 곱한다. (2*3 = 6)
/	나눗셈	왼쪽 피연산자를 오른쪽 피연산자로 나눈다 (6/2 = 3)
%	나머지	왼쪽 피연산자를 오른쪽 피연산자로 나누었을 때 나머지를 반환한다. 값은 왼쪽 피연산자의 부호(양수 / 음수) 를 따라간다.
**	거듭제곱	오른쪽 피연산자의 값만큼 왼쪽의 피연산자를 거듭제곱한다. (23 = 2³ = 8) 거듭제곱은 후행부터 연산이 된다. 연산의 순서를 지정하고 싶으면 괄호를 사용해야 한다. (후행부터 연산 : 223 = 256 , 괄호로 연산 순서 지정 : (22)**3 = 64)
++	증감연산자 : 증가	피연산자에 1을 더한다. 전위연산자(++x)는 피연산자에 1을 더한 값을 반환하고, 후위연산자는(x++) 피연산자에 1을 더하기 전의 값을 반환한다.
--	증감연산자: 감소	피연산자에 1을 뺀다. 전위연산자(--x)는 피연산자에 1을 뺀 값을 반환하고, 후위연산자는(x--) 피연산자에 1을 빼기 전의 값을 반환한다.

JavaScript에서는 연산을 할 때 주의할 점이 있다.

2의 보수를 사용하기 때문에 연산이 정확하게 나오지 않을 때가 있다. parseInt를 사용하여 정수로 변환하여 연산하면 이러한 문제점을 개선할 수 있다.
연산하는 피연산자들의 타입이 달라도 자의적으로 해석하여 답을 도출할 때가 있다.
1. 산술연산에서 Boolean타입은 True는 1, False는 0이다.
2. 산술연산의 덧셈(+)에서 문자가 피연산자로 있으면, 다른 피연산자를 문자로 변환하여 연결한다.
  두 양변다 숫자일 경우 산술연산을 한다.
3. 산술연산의 덧셈을 제외한 나머지 연산자에서는 피연산자가 문자여도 숫자로 변환하여 연산한다.

비교연산자

연산자	이름	설명
>	크다	좌변의 피연산자보다 우변의 피연산자가 크면 참을 반환
<	작다	좌변의 피연산자보다 우변의 피연산자가 작으면 참을 반환
>=	크거나 같다	좌변의 피연산자보다 우변의 피연산자가 크거나 같으면 참을 반환
<=	작거나 같다	좌변의 피연산자보다 우변의 피연산자가 작거나 같으면 참을 반환
==	동등	양 변의 피연산자들이 같으면 참을 반환
!=	부등	양 변의 피연산자들이 다르면 참을 반환
===	일치	양 변의 피연산자들이 같고 같은 타입의 경우 참을 반환
!==	불일치	양 변의 피연산자들이 다르거나 타입이 다를 경우 참을 반환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1 > 3); //false
        console.log(4 >= 3); //true
        console.log(3 >= 3); //true
        console.log(2 < 8); //true
        console.log(2 <= 1); //false
        console.log(1 == 1); // true
        console.log(2 != 1); //true
        console.log(2 != 2); // false
        console.log("1" == "1"); //true
        console.log("2" != "1"); //true

        console.log(1 == "1"); // true
        console.log(0 == false); //true
        console.log(0 == null); //false
        console.log(false == undefined); //false
        console.log(null == undefined); //true

        console.log(1=="1"); //true
        console.log(1==="1"); //false
    </script>
</body>
</html>

JavaScript에서는 동등연산자와 부등연산자의 경우 값의 타입은 고려하지 않고 자의적으로 해석하기 때문에, 값의 타입과 값이 모두 일치하는지 혹은 불일치하는지를 확인하기 위해서는 일치연산자(===), 불일치연산자(!==)를 사용해야 한다.

논리연산자

연산자	이름	설명
&&	and 연산자	좌항과 우항 모두 true 일때 true ex: if ( true && true ){ alert (1); } > 실행 if ( true && false ){ alert(1); } > 미실행
\|\|	or 연산자	좌항과 우항 둘 중 하나라도 true면 true ex: if ( true \|\| false){ alert (1); } > 실행 if ( false \|\| false ){ alert (1); } > 미실행
!	not 연산자	부정의 의미 ** !=를 넣음로 false의 부정으로 true가 답으로 도출 ex : alert(1!=2); > true
??	null 병합 연산자	왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 양변 모두가 true일 때 true
        console.log(true && true); //true

        // 양변 중 하나라도 true이면 true
        console.log(true || false); //true 

        //not연산
        console.log(!true); //false

        // JavaScript에서 허용되는 연산
        console.log(true && (3=="3")); //true 
        console.log("abc" && false); // false
        // "abc"를 true로 판단함

        console.log(true && "abc"); //"abc"
        console.log("abc" && true); //true
        // 앞의 연산을 true로 판단한 뒤 다음의 피연산자가 true인지 false인지 판단함
        // true일 경우 그 값을 반환한다. 

        console.log("" && true); // 
        //문자에 아무것도 없으면 false로 판단하고, false 값을 반환함

        // undefined와 null을 false로 반환한다.
        console.log(null || "abc"); //"abc"
        console.log(undefined || "abc"); //"abc"

        // null 병합 연산자
        console.log(null ?? "안녕"); // "안녕"
        console.log("반가워" ?? "안녕"); //"반가워"
    </script>
</body>
</html>

할당연산자

할당연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 저장한다.

왼쪽 피연산자 = 오른쪽 피연산자

할당연산자는 이렇게 단순하게 값을 저장할 뿐만이 아니라, 덧셈·뺄셈·곱셉·나눗셈·나머지·거듭제곱 할당이 있다.

이름	할당연산자	설명
덧셈할당	x+=y	x=x+y
뺄셈할당	x-=y	x=x-y
곱셈할당	x*=y	x=x*y
나눗셈할당	x/=y	x=x/y
지수연산할당	x**=y	x=x**y
비트AND할당	x &= y	x = x&y
비트OR할당	x \|= y	x= x\|y

비트연산자

숫자를 2진수화 하여 연산을 할 경우 사용하는 연산자이다. 비트 연산은 일반적인 연산에 비해서 속도가 빠르고 메모리 사용이 효율적이다.

비트연산자	이름	설명
a & b	비트 and	두 피연산자를 비트로 변경 후 비트가 모두 1이면 1을 반환
a \| b	비트 or	두 피연산자를 비트로 변경 후 비트가 모두 1이거나 한쪽이 1이면 1을 반환
a ^ b	비트 xor	두 피연산자를 비트로 변경 후 비트가 서로 다르면 1을 반환
~a	비트 not	피연산자의 반전된 값을 반환
a<<b	왼쪽시프트	왼쪽으로 숫자를 b만큼 시프트 시킨다.
a>>b	부호 유지 오른쪽 시프트	오른쪽으로 숫자를 b만큼 시프트 시킨다.
a>>>b	부호 버림 오른쪽 시프트	오른쪽으로 숫자를 b만큼 시프트 시킨다.

조건(삼항)연산자

조건식이 참인지 거짓인지에 따라서 값을 다르게 출력 가능한 연산자이다.

(조건식)? 참일 때 값 : 거짓일 때 값;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 11;
        console.log((a%2 == 0)?"a는 짝수입니다.":"a는 홀수입니다.");
    </script>
</body>
</html>

쉼표연산자

단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 사용한다.

표현식1, 표현식2, ....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 3, b = 5, c = 10;
        console.log(a, b, c);
    </script>
</body>
</html>

단항연산자

단항연산자	설명
+	피연산자가 숫자가 아닌 경우에 숫자형으로 변환한다.
-	피연산자 앞에 작성하여 값의 부호를 바꾼다.
typeof	피연산자의 타입을 나타내는 문자열을 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = "2";
        let b = 5;

        console.log(typeof a);
        console.log(typeof (+a));
        console.log(-b);
    </script>
</body>
</html>

관계연산자

관계연산자	설명
in	지정한 속성이 지정한 객체에 존재할 경우 true, 아니면 false를 반환한다.
instanceof	지정한 객체가 지정한 객체 타입에 속하면 true, 아니면 false를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = ["a", "b", "c"];
        const b = new Date();

        console.log("a" in a);
        console.log("d" in a);
        console.log(b instanceof Date);
    </script>
</body>
</html>

'Frontend > JavaScript' 카테고리의 다른 글

JavaScript : 호이스팅이 무엇인가 ? (0)	2024.07.22
JavaScript의 기초 문법 : 함수 (0)	2024.07.22
JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0)	2024.07.19
JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0)	2024.07.18
JavaScript에서 사용자의 입력을 받아보자 (0)	2024.07.15
JavaScript의 템플릿 리터럴이란? (0)	2024.07.15
JavaScript의 기초 문법 : 변수 (0)	2024.07.15
JavaScript의 기초 문법 : 타입 (0)	2024.07.15

코딩쥐의 공부방

JavaScript의 기초 문법 : 연산자

연산자

'Frontend > JavaScript' 카테고리의 다른 글

티스토리툴바

JavaScript의 기초 문법 : 연산자

연산자

'Frontend > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바