thumbnail
JavaScript
2022.06.03.
TIL
Deep_Dive

1.연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당 , 비교 , 논리 , 지수 연산 등을 수행해 하나의 값을 만든다.

연산의 대상을 피연산자라고 하는데 피연산자는 값으로 평가 될 수 있는 표현식이어야 하고 연산자와 피연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가 될 수 있는 표현식이다.

(엄청 쉽게 말하면 피연산자는 연산에 참여하는 변수나 상수 민수 , 연산자는 기호)

//산술연산자
5*4 //20 

//문자열 연결 연산자
'My name is' + "Minsu' //-> 'My name is Minsu'

//할당 연산자
color = 'red' // 'red'

//비교 연산자
3 > 5 // false

//논리 연산자
true && false // fasle

//type 연산자
typeof 'hi' // string

2.산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해서 새로운 숫자값을 만든다.

산술 연산이 불가능한 경우 , NaN을 반환한다.

(산술연산자는 피연산자의 개수에 따라서 이항 산술 연산자와 단항 산술 연산자로 구분 할 수 있다.)

2.이항산술연산자

2개 이상의 피연산자를 산술 연산하여 숫자값을 만듭니다.

저희가 알고 있는 기본적인 계산식이여서 피연산자를 바꾸는 부수효과가 없이 언제나 새로운 값을 만든다.

단항 산술 연산자

예시 보면 이해 쉽습니다.

++, - - , + , -

++, - - 는 부수효과 있음 (증가 감소 연산자는 피연산자의 값을 변경하는 암묵적 할당이 일어난다.)

var = 1;

x++;// x=x+1;
console.log(x); //2

x--;//x=x-1;
console.log(x);//1

+,-는 부수 효과 없음 ( +는 음수를 양수로 바꾸지 않음) ,(-반대로 알죠?)

그런데 제일 중요한거 빠밤 (주의)

증가 감소 연산자는 위치에 의미가 있는거 알고 있죠?

앞에 위치한 전위 증가 감소 연산자는 먼저 피연산자의 값을 증가 감소 시킨 후 다른 연산을 수행한다.

뒤에 위치한 후위 증가 감소 연산자는 먼저 다른 연산을 수행하고 나서 피연산자의 값을 증가 감소시킨다.

var x = 5;,result

result = x ++;
console.log(result,x); // 5,6

result = ++x;
console.log(result,x); // 7,7

result = x --;
console.log(result,x); // 7,6

result = --x;
console.log(result,x); // 5,5

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용을 사용하면 숫자 타입으로 변환하여 반환한다.

var = '1'

console.log(+x) ; //1
console.log(x);//'1'

x=true;
console.log(+x) //1
console.log(x) // true

x= '민수' (문자열을 숫자로 타입 변환 할 수 없으므로 Nan을 반환)
console.log(+민수); //NaN
console.log(민수); //민수

이때는 피연산자를 변경하는건 아니고 걍 변환한 값을 생성하여 반환.

3.문자열 연결 연산자

이건 ㅋ 걍 피연산자중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다는거

ex) 3+’4’ // 34

그 외에는 산술 연산자로 동작을 한다.

Quiz) 근데 1+ true 하면 어케 될까여?

정답은 불리언 타입의 값인 true 를 강제로 1로 변환한후 연산을 수행해서 답은 2가 나옵니다.

신기하다 자바스크립트

예시

'1'+2;// '12'
1+'2';// '12'

1+2;//3
1+true //2

1+false // 1 왜냐면 false는 0이라
1+ null// 1

+undefinded; // NaN
1+ undefinded // NaN

4.할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

할당 연산자는 변수의 값을 할당 하므로 변수 값이 변하는 부수 효과가 있음요

5.비교 연산자

비교 연산자는 좌항과 우항의 값을 비교한 다음에 그 결과값을 불리언으로 반환하고

비교 연산자는 if 문이나 for 같은 제어문의 조건식에서 주로 사용한다.

근데 또 자바스크립트에서는 신기하게도

5 ==’5’ 이면 암묵적 타입 변환을 거쳐서 ture를 반환한다.

이처럼 동등 비교 연산자는 안티패턴이 많아서 예측하기 어려워서 걍 일치비교 연산자를 쓴다고 합니당.

Quiz) NaN === NaN ????

답은 아니다 NaN은 유일하게 자기 자신과 일치 하지 않는 값.

6.삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환되는 값을 결정을 한다.

자바스크립트의 유일한 삼항 연산자이며, 부수효과는 없다.


(MinsuWeight >130) === true

var result = MinsuWeight>=130 ? 'pass':'fail';

(MinsuWeight >=130) === pass

조건식 ? 조건식이 true 일때 반환값 : false 일때 반환값

if else 문을 사용해도 삼항 연산자와 유사하게 처리할 수 있다.

var x = 2, result;

if ( x % 2) result = '홀수'
else        result = '민수'

console.log(result); //민수

하지만 삼항조건문과 if else문의 차이 분명 존재 할겁니다.

삼항 조건문은 표현식이고 if else문은 표현식이아니라 문이다.

var x = 10;

var result = if ( x%2) { result = '홀수' } else {result = '민수';};
//SyntaxError; Unexpected token if

//if else 문은 표현식이 아니라 값처럼 사용할 수 없다. https://serzhul.io/JavaScript/5.표현식과-문/

그래서 삼항 조건문이 좋은게 값처럼 다른 표현식의 일부가 될 수 있어서 매우 유용함

조건에 따라서 어떤 값을 결정을 해야 한다면 if else 문보다는 삼항 조건 연산자 표현식을 사용하는게 유용하지만

조건에 따라 수행해야할 문이 하나가 아니라 여러개라면 if else문의 가독성이 더 좋다.

7.쉼표 연산자

쉼표 연산자 는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

var x,y,z ;

x=1,y=2,z=3;//3

8.typeof 연산자

typeof “ 쓰면 피연산자의 데이터 타입을 문자열로 반환한다.

9.지수연산자

ES7에서 도입된건데 2**2 이렇게 하면 지수로 쓸 수 있음

그전엔 Math.pow 메서드를 썼움


댓글 불러오는 중…
Thank You for Visiting My Blog 😎.
© 2022 Developer Jae Hyuk, Powered By Gatsby.