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

이번에는 자바스크립트(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. 대입 연산자( =, +=, -=, *=, /=, %= )

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

'Dev > Javascript' 카테고리의 다른 글

[자바스크립트] 기초문법 #6 반복문(for) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #5 반복문(while) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #4 선택문(switch) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #3 조건문(if) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #1 선언문과 변수 종류 - travelbeeee  (0) 2019.12.30

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

앞으로 Javascript 를 공부하면서 차근차근 정리해보겠습니다.

1. 자바스크립트 선언문

자바스크립트 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것입니다.

<script> 태그를 이용해 선언을 하고 이 부분을 스크립트 영역이라고 합니다.

<script>
	~자바스크립트 코드~;
</script>

우리나라 개발자 대부분은 <head> 태그 영역에 자바스크립트 선언문을 작성합니다.

다음과 같이 HTML 내부에 자바스크립트 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>//~자바스크립트코드~</script>
</head>
<body>
    
</body>
</html>

하지만, 프로젝트 관리를 원활하게 하기 위해 보통은 외부로 자바스크립트 코드를 분리합니다.

외부 파일로 존재하는 자바스크립트 코드는 다음과 같이 src 속성을 이용해서 불러올 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="자바스크립트파일경로"></script>
</head>
<body>
    
</body>
</html>

2. 자바스크립트 변수

변수(Variables)는 변하는 데이터(값)을 저장할 수 있는 메모리 공간을 뜻합니다.

자바스크립트에서 변수에 저장할 수 있는 데이터 종류로는

 

문자형(string)

숫자형(Number)

논리형(Boolean)

빈 데이터(Undefined)

가 있습니다.

[ 기본형 ]
var 변수명;
var 변수명 = 데이터;
let 변수명;
let 변수명 = 데이터;

위와 같은 형태로 변수를 선언할 수 있습니다.

- 문자형

문자형(String) 데이터는 문자나 숫자를 큰따옴표(" ") 또는 작은따옴표(' ')로 감싸고 있습니다.

또, 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그를 인식해 출력합니다.

    <script>
        var s="<h1> String </h1>";
        document.write(s); // s를 출력하는 명령어.
    </script>

위와 같이 <h1> 태그를 포함하여 출력하면 다음과 같이 <h1> 태그가 적용돼서 웹 브라우저에 출력됩니다.

 

- 숫자형

숫자형(Number) 데이터는 숫자를 의미합니다. 정수, 실수 모두 다 숫자형에 속합니다.

    <script> 
        var s= 100; 
    </script>

 

- 논리형

논리형(Boolean) 데이터는 참(true) 또는 거짓(false) 을 담고 있습니다.

    <script> 
        var s = true;
        var t = 5 < 10; // true
        var k = 5 > 10; // false
    </script>

- Undefined 형

Undefined는 변수에 값이 등록되기 전의 기본 값을 의미합니다.

Null은 변수에 저장된 값이 null인 경우로 Undefined와는 다르므로 구분해줘야 합니다.

null은 변수에 저장된 데이터를 비우는 용도로 사용합니다.

    <script> 
        var t = "hello";
        t = null;
    </script>

- typeof

typeof 는 지정한 변수에 저장된 자료형을 알고 싶을 때 사용하는 함수입니다.

typeof 변수;

위에서 다룬 4가지 데이터형에 대해서 typeof 함수를 사용해보겠습니다.

    <script> 
        var t = "hello";
        document.write(typeof t, "<br>");
        var s = 10;
        document.write(typeof s, "<br>");
        var k = false;
        document.write(typeof k, "<br>");
        var u;
        document.write(typeof u, "<br>");
    </script>

 

t는 문자형, s는 숫자형, k는 논리형, u는 Undefined 형이므로 다음과 같이 출력됩니다.

 

이번 포스팅에서는 가장 기본인 선언문과 자료형에 대해서 다뤄보았습니다.

다음 시간에는 기본 연산과 가능하다면 캐스팅에 대해서 다뤄보겠습니다.

'Dev > Javascript' 카테고리의 다른 글

[자바스크립트] 기초문법 #6 반복문(for) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #5 반복문(while) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #4 선택문(switch) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #3 조건문(if) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #2 연산자 종류 - travelbeeee  (0) 2019.12.30

+ Recent posts

티스토리툴바