JS - 연산자 7종류 핵심 정리

IRISH·2023년 10월 19일

JS

목록 보기

3/80

산술 연산자

산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지 값(%)으로 구분

let q = 10;
let w = 2;

document.write(q+w+"<br>"); //10+2=12
document.write(q-w+"<br>"); //10-2=8
document.write(q*w+"<br>"); //10*2=20
document.write(q/w+"<br>"); //10/2=5
document.write(q%w) //10을 2로 나누면 남는 값이 없습니다. =0

문자 결합 연산자

문자 결합 연산자 : 문자 + 문자, 문자 + 숫자를 해서 하나의 문자열로 만드는 연산자
특정 글자를 이어서 문장을 만들 때 요긴하게 사용됨
주의
- "20"+22가 42가 아니라 2022가 됨
- 문자 결합이기 때문에 문자형 숫자(큰따옴표 안의 숫자)와 숫자형 데이터를 결합했을 때 전부 문자열로 결합

let userName = "큐캣";
let msg = "환영합니다.";

document.write(userName+"님 "+msg+"20"+22);

//결과값으로 큐캣님 환영합니다.2022 가 출력됩니다.

대입 연산자

대입 연산자 : 데이터를 변수에 저장하는 용도로 사용되는 연산자
값을 대입해서 저장하는 것은 숫자 뿐만 아니라 문자나 html태그, 변수 등도 대입이 가능
복합 대입 연산자는 어떠한 값에 추가적인 값을 더하거나 빼고 곱하고 나누고 나머지를 구할 수 있음
- 이 방식은 코드를 작성할 때 상당히 축약
  - a+b를 하고 그 값을 다시 a에 대입하는 대신, 간단하게 a+=b로 쓰면 되는 것

let a = 10;
let b = 2;

a=b; //a의 10이 2로 대입되었습니다. a=2

document.write("a의 값은 "+a+"입니다.<br>");

a+=b; //a의 값이 a와 b를 더한 값(2+2)으로 대입되었습니다. a=4

document.write("a의 값은 "+a+"입니다.<br>");

a-=b; //a의 값이 a와 b를 뺀 값(4-2)으로 대입되었습니다. a=2

document.write("a의 값은 "+a+"입니다.<br>");

a*=b; //a의 값이 a와 b를 곱한 값(2*2)으로 대입되었습니다. a=4

document.write("a의 값은 "+a+"입니다.<br>");

a/=b; //a의 값이 a와 b를 나눈 값(4/2)으로 대입되었습니다. a=2

document.write("a의 값은 "+a+"입니다.<br>");

a%=b; //a의 값이 a와 b를 나눈 나머지 값(2%2)으로 대입되었습니다. a=0

document.write("a의 값은 "+a+"입니다.<br>");

증감 연산자

증감 연산자 : 증가, 감소를 하는 연산자
주의할 점
- ++나 --의 위치를 앞쪽에 쓰느냐, 뒷쪽에 쓰느냐에 따라 결과값이 달라집니다.
- 계산 후 대입(앞쪽에 기입)할 것인지, 대입하고 계산할 것인지(뒷쪽에 기입) 상황에 따라 증감 연산자를 사용

let a =1;

a++;

document.write(a); //1에서 1이 증가해서 2가 됩니다.

a--;

document.write(a); //2에서 1이 감소해서 1가 됩니다.

let a =2;
let b =4;

let c = ++a; //a를 증가시킨 값을 변수 c에 대입합니다. c=3
let d = b--; //b의 값을 변수 d에 대입한 후, b를 감소시킵니다. d=4

document.write(c+"<br>");
document.write(d);

비교 연산자

비교 연산자 : 데이터를 비교할 때 쓰이는 연산자
a와 b를 비교해서 어느것이 크다, 작다, 크거나 같다, 작거나 같다, 데이터가 일치한다, 데이터가 일치하지 않는다에 대해 true와 false로 판단

let result = 2>4; //false
document.write(result+"<br>");

let result = 2<4; //true
document.write(result+"<br>");

let result = 9>=10; //false
document.write(result+"<br>");

let result = 9<=10; //true
document.write(result+"<br>");

let result = 9==10; //false
document.write(result+"<br>");

let result = 10=="10"; //true. 데이터 자료형은 상관없습니다.
document.write(result+"<br>");

let result = 10!=10; //false
document.write(result+"<br>");

let result = 10==="10"; //false. 데이터 자료형까지 같아야 합니다.
document.write(result+"<br>");

let result = 10!=="10"; //true. 데이터 자료형이 다릅니다.
document.write(result+"<br>");

논리 연산자

논리 연산자 : 연산된 결과값을 true, false로 반환
- ||(or) : 논리가 하나라도 true면 true로 결과값을 반환
- &&(and) : 논리가 하나라도 false면 false로 결과값을 반환
- !(not) : 논리가 true면 false로, false면 true로 결과값을 반대로 반환

삼항 조건 연산자

삼항 조건 연산자 : 3개의 연산할 항을 가진 연산자
사용법 >>> 조건식 ? 코드1 : 코드2

let result = 1<2? "참입니다.":"거짓입니다.";
document.write(result);

//결과값은 참입니다. 가 출력됩니다.

    let name = prompt("이름은?","");
    let weight = prompt("체중은?","");
    let height = prompt("키는?","");
    let recoWeight = (height - 100) * 0.9;

    let result = weight <= recoWeight && weight >= recoWeight;
    result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";

    document.write(name+" 님은 "+result);