안녕하세요. Tay 입니다.
자바스크립트 연산자 종류는 다양합니다. (할당, 비교, 산술, 등)
먼저, mdn 을 보면서 연산자 종류가 어떻게 되는지 확인해보죠.
위 처럼 자바스크립트에서는 다양한 연산자가 존재합니다.
전부 배우면 좋지만, 저는 이 단락에서는 자주 쓰는 연산자만 소개하고 넘어가겠습니다..
자세한 것은 위 MDN 링크를 통해서 확인해보시기 바랍니다.
연산자
연산을 할때 사용하는 기호들
1) index.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>
</head>
<body>
<script src="operator.js"></script>
</body>
</html>
operator.js 를 통해서 자주 사용하는 연산자들을 알아보겠습니다.
2) operator.js
산술 연산자(Arithmetic)
let value = 5;
// Arithmetic operators
console.log(value + 2); // 7
console.log(value - 2); // 3
console.log(value * 2); // 10
console.log(value / 2); // 2.5
console.log(value % 2); // 0.5우리가 아는 기본적인 산술 연산자 + - * / % 입니다.
각각 결과를 보며 무슨 기능을 하는지 예측이 되시나요?
순서대로 더하기, 빼기, 곱하기, 나누기, 나머지 입니다.
※ + 연산자는 1 + 'str' 처럼 문자열을 더하는 기능도 가능합니다. (결과 : 1str )
할당 연산자(Assignment)
// Assignment operators
value = 6;
value += 5; // 11
value -= 4; // 7
value *= 3; // 21
value /= 2; // 10.5
value %= 1; // 0.5
console.log(value);+= , -= , *= , /= , %= 는 각각 앞의 연산을 수행한 결과 값을 다시 할당한다 라는 의미 입니다.
비교 연산자(Comparison)
== (동등) , != (부등) , === (일치) , !== (불일치)
단순히 값이 같은지, 값과 타입 등 모든 것이 일치한지를 확인할때 사용합니다.
논리 연산자(Logical)
&& (and) , | | (or) 을 뜻 합니다.
- && : 양 값이 모두 참(true) 일 때 true 를 반환합니다. (즉, 하나라도 false 라면 false 를 반환)
- | | : 양 값 중 하나라도 참(true) 일 때 true 를 반환합니다.
삼항 연산자(Conditional)
조건 ? a : b 형식으로 사용합니다.
- 조건이 참(true)이라면, 값1 을 값으로 갖습니다.
- 조건이 불(false)이라면, 값2 을 값으로 갖습니다.
위 내용의 (age >= 18) ? "yes, you can" : "no, you can not"; 를 확인해보겠습니다.
age 가 18 이상이면, yes, you can 을 갖고, 18 미만이라면 no, you can not 을 갖습니다.
age 는 17입니다. 그렇다면 결과값은 어떻게 될 지 아실거라고 생각합니다.
연산자는 개발에서 굉장히 자주 사용하고, 연산자를 틀리게 사용할 시 데이터에 영향이 큽니다.
그 만큼 중요하니, 위 예제가 이해가 안되시면 github를 통해서 코드를 받아서 꼭 예제를 돌려보세요.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[16] - 함수 호이스팅(Hoisting) 과 화살표(Arrow) 함수 (0) | 2020.01.28 |
|---|---|
| 자바스크립트 정리하며 배우기[15] - 함수(function) 생성방법 3가지 (0) | 2020.01.22 |
| 자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제 (0) | 2020.01.08 |
| 자바스크립트 정리하며 배우기[12] - 배열 개념 및 특성, 배열 선언 방법, 요소 생성, 프로퍼티 생성과 삭제 (0) | 2020.01.07 |
| 자바스크립트 정리하며 배우기[11] - 프로토타입 객체(prototype), 부모객체 상속 (0) | 2020.01.07 |
