[JavaScript] 연산자(operator)

연산자

연산자는 한 마디로 변수를 활용하여 각종 연산을 수행하는 데에 사용되는 특수 기호를 말한다.
프로그램에서 컴퓨터가 수행해야 할 기본적인 작업 명령을 설정하는데에 식이 사용되는데, 연산자는 식을 구성하는 기본 단위가 되는 것이다.

1. 연산자의 활용

console.log() 명령을 통해 변수 간의 연산 결과를 출력하며, 연산 결과를 새로운 변수에 할당한다.

2. 연산자의 종류와 우선 순위

출처:https://velog.io/@letthere/%EC%97%B0%EC%82%B0%EC%9E%90Operator

 

이항 연산자	두 개의 항을 대상으로 연산을 수행하는 연산자
단항 연산자	한 개의 항을 대상으로 연산을 수행하는 연산자

---

산술 연산자

일반적인 덧셈, 뺄셈, 곱셈, 나눗셈에 사용되는 기호이다.

연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나눗셈에서 정수 부분을 제외한 나머지

 

/** 사칙 연산 **/
const a = 5;
const b = 3;

console.log(a + b); // 8
console.log(a - b); // 2
console.log(a * b); // 15

/**연산 결과를 다른 변수에 할당 **/

const x = 5;
const y = 3;
const z = x + y - 2;

console.log(z); // 6

1. 나눗셈 주의사항

• 일반적인 나눗셈
  • 몫이 소숫점까지 갖는 경우, 연산할 수 있는 최대한의 자릿수까지 계산한다.
• 나누어 떨어지지 않는 나눗셈
  • 처리 가능한 범위 안에서 최대한의 소숫점 자릿수까지 계산한다.

/** 일반적인 나눗셈 **/
const myValue1 = 10;
const myValue2 = 4;

console.log(myValue1 / myValue2); // 2.5


/** 나누어 떨어지지 않는 나눗셈 **/
const myValue3 = 4;
const myValue4 = 3;

console.log(myValue3 / myValue4); // 1.3333333333333333

2. 문자열의 연산

• 문자열끼리의 덧셈
  • 문자열을 하나로 합친다.

let a = "a"
let b = "b"
console.log(a+b) 

/** 결과 **/ 
ab

• 문자열과 다른 타입의 덧셈
  • 문자열 이외의 값을 문자열로 변환하여 더한다.

let a = "a"
let b = 123
console.log(a+b) 

/** 결과 **/ 
a123

---

대입 연산자

좌변에 우변을 대입한다는 의미의 = 연산자이다.

활용 방법

1. 연산 결과를 새로운 변수에 대입

let myNumber1 = 123;
let myNumber2 = 234;
let myResult = myNumber1 + myNumber2; // 123 + 234
console.log(myResult); // 357

2. 이미 생성된 변수의 값을 다른 값으로 변경

let myNumber3 = 1;
let myNumber4 = 2;

myNumber3 = 200;
myNumber4 = 300;

console.log(myNumber3); //200
console.log(myNumber4); //300

3. 연산 결과를 변수 스스로에게 덮어 씌우기

어떤 변수 x에 대한 연산 결과를 다시 x에 덮어 씌우기가 가능하다.

let selfValue = 300;
selfValue = selfValue + 100; //300+100

console.log(selfValue); // 400

---

산술 대입 연산자

어떤 변수 x에 대한 연산 결과를 다시 x에 덮어 씌우는 연산을 축약한 표현이다.

연산자	의미
=	우측 표현식의 피연산자를 좌측 변수에 할당
+=	우측의 피연산자를 좌측 변수에 더해 결과를 좌측 변수에 할당
-=	좌측 변수에서 우측 피연산자를 빼고 결과를 좌측 변수에 할당
*=	좌측 변수와 우측 피연산자를 곱하여 결과를 좌측 변수에 할당
/=	좌측 변수를 우측 피연산자로 나누고 결과를 좌측 변수에 할당
%=	좌측 변수에 우측 피연산자로 나머지 연산을 한 후, 결과를 좌측 변수에 할당

let x = 100;

x += 10;
// x=x+10;
console.log(x); //110

x -= 30;
// x=x-30;
console.log(x); //80

x *= 2;
// x=x*2;
console.log(x); //160

x /= 5;
// x=x/5;
console.log(x); //32

x %= 10;
// x=x%10;
console.log(x); //2

---

증감 연산자

스스로 1증가 혹은 감소

산술 대입 연산자를 덧셈과 뺄셈에 한하여 축약한 형태이다. 스스로 1 증가 혹은 1 감소로 해석한다.

1. 스스로 1 증가 (++)

let selfPlus = 1;
console.log(selfPlus);// 1

selfPlus++; //1+1
console.log(selfPlus); //2

++selfPlus; // 2+1
console.log(selfPlus); //3

2. 스스로 1 감소 (--)

let selfMinus = 1;
console.log(selfMinus); //1

selfMinus--; //1-1
console.log(selfMinus); // 0

--selfMinus; //0-1
console.log(selfMinus); //-1

증감 연산자의 위치

++, -- 연산자가 독립적으로 사용되는 경우는 위치에 상관없이 결과가 동일하지만, 다른 수식에 포함된 상태로 사용되는 경우, 위치에 따라 결과 값이 달라진다.

1. 전위 증감 연산자

연산자가 앞에 위치한 경우이다.
증감 연산자가 앞에 위치한 경우, 변수 스스로의 값에 대해 증가, 감소를 먼저 수행한 후, 전체 수식을 연산한다.

let prevValue = 1;

// prevValue를 먼저 1 증가 시키고 전체 수식 처리
let prevResult = 100 + ++prevValue; // 100+(1+1)

console.log(prevResult); //102
console.log(prevValue); //2

2. 후위 증감 연산자

연산자가 뒤에 위치한 경우이다.
변수에 대한 증감 연산자각 작용하기 전에 전체 수식을 먼저 처리한 후, 나중에서야 증감 연산자가 수행된다.

let nextValue = 1;

// 100+nextValue를 먼저 처리 후, nextValue가 1 증가
let nextResult = 100 + nextValue++;// (nextResult = 100+1) 계산 후, nextValue+1 계산

console.log(nextResult); //101
console.log(nextValue); //2

---

비교 연산자

두 값 간의 크기를 비교하는 식에 대한 참, 거짓 만을 판별한다. 비교 연산의 결과는 논리 값 (true or false)로 결정된다.

종류

연산자	의미	비고
==	같다	값의 내용만 비교하기 때문에 문자열("1")과 숫자형(1)을 같다고 판단한다.
!=	다르다 ! => not의 의미를 가진다.
===	같다	정밀한 비교가 가능하다 값의 데이터 타입까지도 일치해야만 같다고 판단하기 때문에 문자열("1")과 숫자형(1)을 다르다고 판단한다.
!==	다르다 ! => not의 의미를 가진다.
>	초과
>=	이상
<	미만
<=	이하

※ JS에서 1 === 1.0 은 정수와 실수를 구분하지 않고 모두 number 타입으로 처리하므로, true로 판단한다.

/** 이상, 초과, 이하, 미만 **/

let x = 100;
let y = 50;

let compare1 = x >= y; // 이상
let compare2 = x > y;  // 초과
let compare3 = x <= y; // 이하
let compare4 = x > y;  // 미만

console.log(compare1); //true
console.log(compare2); //true  
console.log(compare3); //false
console.log(compare4); //false

/** 같다(==, ===), 다르다(!=, !==) **/

let a1 = "1";
let a2 = 1;
let a3 = 1.0;
let a4 = true;

console.group("내용만 비교하는 경우")
console.log(a1 == a2); //true
console.log(a1 == a3); //true
console.log(a1 == a4); //true
console.log(a2 == a3); //true
console.log(a2 == a4); //true
console.log(a3 == a4); //true
console.groupEnd();

console.group("데이터 타입까지 비교하는 경우")
console.log(a1 === a2); // false
console.log(a1 === a3); // false 
console.log(a1 === a4); // false
console.log(a2 === a3); // true
console.log(a2 === a4); // false
console.log(a3 === a4); // false
console.groupEnd();


// 다르다 
let b1 = "1";
let b2 = 1;
let b3 = 1.0;
let b4 = true;

console.group("내용만 비교하는 경우")
console.log(b1 != b2); // false
console.log(b1 != b3); // false
console.log(b1 != b4); // false
console.log(b2 != b3); // false
console.log(b2 != b4); // false
console.log(b3 != b4); // false
console.groupEnd();

console.group("데이터 타입까지 비교하는 경우")
console.log(b1 !== b2); // true
console.log(b1 !== b3); // true
console.log(b1 !== b4); // true
console.log(b2 !== b3); // false
console.log(b2 !== b4); // true
console.log(b3 !== b4); // true
console.groupEnd();

---

논리 연산자

두 개의 논리 값(true 혹은 false) 간의 연산을 수행하는 연산자이다.
조건 제어와 반복 제어 명령에서 많이 사용하며, && 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자로 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.
! 연산자는 피연산자가 하나 뿐인 단항 연산자로 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.

종류

연산자	설명	특이사항
&& (AND)	두 개의 연산에 사용되는 모든 값이 true인 경우에만 결과가 true 그 외의 경우는 모든 결과가 false
|| (OR)	두 개의 연산에 사용되는 값 중 하나라도 true라면, 결과가 true 모든 값이 false인 경우만 결과가 false
! (NOT)	느낌표(!)를 사용하여 논리형 값 true, false를 부정하여 반대의 결과를 만들어내는 연산자	1. AND가 OR보다 항상 우선 2. 숫자 값에 적용할 경우, 0은 false로 식별되고 0이 아닌 모든 수는 true로 식별 3. 문자열에 적용할 경우, 빈 문자열("")은 false로 식별되고, 한 글자라도 포함된 문자열은 true로 식별

1. && (AND)

false가 하나라도 있으면 false

console.log(true && true);      //true
console.log(true && false);     //false
console.log(false && true);     //false
console.log(false && false);    //false


// 연산 여러 개 사용 
console.log(true && true && true);     //true
console.log(true &&true && false);     //false
console.log(false && false && true);   //false
console.log(false && true &&true);     //false

2. || (OR)

true가 하나라도 있으면 true

console.log(true || true);      //true
console.log(true || false);      //true
console.log(false || true);      //true
console.log(false || false);      //true


//연산 여러 개 사용
console.log(true || true || true);      //true
console.log(true || true || false);      //true
console.log(false || false || true);      //true
console.log(false || true || true);      //true

3. &&와 || 복합 사용

and가 or보다 항상 우선한다.

console.log(true && true || true);      //true
console.log(true && true || false);      //true
console.log(false && false || true);      //true
console.log(false && true || true);      //true

console.log(true || true && true);      //true
console.log(true || true && false);      //true
console.log(false || false && true);      //true
console.log(false || true && true);      //true

4. ! (NOT)

let success = true;
let fail = !success;
console.log(fail);  // not true : false

// 숫자 1은 놀리값으로 변환시 true이므로 1k는 not true-> false
let k =1;
console.log(!k);

// 숫자 0은 논리값으로 변환시 false이므로 !l은 not false -> true
let l = 0;
console.log(!l);

//비어있지 않은 문자열은 true로 환산되므로 !str1은 not true -> false
let str1 = "Hello World";
console.log(!str1);

//비어있는 문자열은 false로 환산되므로 !str2는 not false -> true
let str2 = "";
console.log(!str2);

---

삼항 연산자

let 변수 = 조건식 ? 값1 : 값2;

조건식을 판별하여 식이 참인 경우, 값1이 변수에 대입되고, 조건식이 거짓인 경우, 값2가 변수에 대입되는 연산자이다.

const age1 =19;
const type1 = age1 >= 20 ? "성인" : "청소년"; // false
console.log("당신은 %s입니다.", type1); // 당신은 청소년입니다.

const age2 = 22;
const type2 = age2 >= 20 ? "성인" : "청소년"; // true
console.log("당신은 %s입니다.", type2); // 당신은 성인입니다.