본문 바로가기
dev/JavaScript

연산자

by masankong 2023. 2. 9.

 산술 연산자

연산자는 우선순위를 가지는데 산술연산자는 사칙연산을 따라갑니다.

*(곱하기), / (나누기)+(더하기), -(빼기) 보다 먼저 연산합니다.

const x = 2;
const y = 3;

console.log (x + y); // 5 출력
console.log (x - y); // -1 출력
console.log (x / y); // 0.6666... 출력
console.log (x * y); // 6 출력
console.log (x ** y); // 8 출력

 

아래에서 % (나머지) 언제 쓰이냐면 홀수와 짝수를 구별할때 또는 5값을 넘지 않게 하기 위할때 등등 쓰입니다. 

또한 ** 은 거듭제곱을 뜻합니다. 

// %
const x = 10;
const y = 9;

console.log (x % 2); // 0 을 출력하므로 짝수
console.log (y % 2); // 1을 출력하므로 홀수
console.log (x % y); // x % y 의 출력값이 1이 맞으므로 true 출력

const g = 349;
console.log (g % 5); // 4를 출력 아무리 수가 커도 4를 넘지 않음

// **
const num = 2 ** 3;
console.log(num) // 2에서 3을 제곱한 8이 출력

 

 

할당 연산자

몇몇 연산자는 줄여서 쓸 수 있음. 아레 예저철  더하기 뿐만아니라 빼기, 곱하기, 나누기, 거듭제곱, 나머지 다 가능

=, +=, -=, *=, **=, %=

* 연산자 우선순위 법칙에 따라 ' += ' 를 예시로 보면 = 보다 우선순위가 높은 + 를 먼저 연산하고 = 를 연산함

let num = 10;
let nun = num + 5; // 10에서 5를 더한 15 출력

//위 연산을 줄여서 쓰면

num += 5 // 10에서 5를 더한 15 출력


console.log(num);

 

논리 연산자

자바스크립트에는 5개의 논리 연산자가 있지만 거의 사용하지 않는 &, | 는 제외하고 && ,|| ,! 이렇게만 살펴볼거임

  

|| (OR)       :  '이거나',  '또는' 을 뜻하며 둘 중 하나만 true 여도 true 가 뜸 즉, 모든 값이 false 여야 false 가 뜸

                  ex> 스티브 잡스는 한국인 이거나(or) 남자이다. : 둘 중 하나(남자)가 true 이므로 true 가 뜸

&& (AND) :  '이고', '그리고' 를 뜻하며 둘 다 true 여야 true 가 뜸

               ex> 스티브 잡스는 한국인 이고(and) 남자이다. : 둘 중 하나(한국인)가 false 이므로 flase 가 뜸

! (NOT)     : '부정' , '반대' 를 뜻하며 !true 를 입력하면 false 가 부정을 두번 입력하면(!!true) 다시 true 가 뜸 

 

|| (or) 은 첫번째 true를 발견하면 즉시 평가를 멈춤

&& (and) 는 첫번째 false를 발견하면 즉시 평가를 멈춤

 

둘다 끝까지 코드를 보지 않고 true, false 를 보면 해당 결과값을 출력하므로 제일 결과 값이 적을거 같은것을 앞단에 먼저 넣는게 좋음

ex) 운전면허 (전체 군인의 80%) 가 있고 시력 (전체군인의 60%)이 좋은 여군 (전체 군인의 7%)

이를 코드를 작성 할땐 여군인데 시력이 좋고 운전면하가 있는 사람 이렇게 적는게 좋음

const name = 'Mike';
const age =  32

// or (이름이 Tom 이거나 성인 이면 true)
if (name == 'Tom' || age > 19){
  console.log(true);
}

// and (이름이 Mike 이고 성인 이면 true)
if (name == 'Mike' && age > 19){
  console.log(true)
}

//NOT (나이를 입력받아서 성인이 아니면 false)
const age2 = prompt('나이를 입력하세요')
const isAdult = age2 > 19;

if(!isAdult){
  console.log(false)
}

 

논리 연산자의 우선순위

&&(and) 가 ||(or)  보다 우선순위가 높아 먼저 연산됩니다.

//우선순위 (남자이고, 이름이 Mike 이거나 성인이면 true)
const gender = "f"
const name = "jane"
const age = 32

if (gender === "m" && name == "Mike" || age > 19){
  console.log(true)
}else {
  console.log(false)
}
// 여기서 true 가 출력되는데 이유는 
//  gender === "m" && name == "Mike" 이 값이 먼저 계산되어 false 가 뜨고
// 이후에 false || age > 19 이렇게 계산되어  마지막 결과 값이 true 가 되는것이다.

우리가 원하는 성별이 남자이고 이름이 Mike 이거나 성인이면 true 값을 출력하려면 먼저 연산됐으면 하는것에 () 를 넣는다.

아래 코드를 보면 이름과 나이를 먼저 살펴 본 후 성인은 맞으므로 true가 뜨고 이후에 성별과 true를 연산했을때 남성이 아니므로 

마지막 출력값이 false 가 뜬다.

const gender = "f"
const name = "jane"
const age = 32

if (gender === "m" && (name == "Mike" || age > 19)){
  console.log(true)
}else {
  console.log(false)
}

논리연산자를 활영하는 예제를 하나 더 살펴보자면,

논리 곱 연산과 논리 합 연산시 뒤 항이 실행되지 않는 것을 단락 회로 평가(Short Circuit Evaluation:SCE)라고 한다.

int i= 1;
int num =10;
boolean value = ((num=num+i) < 10) && ((i= i+2) <10);
//앞 항이 거짓이므로 뒷 항은 실행되지 않음
System.out.println(value); //false
System.out.println(num); // 11
System.out.println(i); //실행되지 않았으므로 그대로 1

value = ((num = num + 10) >10) || ((i=i+2) < 10);
//앞 항이 참이므로 뒷 항은 실행되지 않음
System.out.println(value); //true
System.out.println(num); // 21
System.out.println(i); //실행되지 않았으므로 그대로 1

 

비교 연산자

우리가 주로 사용하는 부등호와 크게 다르지 않음

a < b (b보다 a가 큰가), a > b(b는 a보다 작은가), a <= b (b는 a보다 크거나 같은가),  a >= b(b는 a보다 작거나 같은가), a == b (a와 b는 같은가?),   a != b (a와 b는 같지 않은가?)

 

자바스크립트 에선 '=' 은 할당을 의미하므로 ( a = 10,  a 변수에 10을 할당) 같은지를 확인하는건 같은지를 물어볼땐 '==' , '!='이 기호를 씀

 

비교 연산자의 반환값은 boolean형임 true 와 false만 반환

console.log(10 > 5); // true
console.log(10 == 5); // false
console.log(10 != 5); // true

동등 연산자는 === 세개를 쓰게 되면 타입까지 비교하게 됨 이를 일치 연산자 라고 함 

마친가지로 != 같지않다를 타입까지 비교하려면 !== 이렇게 쓰면됨

a = 1
b = '1'

console.log(a == b); // a는 숫자형이고  b는 문자형인데 true 출력
console.log(a === b); // 타입까지 비교하여 false 출력
console.log(a !== b); // 타입까지 비교했으므로 true 출력

 

당항 산술 연산자

++x, x++, --x, x-- 형태로 x 값에서 하나씩 더하거나 하나씩 빼는것

let x = 2
++x
++x
console.log(x); // 1씩 더해서 4를 출력

x++
console.log(x);
// ++x 는 더한 x값을 먼저 출력하고 x++ 는 x를 먼저 출력한뒤 더함

 

nullish 병합 연산자 

단락 앞에 값이 있으면 앞에 값을 출력하고 앞에 값이 없으면 뒤에 값을 출력함
* 쉽게 이해하면 논리연산자의 || 과 같음

let result1;
let result2 = result1 ?? 100;
console.log(result2);
// 앞의 값이 비어있으므로 100을 출력


let result3 = 10;
let result4 = result3 ?? 100;
console.log(result4);
// 앞의 값이 있으므로 result3인 10을 출력

let result5 = undefined;
let result6 = result5 ?? 100;
console.log(result6);
// result5 의 값이 null 로 비어있으므로 100을 출력
// result5 의 값에 undefined를 넣어도 똑같이 비어있으므로 100을 출력

 

 typeof 연산자

const a = '10' + '10';
console.log(a); // 1010 을 출력

const b = 10 + 10;
console.log(b); // 20을 출력

 

프로퍼티 접근 연산

어떤 값이 가진 여러가지 값들(인수들?) 에 접근할 때 사용. 마침표 프로퍼티 연산자와 대괄호 프로퍼티 연산자가 있음

let x = {'one': 1, 'two': 2};

x.one // 마침표 프로퍼티 접근 연산자 '1' 출력
x['two'] // 대괄호 프로퍼티 접근 연산자 '2'출력

 

관계 연산자

관계 연산자는 두 값 간의 관계를 검사해서 해당 관계가 존재하는지 여부에 따라 true와 false를 반환한다.

in 으로 '키(key)'만 가지고 판단한다. 

* 여기서  key란  'name' 이 key 이고 'Lee' 가 값이다. (아직 객체를 안배워서..솔직히 관계 연산자는 이해하기 힘듬)

 

아래 예시에서 'length' 가 출력되는 이유는 dir 로 출력시 모든 프로퍼티를 알려주고 그 안에 'length' 가 있기 때문에 보여주는 거임


10 in [10, 20, 30] // false
1 in [10, 20, 30] // true
1 in 'hello' // error
'name' in {'name':'hojun', 'age':10} //true
'length' in [10, 20, 30]; // true

이제야 이해가는 밈

'dev > JavaScript' 카테고리의 다른 글

반복문 loop 과 배열  (0) 2023.02.09
조건문 if,else, else if, switch  (0) 2023.02.09
Javascript 란?  (0) 2023.02.08
대화상자  (0) 2023.02.08
자료형 과 형변환  (0) 2023.02.08

댓글