산술 연산자
/**
* 산술 연산자
*
* 1) 덧셈
* 2) 뺼셈
* 3) 곱셈
* 4) 나눗셈
* 5) 나머지
*/
덧셈 +
뺄셈 -
곱셈 *
나눗셈 /
나머지 %
증가와 감소
증가 ++
감소 --
let number = 1;
number++;
console.log(number);
number 라는 변수에 숫자 1 값을 주고
number ++ 라는 연산자를 대입하면 증가가 되어
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
2
[Done] exited with code=0 in 0.235 seconds
2가 출력된다
let number = 1;
number++;
console.log(number);
number--;
console.log(number);
number -- 라는 연산자를 대입하면 감소가 되어
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
2
1
[Done] exited with code=0 in 0.25 seconds
1이 출력된다
/**
* 연산자의 위치
*/
let result = 0;
console.log(result);
result = number++;
console.log(result, number);
result 라는 변수명에 값을 0으로 주고 콘솔에 띄우면 0이다
result = number ++ 는 어떻게 나올까
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
0
1 2
[Done] exited with code=0 in 0.205 seconds
처음 선언한 result 값인 0과
그밑에 1과 2가 출력된다
해당 코드는 연산자의 위치가 맨 오른쪽에 있기 때문에
(result)0 = (number)1 과 (number) 1 ++ 가 되어 2 가 출력된다
=는 오른쪽의 값을 왼쪽에 저장하는 기호이므로
number 값이 result로 먼저 저장되고 ++연산자는 뒤에 저장되는걸 볼 수 있다
result = number--;
console.log(result, number);
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
0
1 2
2 1
[Done] exited with code=0 in 0.239 seconds
-- 연산자도 마찬가지다
++ 연산자 코드의 밑에 -- 연산자 코드를 실행했으므로
result(1) = number(2) 가 되어 result는 2의 값을 저장하고
number -- 는 감소가 되어 2 에서 1로 감소되어 출력된다
result = ++number;
console.log(result, number);
result = --number;
console.log(result, number);
그래서 이렇게 연산자를 앞에다가 입력하면
원하고자 하는 연산을 할 수 있다
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
2 2
1 1
[Done] exited with code=0 in 0.214 seconds
++ 연산자 사용시 result(2) = ++number(1 에서 증가되어 2) 그래서 number값이 2가되어 result에 저장해
result는 2가된다
-- 연산자 사용시 result(2) = --number(증가된 2에서 감소되어 1) 그래서 number값이 1이되어 result에 저장해
result는 1이된다
하지만 위의 식처럼 =++, =--로 연산자를 쓰면은 선임자에게 싸대기 맞는다고 한다
/**
* 숫자 타입이 아닌 타입에 +, -를 사용하면?
*/
let sample = '99';
console.log(+sample);
console.log(typeof +sample);
sample 이라는 변수에 99라는 문자열(string) 값을 지정하고
콘솔창에 실행할때 변수명 앞에 + 를 붙여줬다 +sample
그리도 typeof로 자료형을 물어보면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
99
number
[Done] exited with code=0 in 0.233 seconds
99가 출력되고 이것은 number 자료형이라고 가르쳐준다
console.log(-sample);
console.log(typeof -sample);
변수명 앞에 -를 붙이면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
99
number
-99
number
[Done] exited with code=0 in 0.227 seconds
-99 가 출력되고 number 자료형이라고 가르쳐준다
console.log(sample);
console.log(typeof sample);
+나 - 기호를 붙이지 않으면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
99
number
-99
number
99
string
[Done] exited with code=0 in 0.223 seconds
99가 출력되고 이것은 문자열(string)이라고 가르쳐준다
우리가 변수앞에 +나 -를 붙인다고 해서
원래의 기존값이 변경되진 않는다는 뜻이다
sample = true;
console.log(+sample);
console.log(typeof +sample);
이렇게 sample 변수명에 true라는 불리언값을 지정하고
변수명 앞에+ 기호로 숫자로 바꾸면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
1
number
[Done] exited with code=0 in 0.227 seconds
1 이라는 숫자와 number라는 자료형으로 가르쳐 준다
true 라는 불리언값은 숫자로 변환했을때 1이다
false 는 0이다
sample = '남용환';
console.log(+sample);
sample 변수명에 '남용환' 이라는 문자열을 지정하고
변수명앞에 +기호로 숫자로 바꾸면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
NaN
[Done] exited with code=0 in 0.259 seconds
NaN이 출력된다 (Not a Number)
할당 연산자(assignment operator)
/**
* 할당 연산자(assignment operator)
*/
number = 100;
number += 10;
console.log(number);
number 변수명에 100이라는 숫자를 지정하고
+= 이라는 연산자를 사용했다
이것은 number(100)변수에 오른쪽 값(10) 을 + 하는 뜻이다
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
110
[Done] exited with code=0 in 0.231 seconds
100 + 10 은 110이므로 110으로 출력된다
number -= 10;
console.log(number);
이번에는 -= 이라는 연산자를 사용했다
number(110)변수에 오른쪽 값(10)을 - 하는 뜻이다
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
110
100
[Done] exited with code=0 in 0.22 seconds
110 - 10 은 100 이므로 100으로 출력된다
number *= 10;
console.log(number);
number /= 10;
console.log(number);
number %= 10;
console.log(number);
이렇게
*= 곱하기
/= 나누기
%= 나머지 연산자를 사용하면
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
110
100
1000
100
0
[Done] exited with code=0 in 0.226 seconds
number(100) * 10 은 1000
number(1000) / 10 은 100
number(100) % 10 은 0 으로 출력되는걸 볼 수 있다
비교 연산자
/**
* 비교 연산자
*
* 1) 값의 비교
* 2) 값과 타입의 비교
*/
1) 값의 비교 ==
2) 값과 타입의 비교 === 이다
console.log(5 == '5');
console.log(true == '1');
console.log(false == '0');
숫자 5와 문자 5
true 와 문자 1
false 와 문자 0
위의 것들의 값만 비교(==) 했을때
[Running] node "c:\Users\young hwan\Desktop\coding\Html,CSS,JavaScript\JavaScript\1_basics\7_operators.js"
true
true
true
[Done] exited with code=0 in 0.08 seconds
셋다 true가 출력된다
문자 5는 숫자로 바꾸면 5이고
true 와 문자 1은 숫자로 바꾸면 둘다 1
false 와 문자0 은 숫자로 바꾸면 둘다 0 이라서
== 연산자로 값만 비교하면 셋다 true 이다
console.log(5 === '5');
console.log(true === '1');
console.log(false === '0');
이번엔 === 연산자로 값과 타입까지 비교해보면
셋다 false로 거짓이 나온다
실무에서 무조건 ===기호를 쓰는게 맞는 방법이라고 한다
console.log(5 != '5');
console.log(true != '1');
console.log(false != '0');
이번에는 !=를 사용했다(!= 는 비교연산자 1번과 같이 값의 비교이다)
!는 모든 프로그래밍 언어에서 반대(같지 않다)라는 뜻으로 사용된다
위의 세 코드는 값은 같으므로 셋다 false이다
셋다 값은 같으므로 != 연산자는 같지않다 이기때문에 false
console.log(5 !== '5');
console.log(true !== '1');
console.log(false !== '0');
!== 연산자를 사용하면(!==는 비교연산자 2번과 같은 값과 타입의 비교)
위의 세 코드는 타입이 다르므로 셋다 true이다
셋다 자료형이 다르므로 !==는 값과 자료형이 같지않다 이기때문에 true
그래서 ===와 마찬가지로 실무에서 !== 를 사용한다고 한다
대소 관계 비교 연산자
console.log(100 > 1);
console.log(100 < 1);
console.log(100 <= 1);
console.log(100 >= 1);
100은 > 1보다 크다 (true)
100은 < 1보다 작다 (false)
100은 <= 1보다 작거나 같다 (false)
100은 >= 은 1보다 크거다 같다 (true)
삼항 조건 연산자(조건부 연산자)
/**
* 삼항 조건 연산자 (ternary operator)
*/
조건식 ? 참일 때 실행되는 식 : 거짓일때 실행되는 식 이다
console.log(10 > 0 ? '10이 0보다 크다' : '10이 0보다 작다');
해당 코드의 조건식은 10 > 0 이고
참일때 실행되는 식은 10이 0보다 크다
거짓일때 실행되는 식은 10이 0보다 작다
그러면 10 > 0 은 10이 0보다 크니까 true이기 때문에
10이 0보다 크다 가 실행된다
논리 연산자
/**
* 논리 연산자
*
* 1) && (and)
* 2) || (or)
*/
// && 조건은 모두 true여야 true를 반환한다
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
&&는 조건이 모두 true여야 true값을 반환한다고 한다
위의 네가지 코드중 첫번쨰는
true && true 는 둘다 true 이기 때문에 ture이고
true && false 는 하나는 false이기 때문에 false
false && true 는 하나는 false이기 때문에 false
false && false 는 둘다 false 이기 때문에 false 값이다
// ||는 하나만 true 여도 true를 반환한다
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
|| 는 조건이 하나만 true여도 true를 반환한다고 한다
위의 네가지 코드중 첫번째는
true || true 는 둘다 true 이기 때문에 ture이고
true || false 는 하나는 true 이기 때문에 true
false || true 도 하나는 true 이기 때문에 true
false || false 는 둘다 false 이기 때문에 false 값이다
console.log(10 > 1 && 20 > 2);
console.log(10 < 1 && 20 > 2);
&&연산자 사용 예시이다
첫번째 코드는 둘다 true 이므로 true
두번째 코드는 하나만 20 > 2 만 true이므로 false
console.log(10 > 1 || 20 > 2);
console.log(10 < 1 || 20 > 2);
||연산자 사용 예시이다
첫번째 코드는 둘다 true이므로 true
두번째 코드는 20 > 2가 true 이므로 true 이다
/**
* 단축 평가 (short circuit evaluation)
*
* &&를 사용했을때 좌측이 true면 우측값 반환
* &&를 사용했을때 좌측이 false면 좌측값 반환
* ||를 사용했을때 좌측이 true면 좌측값 반환
* ||를 사용했을떄 좌측이 false면 우측값 반환
*/
console.log(true || '갓용환');
console.log(false || '갓용환');
console.log(true && '갓용환');
console.log(false && '갓용환');
주석에 적힌 설명대로
첫번째 코드는 ||연산자로 좌측이 true이기 때문에 좌측값인 true 반환
두번째 코드는 ||연산자로 좌측이 false이기 때문에 우측값인 갓용환 반환
세번째 코드는 &&연산자로 좌측이 true이기 때문에 우측값인 갓용환 반환
네번째 코드는 &&연산자로 좌측이 false이기 때문에 좌측값인 false 반환
console.log(true && true && '갓용환');
만약 이렇게 세가지를 비교해보면 어떻게 될까?
갓용환이 반환된다
순서대로1번 박스의 true 와 true를 비교해 true가 나오고
그다음에 2번 박스의 true와 갓용환을 비교해서 갓용환이 반환되게 된다
console.log(true && false && '갓용환');
해당 코드는 true 와 false를 비교해 false가 나오고 false와 갓용환을 비교해 false가 반환되게 된다
지수 연산자
거듭제곱이다 기호는 **
console.log(2 ** 2);
console.log(10 ** 3);
2에 거듭제곱 2 는 4
10에 거듭제곱 3은 1000
/**
* null 연산자(??)
* 좌측값이 null이거나 undefined일때 우측값을 반환
*/
기호는 ??
좌측값이 null이거나 undefined일때 우측값을 반환한다
let name;
console.log(name);
이렇게 정의되지않은 변수명을 만들고
let name;
console.log(name);
name = name ?? '갓용환';
null연산자(??)로 갓용환을 대입하면
좌측의 변수인 naem이 undefined이므로 우측값인 갓용환이 출력이 된다
그러면 name = 갓용환 이렇게 되서 name이라는 변수값엔 갓용환이 저장된다
let name;
console.log(name);
name = name ?? '갓용환';
console.log(name);
name = name ?? '하용환';
console.log(name);
그리고 한번더 null연산자로 이번엔 하용환 이라는 값을 지정하면
그래도 갓용환 이라는 값이 반환된다
첫번째 ?? 연산자로 이미 name이라는 변수에 갓용환 이라는 값을 정의했으므로
두번째 ??연산자로 name과 하용환을 대입했을때
name은 이미 갓용환으로 값이 정의되었기 때문에 연산자가 적용되지않고
갓용환으로 출력되는 것이다
let name2;
name2 ??= '갓용환';
console.log(name2);
위의 설명한 코드들을 줄이면 ??= 연산자를 사용해 코드를 줄일 수 있다고 한다
(+=, -=과 동일)
정리
++ 증가
-- 감소
+= 변수값에 오른쪽 값을 더하다
-= 변수값에 오른쪽 값을 빼다
*= 변수값에 오른쪽 값을 곱하다
/= 변수값에 오른쪽 값을 나누다
%= 변수값에 오른쪽값을 나눈 나머지
== 값의 비교
=== 값과 타입의 비교
!= 값이 같지않다
!== 값과 타입이 같지않다
<= 작거나 같다
>= 크거나 같다
조건식 ? 참일때 실행 : 거짓일때 실행
&&(and) 모두 true 여야 true를 반환
||(or) 하나만 true 여도 true를 반환
** 거듭제곱
?? 좌측값이 null이거나 undefined일때 우측값 반환
추가
! 정반대값으로 변환(!true 는 false로 !false는 true로)
!! 불리언값으로 변환할 수 있다
