[자바스크립트] 기초문법 #2 연산자 종류 - travelbeeee

안녕하세요, 여행벌입니다.

이번에는 자바스크립트(javascript)의 다양한 연산자에 대해서 포스팅해보겠습니다.

---

1. 연산자

자바스크립트 프로그래밍에서 사용하는 연산자는

 

산술, 문자 결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자

가 있습니다.

- 산술 연산자

종류	기본형
+	A + B
-	A - B
*	A * B
/	A / B
%	A % B ( 나머지 연산 )

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

- 문자 결합 연산자

문자 결합 연산자는 피연산자가 문자형 데이터이빈다.

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

또, 숫자형과 문자형이 섞이면 문자형으로 캐스팅되서 저장이 됩니다.

 

문자형 데이터 + 문자형 데이터
ex) "do it " + "javascript";   // "do it javascript"

문자형 데이터 + 숫자형 데이터
ex) "100" + 200;   // "100200"

- 대입 연산자

종류	풀이
A = B	A = B
A += B	A = A + B
A *= B	A = A * B
A /= B	A = A / B
A %= B	A = A % B

대입 연산자는 연산된 데이터를 변수에 저장할 때 사용합니다.

- 증감 연산자

변수--;  --변수; // 변수의 값을 1 감소시킵니다.
변수++; ++변수; // 변수의 값을 1 증가시킵니다.

증감 연산자는 숫자형 데이터를 1씩 증가 혹은 감소시키는 연산자로

피연산자가 한 개만 필요한 단항 연산자입니다.

 

증감 연산자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라집니다.

변수 앞에 ++ 이나 -- 가 온다면 1을 증가 혹은 감소 시킨 후 나머지 연산을 진행해달라는 뜻이고,

변수 뒤에 ++ 이나 -- 가 온다면 나머지 연산을 다 진행 후 1을 증가 혹은 감소 시켜달라는 뜻입니다.

 

예시를 통해서 익혀보겠습니다.

    <script>
        var s = 10;
        document.write(++s); // 11이 출력.
    </script>

변수 앞에 ++ 단항 연산자가 존재하므로 먼저 1을 증가시켜준 후

document.write() 를 진행하므로 11이 출력됩니다.

    <script>
        var s = 10;
        document.write(s++);
    </script>

반대로 변수 뒤에 ++ 단항 연산자가 존재하는 경우에는 출력을 먼저 한 후

1을 증가시키므로 10이 출력되고 s에는 마찬가지로 11이 저장됩니다.

- 비교 연산자

종류	설명	비고
A > B	A가 B보다 크다.
A < B	A가 B보다 작다.
A >= B	A가 B보다 크거나 같다.
A <= B	A가 B보다 작거나 같다.
A == B	A와 B는 같다.	자료형이 숫자형이든 문자형이든 상관하지안고 표기된 숫자만 같다면 true를 반환합니다. ex) 10 == "10" // true
A != B	A와 B는 다르다.	자료형이 숫자형이든 문자형이든 상관하지안고 표기된 숫자만 다르다면true를 반환합니다. ex) 10 != "10" // false
A === B	A와 B는 같다.	표기된 숫자와 자료형까지 일치해야만 true를 반환합니다. ex) 10 == "10" // false
A !== B	A와 B는 다르다.	표기된 숫자 또는 자료형이 일치하지 않을 때 true를 반환합니다. ex) 10 != "10" // true

두 데이터를 '크다, 작다, 같다' 와 같이 비교할 때 사용하는 연산자로 결괏값은 참(true) 와 거짓(false)로 논리형 데이터를 반환합니다.

주의해야할 연산은 == 와 === , != 와 !== 의 차이입니다.

표기된 숫자만 확인할 것인지, 자료형까지 확인할 것인지의 차이로

지금은 "=== 가 조금 더 엄격하다." 정도로 이해하고 넘어가시면 될 것 같습니다. 

- 논리 연산자

종류	설명
||	or 연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결괏값을 반환합니다.
&&	and 연산자로 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결괏값을 반환합니다.
!	not 연산자라 부르며, 단항 연산자입니다. 피연산자의 값이 true이면 false로 false라면 true로 결괏값을 반환합니다.

- 삼항 조건 연산자

삼항 조건 연산자는 조건식의 결과에 따라 실행 결과가 달라지는 연산자로, 피연산자가 3개 필요합니다.

조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2;

기본형은 위와 같으며, 조건식이 참이라면 코드1을, 거짓이라면 코드 2를 사용합니다.

    <script>
        var a = 10;
        var b= 3;
        var result = a > b ? "a가 더 큽니다." : "b가 더 큽니다.";
    </script>

a가 더 크므로 조건식 a > b가 참이 되고 result 에는 "a가 더 큽니다." 문자형 데이터가 저장됩니다.

- 연산자 우선 순위

연산자에도 우선 순위가 있습니다. 우선 순위를 잘 모르고 코딩을 한다면 예상한 결과와 실제 결과가 큰 차이가 있을 수 있으므로, 우선 순위는 어떤 언어를 공부하더라도 익혀두시는 걸 추천드립니다.

1. ( )
2. 단항 연산자( --, ++, ! )
3. 산술 연산자( *, /, %, +, - )
4. 비교 연산자( >, >=, <, <=, ==, ===, !=, !== )
5. 논리 연산자( &&, || )
6. 대입 연산자( =, +=, -=, *=, /=, %= )

---

이상으로 자바스크립트 연산자 포스팅을 마치겠습니다.