티스토리 뷰
표현식과 연산자
값은 다양한 방법으로 만들수가있다.
이때 다양한 방법이 표현식
표현식에는 여러가지가있다.
아래와 같다
// 리터럴 표현식
10
// 식별자 표현식 -> 변수
sum
// 연산자 표현식
10 + 20
// 함수/메소드 호출 표현식
square()
표현식은 결국 값처럼 사용할 수 있다.
let myage = '31';
// 연산자 표현식 (워너비 트웬티..)
myage - 11; // 식별자 표현식과 숫자 리터럴과 연산자의 조합
연산자
하나이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 연산 등을 수행해 => 하나의 값을 만듬
// 산술 연산자
5 * 4 // 20
// 문자열 연결 연산자
'My name is ' + 'Lee' // "My name is Lee"
// 할당 연산자
let color = 'red'; // "red"
// 비교 연산자
3 > 5 // false
// 논리 연산자
(5 > 3) && (2 < 4) // true
// 타입 연산자
typeof 'Hi' // "string"
산술연산자
수.학.적 계산을 수행해 새로운 값을 만든다.
산술 연산을 할 수 없는 경우 NAN을 반환한다.
산술 연산자에는 두가지가있다.
- 이항산술연산자
- 단항산술연산자
이항산술연산자 같은경우에는 다들 많이 아는 기본 연산
이항 산술 연산자의미
| + | 덧셈 |
| - | 뺄셈 |
| * | 곱셈 |
| / | 나눗셈 |
| % | 나머지 |
단항 산술 연산자 같은경우는 알고리즘에서 많이 사용되며 for문등에서 사용되고 값을 증가시키는것
단항 산술 연산자의미
| ++ | 증가 |
| -- | 감소 |
| + | 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. |
| - | 양수를 음수로 음수를 양수로 반전한 값을 반환한다. |
**여기서 잠시!
++가 앞에 있는 경우가 있고 ++가 뒤에있는 경우가 있다 어떤 차이인지 확실히 알고가자
let x = 5, result;
// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6
// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7
// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6
// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
위에 예시에서 알수 있듯이 대입이 언제인가?
이것이 중요하다
그렇다면 아래의 값은?
let a = 3;
let b = a++;
let c = ++a;
console.log(a,b,c) // 이 때 값은?
답은 순서대로
a=5, b=3, c=5 이다.
++가 뒤에 붙었다는 의미란?
후증가. 그렇기에 b=여전히 3이다. a는 어찌되엇든 계속 증가가 되니 5, c는 증가된 4에 선증가 후 할당이기에 값이 5다.
*for문은 보통 a++로 사용하여 이후에 돌아오는값에 1을 증가시켜준다.
문자열 연결 연산자
// 문자열 연결 연산자
'1' + '2' // '12'
'1' + 2 // '12' => 얘는 문자 + 숫자 => 그치만 문자열이됨
// 산술 연산자
1 + 2 // 3
1 + true // 2 (true → 1)
1 + false // 1 (false → 0)
true + false // 1 (true → 1 / false → 0)
1 + null // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)
예제를 보면 타입이 변함을 알 수 있다.
개발자에 의도와 상관없이 자바스크립트 엔진에 의해서 타입이 변해버리는 일이 발생한다.
그러니 이점을 주의해야한다.
null의 값이 0으로 계산된다는점과 undefined가 들어갈시 NAN이 나온다는점은 잘 기억해두자.
할당연산자
할당 연산자사례동일 표현
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
비교연산자
| == | 동등 비교 | x == y | x와 y의 값이 같음 |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 |
| != | 부등 비교 | x != y | x와 y의 값이 다름 |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 |
보통 == 과 ===의 차이를 많이 묻는데
=== 은 엄격한 비교를 의미한다. 타입까지 같은가 아닌가.
1 == '1' 이 성립되는 반면에 1 === '1'은 false로 나온다.

일치 비교 연산자에서 주의할 것은 NaN이다.

오! 이런신기한일이..NaN은 자신과 일치하지 않는 유일한 값이라고한다.
NaN === NaN 대신 isNaN(NaN) 을 사용해야된다고한다. 이렇게 하면 true가 나온다

5 != '5'가 false인 이유는 값이 다르지않다고 여기기에(타입검사를 하지않는다)
반면에 아래는 타입까지 검사해줘서 타입이 다르니 다르다 true가 된다.
대소관계 연산자
| > | x > y | x가 y보다 크다 ✕ |
| < | x < y | x가 y보다 작다 ✕ |
| >= | x >= y | x가 y보다 같거나 크다 ✕ |
| <= | x <= y | x가 y보다 같거나 크다 ✕ |
논리연산자
| || | 논리합(OR) |
| && | 논리곱(AND) |
| ! | 부정(NOT) |
논리 부정(!) 연산자는 언제나 불리언 값을 반환한다.
// 암묵적 타입 변환
!0 // true
하지만 논리합(||) 연산자와 논리곱(&&) 연산자의 연산 결과는 불리언 값이 아닐 수도 있다.
// 단축 평가
'Cat' && 'Dog' // “Dog”
typeof 연산자
typeof '' // "string"
typeof 1 // "number"
typeof NaN // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof null // "object"
typeof [] // "object"
typeof {} // "object"
typeof new Date() // "object"
typeof /test/gi // "object"
typeof function () {} // "function"
주의해야할점은
NaN이 number라는 점과 Null은 object로 나온다는점!
또 null은 타입비교를 사용하면안되고 일치연산자를 사용해야한다.
let foo = null;
console.log(typeof foo === null); // false
console.log(foo === null); // true'Javascript' 카테고리의 다른 글
| Web Worker란?? (0) | 2022.11.28 |
|---|---|
| [javascript] 비동기프로그램 (0) | 2022.06.01 |
| promise 의 리턴값과 then (1) | 2022.05.20 |
| [Javascript] 프로그래밍, 자바스크립트 (0) | 2022.04.19 |
| 섹션2 HA2 까다로웠던 부분 (0) | 2021.12.13 |
