모던 자바스크립트 - 표현식 ~ 연산자 정리

 

• 표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 or 참조함
  • 10 - 리터럴 표현식 
  • sum (const sum = 0이라고 선언했다고 가정) - 식별자 표현식 
  • 10 < 20 - 연산자 표현식 
  • sum( ) - 함수 호출 표현식(함수 미리 선언했다고 가정)
• 이 모든 표현식들은 값으로 평가 됨 
  • !!값이 위치할 수 있는 자리라면 어떤 표현식이든 위치할 수 있다는 소리!!

 showResetButton(visible = true) {
    this.resetElement.style.display = visible ? "block" : "none";
  }
  
 input 안의 value가 있을때만 해당 resetElement를 보여주는 코드를 작성하려고 하면
 if(value.length >0) {showResetButton()} else {showResetButton(false)} 
 
 하지만 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 응용하면
 
 this.showResetButton(value.length > 0) // 3줄짜리 코드를 한번에 표현할 수 있음

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정됨 

• Java나 C++ 같이 타입을 미리 선언해서 맞는 타입이 아니면 에러나는 것과 달리 어떠한 데이터 타입 값이라도 자유롭게 할당 가능
• let sum = 0 이라고 값을 할당하는 시점에 저 sum이라는 변수의 타입이 동적으로 결정됨

//Java의 경우

int sum  - 여기서 저 sum이라는 변수(식별자)의 타입이 결정된다
sum = 0  - 값을 할당한 것

//JS의 경우
let sum - 그냥 변수(식별자)만 선언한 것일 뿐, 타입을 갖지 않음
sum = 0 - 이 순간 sum이라는 변수의 타입이 Number로 결정됨

이러한 방식을 동적 타이핑이라고 한다

sum = 'str' - 이 순간에는 변수 타입이 string으로 변함

typeof sum(변수) 할때도 사실 저 sum에 할당된 어떠한 값의 데이터 타입이 무엇인지를 반환한다고 하는 게 정확함

 

연산자/피연산자

 

연산자 : + - / ++ --      피연산자를 연산하여 새로운 값을 만든다

피연산자: 연산의 대상이 되는 값 - 값으로 평가할 수 있는 것들

연산자의 경우 이항산술 연산자 / 단항 산술 연산자로 나뉨

이항산술 연산자
- 피연산자가 2개 필요한 것들 
ex) 1 + 1 / 4 % 2 
- 이항산술 연산자는 부수효과가 없음
- 그냥 저 두개의 값을 계산해서 새로운 값을 만들 뿐 피연산자의 값을 바꿔주거나 이러한 효과는 없음

단항 산술 연산자
- 피연산자 1개로도 충분한 것들
ex) ++ -- + - 
++과 --는 부수효과가 있음 -> 피연산자의 값을 변경하는 효과가 있다는 소리임
++sum sum++ 이 다르다는 것은 정말 익숙한 소리 (but 할때마다 헷갈림...)

++ X 는 먼저 피연산자의 값을 증가 or 감소시킨 후, 다른 연산을 수행함

X ++ 은 먼저 다른 연산을 수행 후, 피연산자의 값을 증가 or 감소

var b = 5
result = b++
console.log(result,b) // 5,6

var b = 5
result = ++b
console.log(result,b) // 6,6

첫번째 case
-> 먼저 result = b 라고 선언한 다음 , 뒤에있던 ++을 해준다고 생각하면 됨

두번째 case
-> 먼저 ++을 해주고, 그 다음 result = b를 진행함

+랑 -는 사실 큰 쓸모는 없는데(부수효과도 없음) , 

let str = '10'

console.log(+str) // 10 (Number)로 출력됨 

type을 숫자로 바꿔주는 역할 (코테할 때 써먹을 수 있음)

'-' 의 경우에는 숫자로 반환 & 부호까지 바꿔줌

 

'+'의 경우에는 문자열 연결 연산자로도 동작함

+ 계산할 때 하나라도 문자열이 있다면 문자열 연결 연산자로 동작함
'1'+2 = '12'(string)

이런것도 가능 
1+ true = 2 // true = 1
1+ false = 1 // false = 0
1+ null = 1 // null = 0
1+ undefined // NaN 
자바스크립트 엔진이 자동적으로 불리언 타입을 숫자로 바꾸는 암묵적 타입 변환(강제 타입 변환)이 발생하기도 함
위에서 +string을 number로 바꿔줬던 것도 이 때문

 

할당 연산자(연산자 왤케많누...)

 = 들어가는 것들(=,+=,-+,%= .... ==은 아님)

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당해줌 => 변수 값이 바뀌는 부수 효과가 있음

x = 5 // x에 오른쪽에 있는 값 5를 할당
x += 5 // x = x+5를 축약한 효과 
x %= 5 , x /= 5 이런것들도 가능

비교 연산자(비교하는거)

=== , !== 은 값과 타입까지 비교 / == , != 은 값만 비교

후자의 경우에는 일단 암묵적 타입 변환을 통해 타입을 일치시킨 후, 같은 값인지를 비교한다고 함

 

삼항 조건 연산자

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

중요한 건 연산자라는 것!!

if (1<2) {console.log(true)} 
else {console.log(false)}

1<2 ? console.log(true) : console.log(false) 

두 코드는 같은 활동?을 한다고 해서 if 축약문이라고 생각하면 안됨
if문은 말그대로 문이고, 값이 아님
but 삼항연산자 표현식은 값처럼 사용 가능 - 값 들어가는 어디든지 사용이 가능하다는 소리
const 저녁 = 지갑>20000 ? 배달 : 라면  이렇게는 가능하지만
const 저녁 = if(지갑>20000){ 배달 } else { 라면 } 은 택도없음

이밖에도 논리연산자,쉼표연산자,그룹연산자,옵셔널 체이닝 연산자 등등이 존재하는데 그건 다음에 알아보기로...