[JavaScript] 2. 연산자(Operator)

7057 단어 JavaScriptJavaScript

연산자(Operator)

연산자는 하나 이상의 표현식을 대상으로 산술,할당,비교,논리,타입 등을 수행해 값을 창출합니다.

산술연산자

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 값을 만듭니다.

개념을 정의하자니 갑자기 눈에 들어오지 않네요

간단히 말해 우리가 일상에서 수없이 했던 사칙연산이 산술 연산자 입니다!

console.log(1+3);	// 4
console.log(7-2);	// 5
console.log(4*4);	// 16
console.log(6/3);	// 2
console.log(7%3);	// 1

위 코드를 보면 '+','-','*','/' 각 연산자는 사칙연산중 더하기,빼기,곱하기,나누기에 해당합니다. 살면서 자주 접했을 기호라 다들 익숙할듯 합니다.

하지만 5번째줄의 코드를 보면 '%' 기호는 조금 생소할 수 있습니다

'모듈러스 연산자' 라고 하는 '%' 기호는 '나머지 연산자'라고도 부릅니다.
쉽게 말해 좌항을 우항으로 나누었을때 나오는 나머지 값을 반환합니다.
7/3 = 2를 반환한다면 7%3 = 1을 반환하게 되는 것입니다.

산술연산자는 단항, 즉 항이 하나인 경우에서도 사용할 수 있습니다.

++	증가
--	감소

이렇게 보면 설명이 너무 빈약해보이는데요. 하나씩 살펴보겠습니다!

일단 단항연산자가 항의 앞에 등장하냐 와 뒤에 등장하냐에 따라 그 의미가 조금 달라집니다.

항의 앞에 붙는 경우는 연산을 수행하기 전에 값의 증감이 1씩 이루어집니다.

var a = 5;
var plusNum = ++a;
console.log(a);	// 6
console.log(plusNum);	// 6

변수 a의 값은 5이고, 변수 plusNum의 값은 선증가된 a의 값입니다.
a의 값이 선증가되어 6이되고, 선증가가 완료된 a를 plusNum에 담았습니다.
따라서 콘솔창에 출력되는 값은 둘다 6이 찍힙니다.

반대로 항의 뒤에 붙는 경우는 연산을 수행한 후에 값의 증감이 1씩 이루어집니다.

var a = 5;
var plusNum = a++;
console.log(a);	// 6
console.log(plusNum);	// 5

마찬가지로 변수 a의 값은 5이고, 변수 plusNum의 값은 후증가된 a의 값입니다.
plusNum의 값은 증감이 실행되기전 a의 값이 담깁니다.
값의 대입, 즉 대입연산이 먼저 실행이된 후 a의 값이 1이 증가됩니다.
따라서 콘솔창에는 a가 6이 찍히고 plusNum에는 5가 찍힙니다.

--도 동일하게 1씩 감소됩니다.

문자열 연결연산자

'+'기호는 숫자가 아닌 문자열에서는 문자열을 연결해주는 접합의 역할을 해줍니다.

var numberV = 1+1;
var stringV = '1'+'1';
console.log(numberV);	// 2
console.log(stringV);	// 11

위 코드를 보면 변수 numberV에는 숫자 1 과 1을 더한값을 대입하였습니다.
그러나 변수 stringV에는 문자'1'과 '1'을 더한값을 대입하였습니다.
콘솔창에는 numberV는 산술연산자 + 를 통해 2가 출력되었고
stringV는 문자열 연결연산자에 의해 문자 '1'과'1'이 접합되어 문자'11'이 출력되었습니다.

대입연산자

대입연산자 혹은 할당연산자라고 불리는 연산자입니다.
우리는 이미 변수에 값을 담을때 대입연산자를 사용하였습니다.

var myN;
myN = 5;

myN이라는 아무것도 담고있지 않은 변수를 선언하였고, 변수 myN에 5라는 값을 대입해준 것입니다.

이외의 다른 표현을 살펴볼까요?

var myN = 3;
myN += 2;	// myN = myN + 2; myNum = 5
myN -= 2;	// myN = myN - 2; myNum = 1	
myN *= 2;	// myN = myN * 2; myNum = 6
myN /= 2;	// myN = myN / 2; myNum = 1.5
myN %= 2;	// myN = myN % 2; myNum = 1

대입연산자 앞에 산술연산자를 붙혀 사용하였습니다. 이것의 의미를 풀어보자면
좌항의 값에 좌항과 우항을 해당 산술연산자로 연산된 값으로 다시 대입해준다는 의미입니다.
즉 myN += 2;는 myN의 값에 myNum의 기존 값 3과 2를 더한값으로 재평가 하겠다 라는 뜻입니다. 따라서 myN의 값은 5가 되는 것입니다.

비교연산자

비교연산자는 좌항과 우항을 비교합니다.
그리고 비교가 올바른지 올바르지 않은지를 구분해줍니다.
참(true) 혹은 거짓(false) 중 하나를 반환해줍니다.
이런 true와 false의 데이터타입을 boolean(블린) 데이터타입이라고 합니다.

console.log(1==1);	// true
concole.log(1==2);	// false

위 코드를 보면 쉽게 이해할 수 있을것 같습니다.
첫번째 줄을 보면 숫자 1과 숫자 1은 같은거니? 라고 비교하였고
같은 값이 맞기 때문에 콘솔창에 true(참)이라는 결과값을 출력합니다.
두번째 줄을 보면 숫자 1과 숫자 2는 같은값이 아니기 때문에 false(거짓)을 출력합니다.

동등연산자

동등연산자, 일치비교 연산자라고 합니다.
상기 코드처럼 '=='라는 비교연산자는 값이 동등한지를 비교하는 동등연산자 입니다.
또다른 동등연산자와 일치비교 연산자를 살펴볼까요?

console.log(1=='1')	// true
console.log(1==='1')	// false
console.log(1!=2)	// true
console.log(1!==2)	// false

1=='1'은 동등연산자입니다. 동등연산자는 암묵적타입변환이 일어나 데이터타입을 일치시킨후 값을 비교합니다. 따라서 1=='1'은 true가 출력됩니다.
그러나 1==='1'은 일치비교 연산자입니다. 일치비교 연산자는 좌항과 우항의 데이터 타입까지 비교하기 때문에 숫자 1 과 문자 '1'은 일치 하지 않기때문에 false가 출력됩니다.

!=은 부등연산자 라고 하여 동등연산자와 상반되는 연산자입니다.( !== 은 ===와 상반됩니다)
즉 좌항과 우항이 동등하거나 일치하지 않아야 true를 반환하는 청개구리 같은 연산자입니다.
따라서 1!=2는 값이 다르기때문에 true를 출력하였고,
1!==2는 값은 다르지만 데이터타입이 같은 숫자(number)이기 때문에 true가 아닌 false를 출력합니다.

대소비교연산자

대소비교연산자는 말그대로 좌항과 우항의 값의 크기를 비교해줍니다

console.log(2>1)	// true
console.log(1>=1)	// true

숫자 2는 1보다 큰 값이기 때문에 2>1은 true를 출력합니다.
<,>가 크기의 초과와 미만을 비교한다면 <=,>=은 이상과 이하까지 비교합니다.
따라서 숫자 1은 1의 이상에 포함된 값이기 때문에 1>=1또한 true를 출력합니다.

삼항비교연산자

삼항비교연산자는 조건의 평가결과에 따라 반환될 값이 결정됩니다.
문법의 형태는
조건식 ? true일때 반환해줄 값 : false일때 반환해줄 값
으로 표현됩니다.

예시를 한번 들어보겠습니다.
만약 수학점수 70점 이상은 합격, 70점 미만은 불합격이라는 결과를 반환해야 한다면

var mathScore = ??;
var mathResult = mathScore>70 ? 'Pass!' : 'fail...';
console.log(mathResult);	// pass! or fail...

변수 mathResult에는 변수 mathScore의 값에 따라 대입된는 값이 달라집니다.
만약 mathScore의 값이 80이라면 조건식 mathScore>70이 true를 반환하기 때문에
콘솔창에는 pass!가 출력됩니다.
그러나 mathScore의 값이 65라면 조건식은 false를 반환하기 때문에
콘솔창에는 fail...이 출력됩니다.

⚠후에 조건문이 나오는데 삼항비교연산자는 간단한 조건문을 대체할 수 있습니다.
그러나 삼항비교연산자는 조건에 따른 변수의 대입용도로 사용해야지
프로그램의 로직으로 설계해서는 안됩니다!!⚠

논리연산자

논리연산자는 사람의 말로 그리고(and) 와 또는(or)을 표현해 줄 수 있습니다.
그리고를 담당하는 and연산자, 또는을 담당하는 or연산자가 있습니다.

and연산자 : &&기호를 사용하여 좌항과 우항이 모두 참이여야만 true를 반환합니다.

console.log(100>99 && 10>9);	// true
console.log(100>99 && 10>99);	// false

첫번째 코드에서는 좌항과 우항이 모두 참이기 때문에 true를 출력합니다.
그러나 두번째 코드에서는 좌항은 참이지만 우항은 거짓입니다.
따라서 모두 참이 아니기때문에 false를 출력하게 됩니다.

or연산자 : ||기호를 사용하여 좌항과 우항중 한가지만 참이여도 true를 반환합니다.

console.log(100<99 || 10>9);	// true
console.log(100<99 || 10<9);	// false

첫번째 코드에서 좌항은 거짓이지만 우항은 참이기 때문에 true를 반환합니다.
두번째 코드는 좌항과 우항 모두 거짓이기 때문에 false를 반환합니다.

and연산자는 논리곱 연산자, or연산자는 논리합 연산자 라고도 명명합니다!

그리고 마지막으로 논리부정연산자가 있습니다.

논리부정연산자는 말그대로 논리에 반대되는 결과값을 반환하여 줍니다.

console.log(!(3>2));	// false
console.log(!(3>10));	// true

true인 값 앞에 논리부정연산자를 붙히면 반대되는 false가,
false인 값 앞에 논리부정연산자를 붙히면 반대되는 true가 출력됩니다.

첫번째 코드에서 3>2는 참이지만, 논리부정에 의해 false가 출력되었고
두번째 코드에서 3>10은 거짓이지만, 논리부정에 의해 true가 출력됩니다.

이외에도 쉼표연산자, typeof연산자, 지수연산자 등이 있습니다!

이 연산자들은 시간이날때 보충하여 다루도록 하겠습니다~!

좋은 웹페이지 즐겨찾기