내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌4 - JavaScript - 3년 전 등록 / 일 년 전 수정

연산자(operator)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

이번 시간에는 연산자에 대해서 알아보겠습니다. 전부를 다루지는 않고 자주 쓰이는 것만 다루겠습니다. 

연산자

연산자란 프로그래밍에서 쓰이는 기호들입니다. 연산자에는 산술, 문자열, 증감, 비교, 대입, 삼항, 논리, 비트연사자 등이 있습니다. 비트 연산자는 정말 고급스런 경우에만 쓰이기 때문에 다루지 않겠습니다. 그리고 비트연산자를 쓰지 않는 게 권장사항이기도 합니다.

산술연산자

덧셈, 뺄셈, 곱셈, 나눗셈이 있겠죠? 순서대로 +, -, *, / 입니다. 그리고 나누고 난 나머지를 계산해주는 %가 있습니다. 다른 언어처럼 /는 몫이고 %는 나머지인 개념이 아닙니다. /는 그냥 나누기(5 / 2 == 2.5)고요. %는 나머지(5 % 2 == 1)입니다. Mod(Modulus)라고도 하죠

var a = 1 + 2; // 3
var b = 5 - 3; // 2
var c = 2 * 4; // 8
var d = 6 / 4; // 1.5
var e = 8 % 3; // 2

참고로 -와 * 그리고 /는 문자열로 표현된 숫자도 계산("3" * "2" == 6)해줍니다. +는 안 되는데 이유가 아래 나와있습니다.

문자열연산자

하나 특이한 점은 + 연산자는 숫자만 더하는 게 아니라 문자열과 다른 데이터도 연결해줍니다.

var string = 'hello ' + 'world'; // 'hello world'
var string2 = 'hi' + 9; // 'hi9'
var string3 = 1 + 'what' + 2; // '1what2'
var string4 = 3 + 4 + 'wow'; // '7wow'

문제는 문자열과 더할 때 문자열이 아닌 데이터는 문자열로 바꿔서 연결한다는 겁니다. '문자열이 먼저다'라고 기억해두시면 쉽습니다. 따라서 string2의 숫자 9는 문자열 '9'로 바뀌어서 결과값이 'hi9'가 됩니다. string4를 보면 '34wow'가 아니라 '7wow'인데 그 이유는 왼쪽부터 더해나가기 때문입니다. 먼저 숫자 3 + 4를 해서 7이 되고, 그 후에 'wow' 문자열과 더해져서 '7wow'가 됩니다. 이 부분을 주의하셔야합니다. 왼쪽부터 계산되고, 문자열이 있을 경우는 문자열로 바뀌어서 계산됩니다.

증감연산자

++, -- 가 있습니다. 변수에 1을 더하거나 1을 빼줍니다. ++나 --를 붙이는 위치에 따라서 결과가 달라질 수 있습니다. 앞에 붙으면 전위증감연산자, 뒤에 붙으면 후위증감연산자라고 부릅니다. ++ii = i + 1;과 같습니다. 하지만 i++i = i + 1;과는 결과가 다를 수도 있습니다. (무슨 소린지...)

var i = 0;
i++; // i는 1이 됩니다.
alert(i++); // 1을 먼저 alert한 후에 ++되어 i는 2가됩니다.
alert(++i); // 먼저 ++한 후에 alert하여 3을 alert하게 됩니다.
i = i + 1; // i++과 같습니다.

콘솔에 순서대로 쳐보시면 쉽게 알 수 있을겁니다. ++가 앞에 붙으면 먼저 1을 더하고 다음 동작을 하고, ++가 뒤에 붙으면 동작을 먼저 한 후 1을 더합니다. 헷갈릴 여지가 있기 때문에 확실히 알아두고 가셔야합니다.

대입연산자

지금까지 써온 = 이 바로 대입연산자입니다. var a = 1;처럼 변수에 값을 대입하는 연산자입니다. 사실 가장 기본이죠.

줄여쓰는 연산자도 있습니다. 복합대입연산자라고 불리는 친구들인데요. +=, -=, /=, *=, %= 등이 있습니다. 단순히 코드 양만 줄여줍니다.

var i = 10;
i += 2; // 12 (i = i + 2와 같음)
i -= 3; // 9 (i = i - 3과 같음)
i *= 4; // 36 (i = i * 4와 같음)
i %= 5; // 1 (i = i % 5와 같음)

비교연산자

==, !=, >, <, >=, <= 순서대로 같음, 같지 않음, 큼, 작음, 크거나같음, 작거나같음입니다. 프로그래밍에서는 ==가 같다는 뜻이고, =는 대입연산자입니다. 변수에 값을 대입하는 역할이죠. 자바스크립트에서 ==와 !=는 조심해서 써야합니다. 이유는 마지막에 알려드릴게요.

100 == 10 * 10; // true
6 != 2 * 2; // true
2 * 5 > 3 * 3; // true
6 * 3 <= 2 * 9; // true

삼항연산자

삼항 연산자는 (조건 ? 참 : 거짓)으로 구성되어 있습니다.

var ternary = i > 10 ? 15 : 6

여기서 i > 10 == true면 ternary 변수는 15가 되고, false면 6이 됩니다.

논리연산자

&&, ||, !인데요. 순서대로 그리고, 또는, 아닌이란 뜻을 갖고 있습니다. &&는 앞뒤 조건 모두 참인 값이어야 true를 반환하고요, ||는 앞뒤 조건 중 하나만 참인 값이어도 true가 됩니다. !는 참인
값이면 false로, 거짓인 값이면 true로 바꿔줍니다.

제가 true, false라고 표현을 안 하고, 참인 값거짓인 값이라고 표현했습니다. 거짓인 값에는 '', 0, false, NaN, undefined, null, document.all이 있습니다. 이외에는 모두 참인 값입니다. 논리연산자는 true, false를 연산하는 게 아니라, 참인 값과 거짓인 값들을 연산하는 겁니다.

이제 여러 논리연산자를 조합해서 해보죠.

var a = 10;
var b = 20;
(a < b) && (a * 2 == b); // true
(a > b) || (a * 2 <= 20); // true
!(a < b); // false

(a < b)는 true(참)이고 (a * 2 == b)도 참입니다. 따라서 참 && 참이므로 true입니다. (a > b)는 false(거짓)이고 (a * 2 <= 20)은 참입니다. 거짓 || 참이므로 true입니다.

논리 연산자는 코드를 줄일 때도 자주 사용합니다. 앞으로 다음과 같은 코드를 봐도 당황하지 마세요.

var j = k && l; // k가 참인 값이면 j = l, 거짓인 값이면 j = k;
var m = n || p; // n이 참인 값이면 m = n, 거짓인 값이면 m = p;

j의 경우를 보죠. 만약 k값이 존재(true인 값)한다면 k && l에 의해 l값도 검사합니다. 그리고 l도 있으면 j는 l이 됩니다. 하지만 k가 없으면(false인 값) k && l은 false이기 때문에 j는 undefined가 됩니다. k가 false면 무조건 k && l도 false이므로 l은 검사하지도 않습니다.

m의 경우는 n이 있으면 n || p가 true가 되기 때문에 p는 검사하지도 않고 바로 m = n이 됩니다. 만약 n이 없으면 이제 p를 검사해서 m = p가 됩니다. 무슨 소린지 잘 모르겠죠? 링크에 자세히 설명되어 있습니다.

=== 비교연산자

마지막으로 소개할 연산자는 === 입니다. =가 세 개나 있네요. 이 연산자에 대해서는 할 얘기가 많습니다. 자바스크립트는 변수에 자료형(문자열, 숫자, 불린, 객체 등등)을 나타내는 부분이 없다고 했죠? var 하나뿐이라고요. 그래서 편할 것 같지만 오히려 불편한 점이 많다고 했었는데 바로 이런 경우입니다.

0 == ''
0 == false
0 == []

위의 세 개 모두 true입니다. 황당하죠? 숫자 0이 false도 되고 빈 문자열도 되고, 빈 배열도 됩니다. 자바스크립트에서 ==으로 비교연산을 할 때 자동으로 자료형을 바꿔버리고 만 비교해서 이런 일이 일어납니다.

이런 경우를 방지하고자 자바스크립트에는 === 연산이 있습니다. 값 뿐만 아니라 자료형까지 같아야 true가 됩니다.

0 === '' // false
0 === false // false
0 === [] // false

이제 셋 다 false가 뜨네요. 자바스크립트에서 같은 값인지 비교할 때는 꼭 ===를 써야함을 잊지 마세요. ==를 쓰는 것은 추천하지 않습니다. 아, 자료형까지 다른지 비교할 때는 != 대신에 !==를 씁니다. ===와 !==를 기억하세요.

다음 시간에는 조건문에 대해서 알아보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

7개의 댓글이 있습니다.
3달 전
function HelloFunc(func) {
this.greeting = "hello";
}

HelloFunc.prototype.call = function(func) {
func ? func(this.greeting) : this.func(this.greeting);
}

var userFunc = function(greeting) {
console.log(greeting);
}

var objHello = new HelloFunc();
objHello.func = userFunc;
objHello.call();


func ? func(this.greeting) : this.func(this.greeting); 인사이드 자바스크립트 책을 보다가 이런 내용이 나왔는데 여기서 삼항 연산자가 쓰인 부분은 무엇을 의미하는 걸까요?
3달 전
call에 인자로 함수를 넣었으면 그 함수를 실행하고 넣지 않았으면 objHello.func를 실행합니다
7달 전
질문이있습니다.
산술 연산자에서 "다른 언어처럼 /는 몫이고 %는 나머지인 개념이 아닙니다. /는 그냥 나누기(5 / 2 == 2.5)고요. %는 나머지(5 % 2 == 1)입니다. Mod(Modulus)라고도 하죠." 라고 하셨는데 제시하신 예제를 아무리 읽어봐도 제가 공부했던 C/C++에서 사용하는 방식과 동일한 것 같습니다. zero님이 어떤의도로 이렇게 설명하신건지 알려주시면 감사하겠습니다.
7달 전
/가 몫인 언어도 있습니다. 자바가 그렇습니다. C#도 그렇고요. 그리고 제가 알기로는 c랑 cpp도 5 / 2 == 2 입니다. Float 자료형일 때나 2.5가 나오고요.
7달 전
자바스크립트는 자료형을 var하나로 쓰기때문에 /와 %의 의미가 다른거군요. 감사합니다.
일 년 전
var j = k && l; // k가 참인 값이면 j = l, 거짓인 값이면 j = k;
j의 경우를 보죠. 만약 k값이 존재한다면 k && l에 의해 l값도 검사합니다. 그리고 l도 있으면 j는 l이 됩니다. 하지만 k가 없으면 k && l은 false이기 때문에 l은 검사하지도 않고 j는 undefined가 됩니다.

이 부분 잘 이해가 안되는데요.
k가 없다는 말이 k가 거짓값인 경우를 의미하는 건가요?
var result = 0 && '';
만약 이 경우 0이 거짓값이니까 result는 ''이 되는 건가요?
이 경우는 둘 다 거짓값인데 어떻게 되는 건가요?
질문이 이상해서 죄송합니다ㅜㅜ
일 년 전
네 k가 falsy한 값인 경우를 의미합니다. 0이 거짓값이면 더 이상 && 뒷 부분을 탐색할
필요가 없기 때문에 result를 undefined로 대입하고 종료됩니다.
일 년 전
안녕하세요. 이해가 잘 안되서 제가 생각한 이게 맞는지 질문드리기 위해 질문글 남깁니다.

var result = a && b 의 a 와 b 가 같은 놈이면 true 이므로 b의 값을 result 에 주고 만약 false 라면 null을 반환하는 형식인가요?

그리고

var result = a || b 는 a를 result와 비교해서 true 면 앞놈의 값을 주고, a와 result의 비교가 만약 false라면 b의 값을 주는 것인가요?
일 년 전
a && b는 일단 a가 true의 값이면 b를 result에 대입하고요, a가 false면 a를 대입합니다.
a || b는 a가 true의 값이면 a를 result에 대입하고, a가 false면 b를 대입합니다.
일 년 전
참고로 여기서 true, false는 불리언 true false가 아니라 true한 값을 가진 값들을 의미합니다. '', 0, false, NaN, null, undefined을 제외하고는 모두 true한 값을 가지고 있습니다.
일 년 전
안녕하세요. 좋은 답변 정말 감사합니다.

ZeroCho 님의 2번째 답글에 true false는 불리언 true false 를 의미하지 않는다고 말씀해주셨는데,

그렇다면

var a = 1 == 1;

a에 true 값을 주는 이러한 일을 사전에 미리 한 후에

var result = a || b; 를 하는 것인가요?


그리고 하나 더 질문 드리고 싶은 것이 있는데

위와 같은 일을 하면 result의 데이터 타입은 어떻게 되는 것인가요?
일 년 전
질문이 잘 이해가 가지 않네요. 미리 true false를 넣을 필요가 없는 것이 모든 값(문자열, 숫자 등)은 처음부터 true인지 false인지 정해져있습니다. 예를 들면 15는 항상 true고 0은 항상 false입니다. var result = 0 || 15를 하면 0이 false이기 때문에 15가 result에 대입됩니다. result는 대입되는 변수 자료형을 따라갑니다.
일 년 전
문자열로 예시를 하나 더 들자면 var a = 'hi'; var b = 'hello';가 있다면 var result = a && b를 했을 때 'hi'랑 'hello'는 모두 true이기 때문에 b가 대입됩니다. 문자열은 ''만 false거든요. 그리고 &&는 앞의 것이 true일 때만 뒤의 값을 검사하고, ||는 앞의 것이 false일 때만 뒤의 것을 검사합니다.
일 년 전
답변 정말 감사합니다.
제가 쓰던 언어가 C#이라 JSP는 처음이라 당황했네요.
일할때는 저런식으로 해본적이 없어서 당황했습니다... ㅋㅋㅋ...
(사실 저런 식의 연산도 되는데 제가 모르는 것일 수도 있지만요)

그리고 하나 더 질문(...) 드리고 싶은것이 있는데

var result = a || b 의

a와 b 둘의 값이 모두 false 라면 result 에는 null 이 들어가게 되는 것인가요?

다시 한번 답변 감사합니다.
일 년 전
JSP는 자바입니다. 자바스크립트는 아니고요. 둘다 거짓인 값이면 마지막 값인 b가 result에 들어갑니다. 근데 b가 false이니까 result도 false겠네요. 저건 아마 자바스크립트처럼 약타입 언어만 가능할 겁니다. 변수에 자료형이 정해져있지 않으니까요.
일 년 전
헉.. 부끄럽..
좋은 정보(...) 가르쳐주셔서 감사합니다.

다음 강의 쭉 보고 있는데 모르는 것 있다면 또 질문 하겠습니다.

답변 감사합니다!!
2년 전
"j의 경우를 보죠. 만약 k값이 존재한다면 k && |에 의해 l값도 검사합니다. 그리고 l도 있으면 j는 l이 됩니다. "
라는 문장에서 "k && |"의 |는 l의 오타인건가요? 아니면 제가 이해하지 못하는 의미가 있는건가요??
2년 전
오타입니다 수정했습니다 감사합니다
2년 전
논리 연산자는 코드를 줄일 때 자주 사용한다고 하셨는데 왜 사용하는건지, 언제 사용하게 되는건지 잘 와닿지가 않습니다 ㅠ
2년 전
이번 주에 그것에 대한 강좌가 나올 예정입니다 ^^ 조금만 기다려주세요! "자바스크립트 가지고 놀기"라는 제목으로요.
2년 전
강좌49강을 참고하세요~
2년 전
증감연산자 두번째,세번째 코드의 결과값이 다른 것 같아요.
2년 전
세 번째 줄의 alert(i++);가 1이 나오지 않나요?
2년 전
네 맞아요, 아아 alert(i++); 한 후의 값이 2가되는거군요!