Javascript 기초 (8) 연산자

😊들어가면서😊

자바스크립트의 기본 연산자에 대해서 배우겠다.  

📕 기본 연산자

📖 대입연산자 =

= : 대입해준다.

📖 산술연산자

+ : 덧셈 연산자
- : 뺄셈 연산자
* : 곱셈 연산자
/ : 나눗셈 연산자 (js는 실수와 정수를 구분하지 않기 때문에 5/3 = 1.666, 4/2 = 2)
% : 나머지연산자 (나머지를 정수로 반환)
** : 거듭제곱연산자 (실수로도 가능하기 때문에 제곱근을 간단하게 구할 수 있다.)

4**2;			//16
16**(1/2);		//4

➕ 실수연산

자바스크립트는 실수 연산에 취약하다.
따라서 소수변환을 해서 연산을 하는 것이 정확하다.

	0.3-0.2;						//0.09999999999999998
	((0.3*10) - (0.2 *10)) / 10		//0.1

📒 연산자의 피연산자가 문자열일 경우

case.1 +연산자

• 다른 피연산자를 문자형으로 바꾼다.
  + 연산자의 피연산자로 문자열이 전달되면 문자열을 병합 연산자로 역할한다.
  이때 다른 피연산자도 문자열로 변환된다.

	2+"1";		//21
	//연산자의 우선순위와 처리순서에 따라 (2+2)가 먼저 실행됨.	
	2+2+"1";	//41

case.2 그 외 연산자

• 다른 피연산자를 숫자형으로 바꾼다.

📒 단항연산자 +가 문자형을 숫자형으로 변화

단항연산자는 문자형을 숫자형으로 바꾼다.

	+"5"		//5

📖 증감연산자

연산자	기능
++	항의 값에 1을 더한다.
--	항의 값에 1을 뺀다.

a++ : 증가시킨후 대입한다.
++a : 대입한 후 증가시킨다.

  let counter = 0;
  alert( ++counter ); // 1

  let counter = 0;
  alert( counter++ ); // 0

📖 대입 할당 연산자

연산자	기능	예시
+=	두항의 값을 더해서 왼쪽 항에 대입	a = a+b 와 동일
-=	왼쪽 항에서 오른쪽 항을 빼서 그 값을 왼쪽 항에 대입	a = a-b; 와 동일
*=	두항의 값을 곱해서 왼쪽 항에 대입	a = a*b 와 동일
/=	왼쪽 항을 오른쪽 항으로 나누어 그 몫을 왼쪽 항에 대입	a = a/b; 와 동일
%=	왼쪽 항을 오른쪽 항으로 나누어 그 나머지를 왼쪽 항에 대입	a = a%b; 와 동일

📖 부호 연산자

+ : 부호 유지
- : 부호 반대로

📖 비교 연산자

연산자	기능
>	왼쪽항이 크다.
<	왼쪽항이 작다.
>=	왼쪽 항이 크거나 같다.
<=	왼쪽 항이 작거나 같다.
==	값이 동일하다. → true
!=	값이 다르다. → true
===	값과 타입이 동일하다. → true
!==	값이 타입이 다르다. → true

⚠️ 비교연산자 문자열
피연산자에 문자열이 들어가있을 경우 수치의 값으로 판단하지 않고 유니코드순으로 평가한다.
또한 앞자리하나하나 판단한다.

	"2">"04";		//true

⚠️ 다른 형을 가진 값의 비교
비교하는 피연산자의 자료형이 다를 경우에 이를 숫자형으로 바꾼다.

"2" > "04";		//true
"2" > 04		//false

//둘다 숫자형 0으로 변환 
null == undefined; // true

⚠️ 엄격하지 않은 동치 비교 : ==
자료형을 숫자형으로 바꾼 후 수치를 비교한다.

	"2" == 2 ;		 //true
	null === undefined; // false

⚠️ 엄격한 동치 비교 : ==
자료형의 동등여부까지 비교한다.

⚠️ 비교가 불가능한 undefined
undefined는 null이나 undefined과만 같고 그 이외의 값과는 다르다.
또한 비교시 NaN으로 변환되어 >,<일 때 false을 반환

undefined <= 0		//false
null <= 0			//true

⚠️ 동등연산자 == 는undefined나 null 을 형 변환을 하지 않는다.
undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우는 무조건 false를 반환합니다.

null == undefined		//true
null == ""				//false

⚠️ 비교시에 0이 되는 null
null은 비교연산자(==제외)시에 0으로 형변환된다.

null < 1 		//true
null > 1		//false
null >= 0		//true

⚠️만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가해야한다.

📖 삼항 조건 연산자

	조건?참값:거짓값

📖 논리 연산자

연산자	기능
&& (논리 곱)	두 항 모두 참이어야 참이다.
¦¦ (논리 합)	둘 중 하나만 참이여도 참이다.
! (부정)	참인 경우 거짓으로 바꾸고, 거짓인 경우 참으로 바꾼다.

⚠️ 주의사항 :
논리 연산자를 기준으로 왼쪽 항만으로 결과 값이 정해지면 오른쪽 항은 실행되지 않는다.

if ( (age = prompt("나이를 입력하세요","")) >= 20 || confirm("술을 좋아하나요?")==true){
    alert("좋아요!")
}

👉 나이를 20이상으로 하면 술을 좋아하는지는 물어 보지 않음.

📕 비트 연산자

• 비트 단위로 연산이 이루어진다.

📖 비트 연산자

& 연산자 : 두 개의 비트값이 모두 1인 경우에 1, 아니면 0이다.
| 연산자 : 비트 값 하나라도 1이면 결과값이 1이 된다.
^ 연산자 : 다른 값일때 결과 값이 1이된다.
~ 연산자 : 비트값을 반전시킨다.

✍️ 색상값에서 가운데 초록색 부분만 분리하는 예제

let color = 0x123456;
let green = (color & 0x00ff00) >> 8 ;
//10진수로 저장되기 때문에 16진수로 변환해서 출력할 수 있다. 
green.toString(16);

📖 비트 이동 연산자

<< 연산자 : 왼쪽으로 비트를 이동한다.
>> 연산자 : 오른쪽으로 비트를 이동한다. (왼쪽에 채워지는 값은 기존 값의 부호비트 값이다.) 부호의 의미가 있을 때 정확히 절반을 유지
>>> 연산자 : 오른쪽으로 비트를 이동한다. (왼쪽에 채워지는 값은 부호비트와 상관없이 0이 된다.) 부호의 의미가 없을 때

4<<1			//8
-4 >> 1			//-2
-4 >>> 1		//2147483646

📕 기타 연산자

📖 typeof

• 인수의 자료형을 반환한다.

//연산자로 사용
typeof x
//함수로 사용
typeof(x)

어떻게 쓰던 결과는 동일하다.

📒 더 알아보기

typeof null
결과는 "object"이다. 객체형은 아니지만 하위호환성을 위에 "object"로 출력하며 객체가 아니다.
typeof alert
결과는 "function"이다. 함수형이라는 자료는 없지만 하위호환성을 위해 "function"을 출력한다. 실제로 유용하게 쓰인다고 한다.

📖 void 연산자

피연산자를 무시하고 undefined을 리턴한다.

📕 연산자의 우선순위

순위	기능	연산자
1	괄호	()
2	증감/논리 연산자 not	++ -- !
3	산술 연산자 곱셈	* / %
4	산술 연산자 덧셈	+ -
5	비교 연산자 대소	< <= > >=
6	비교 연산자 같음	== === != !==
7	논리 연산자	and &&
8	논리 연산자 or	||
9	대입 연산자	= += -= *= /= %=