[JavaScript] 연산자 (operator)

연산자는 규칙에 따라 계산하여 값을 구해주는 것이다.

연산자를 통해 표현식을 작성하면

자바스크립트 엔진이 그 JS코드를 기계어로 바꾸어(Compile) 해석하고 실행한다.

이를 표현식을 평가한다고 하며 그 반환값을 평과 결과라고 한다.

 

1. 대입 연산자 (할당 연산자)

오른쪽 항에 있는 숫자를 왼쪽에 있는 변수에 대입한다.

​

1=2;

라고 하면 에러가 뜬다.

1에 2를 대입할 수 없어서 그런것이다.

변하지 않는 수인 1은 상수이다.

​

 

2. 산술 연산자

종류	설명	예시
+, - *, / (기본 산술 연산자)	더하기, 빼기, 곱하기, 나누기	1+1 결과값 = 2
+	더하기로 연결된 문자를 이어서 붙여준다.	var name1 = "java" var name2 = "script" name1+name2 결과값 = javascript
% (나머지 연산자)	나누기 연산 후 남은 나머지	5%2 결과값 = 1
++ (증가 연산자)	num++(접미사로 쓰인 경우) 값을 반환한 다음 1씩 증가시킨다. ​ ++num(접두사로 쓰인 경우) 값을 1씩 증가시킨 다음 반환한다.	예시1. var num =1; num++ 결과값 = 2 ​ 예시2. var a = 2; b = ++a; 결과값 = a=3, b=3
-- (감소 연산자)	1씩 감소	var num =1; num-- 또는 --num 결과값 = 0
+=, -=, *=, /=, %= (복합 할당연산자)	=앞의 기호에 대한 연산을 하고 값을 할당한다.	Var sum = 1; sum += 4 결과값 = 5

 

<script>

var str1 = "현재 시간";
var time1 = 1;
var time2 = 2;
var srt2 = "시 입니다.";
var str3 = str1+time1+time2+str2;

document.write(str3);

</script>

 

javascript는 왼쪽부터 오른쪽으로 식을 읽어나간다.

​

str1이 문자열값인데,

javascript는 앞에오는 값이 문자열일 경우

숫자도 문자로 해석해서 1+2가 연산되지 않고

결과값으로

현재 시간 12시입니다.가 나오게 된다.

​

그러나 //로 var str1을 주석처리하고

var str3에서도 제외하면

1+2가 그대로 숫자로 더해지기 때문에

3시입니다.

로 결과값이 나오게 된다.

​

- 문자열의 갯수가 숫자보다 많을 때

  따옴표 안에 들어있는 숫자가 하나라도 있으면

  숫자들은 문자로 자동 자료형 변환되어 결과값으로 나오며

​

- 숫자가 문자열 갯수보다 많으면

  처음에 문자열이었던 숫자를 숫자 자료형으로 인식한다.

 

- 더하기 외에 연산에서는 따옴표로 되어 있어도

  자료형을 숫자로 인식하여 계산된다.

 

- 연산자 양쪽에 있는 값 중 하나라도 숫자로 변환할 수 없으면

  NaN을 반환한다.

 

단항 +연산자

형태: +value

값을 number타입으로 변환해줌.

Number()도 같은 기능을 수행한다.

var trueNum = "27";
console.log(typeof trueNum); //string
console.log(typeof +trueNum); //nubmer
console.log(typeof Number(trueNum)); //number 더 가독성 좋음.

 

 

후치, 전치연산자

공통점 : 값을 자동으로 1 증가시킨다.

전치 ++ 연산자 (++value)	후치 ++ 연산자 (value++)
- 표현식을 평가하기 전에 1 증가시킨다.	- 문장(계산)을 수행한 후에 1 증가시킨다. - ;(세미콜론)다음에서 증가시킨다.

/* 전치연산자 */

var one = 1;
var five = ++one + 4;

console.log(five) = 6;
console.log(one) = 2;



/* 후치연산자 */

var one = 1;
var five = one++ + 4;

console.log(five) = 5;
console.log(one) = 2;

예외 ) console.log( one-- + ++one );는 값이 2로

이렇게 전치 후치를 섞어서 쓰는건 혼동된 결과를 불러일으킬 수 있기 때문에

되도록 혼용해서 쓰지는 않는 걸로..

 

 

 

3. 비교 연산자

종류		설명	예시
동치 연산자	== (동등 연산자, equal operator)	a와 b가 같은가?	a == b
	=== (일치 연산자, strict equal operator)	a와 b가 같은가? (엄격)	a === b
	!= (부등 연산자)	a와 b가 다른가?	a != b
	!== (불일치 연산자)	a와 b가 다른가? (엄격)	a !== b
논리 연산자	&& (and 연산자)	좌항과 우항 모두 참인가?	a == b && a == c
	|| (or 연산자)	조건 중 하나 이상이 참인가?	a == b || a == c
	! (not 연산자)	Boolean의 값을 역전시킴	!false
관계 연산자	>, <	>: a가 b보다 크다면 <: a가 b보다 작다면	a>b a<b
	>=, <=	>= : a가 b보다 크거나 같다면 <=: a가 b보다 작거나 같다면	a>=b a<=b

 

||연산자 (논리 OR연산자)

-표현식의 평가 결과가 하나라도 true면 true

-||연산자를 사용하면 true대신에 true가 되는 변수값을 반환한다.

-왼쪽 결과가 true면 오른쪽은 비교하지 않음. 만약 틀린 비교면 오류가 나기 때문에..

-값을 반환할 때 true가 된 시점의 변수값을 반환

-반대로 false를 반환할 때는 마지막으로 false가 된 변수값을 반환한다.

/* ||연산자를 사용하면 true대신에 true가 되는 변수값을 반환한다. */
var value, zero = 0, two= 2;
console.log(value || zero || two); // 2

/* 모두가 false일 때 false대신에 마지막으로 false가 되는 변수값을 반환한다. */
var value, zero = 0;
console.log(zero || value); // undefined;

/* 왼쪽 결과가 true이면 오른쪽은 비교하지 않는다. */
var one = 1;
console.log(one === 1 || two === 2); // true

 

* 비교 연산의 특징

- 두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치한다.

- 두 숫자는 숫자로서 같은 값이면 일치한다.

- 숫자료 표현할 수 없는 값인 NaN은 자기 자신을 포함한 무엇과도 동등하지 않다.

- +0과 -0은 서로 같다.

- 두 불리언은 둘 다 true거나 false이면 일치한다.

- 서로 다른 두 객체는 절대 일치하지도, 동등하지도 않다.

- 객체를 비교하는 표현식은 두 연산자가 동일한 객체를 참조하는 경우에만 참이다.

- null과 undefined는 자기 자신과 일치하며, 서로 동등하다.

- null===undefined의 결과값은 false이다.

​

​

* == (동등 연산자)와 === (일치 연산자)의 차이

- 일치 연산자는 두 피 연산자가 같은 자료형에, 그 내용도 일치해야만 참이다.

- 동등 연산자는 비교 전에 두 연산자를 동일한 자료형으로 변환한다.

​

==연산자 대신 ===연산자를 쓰는 것을 강력하게 권한다고 한다.

같은 것만 같으니까 예외적인 것을 알 필요가 없고 명쾌하기 때문이다.

 

 

 

그 밖에 . .

 

- 콤마 연산자

기호: ,

콤마로 표현식을 분리,

var a = 1, b = 2;

 

- ()연산자

제일 높은 우선순위를 가진 연산자임

 

- 조건연산자 (3항연산자)

exp? exp-1 : exp-2

exp위치의 표현식을 먼저 평가

true이면 exp-1값 반환

false이면 exp-2값 반환

 

 

 

참고 출처

- https://opentutorials.org/course/3085/18871

- https://www.youtube.com/watch?v=Mga3LXPnWdc&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

- https://opentutorials.org/course/743/4673

- https://opentutorials.org/course/743/4722

- 인프런-자바스크립트 비기너, www.inflearn.com/course/자바스크립트-비기너#