[JS] 자바스크립트 강좌(4) #각종 연산자들 |
수학에서 더하고 빼고 나누고 곱하는 것들은 기본적으로 알고 계실 것입니다. 하지만 도대체 이것들을 어디에다가 써야 하나, 수학은 왜 배우지? 하는 의문을 가지신분들도 계실겁니다. 저의 경우 수학의 배움의 의미를 잘 몰랐기 때문에 흥미를 못느꼈던 사람중에 하나입니다. 하지만 프로그래머가 된다는 것은 수학과 밀접한 관련이있습니다. 수학을 잘 못한다면 좋은 프로그래머가 될 수 없다고 할 수 있습니다. 때문에 이번회에서 다룰 연산자는 수학의 도구라고 말 할 수 있으며 중요한 단원이라고 할 수 있으니 주의깊게 봐주시기 바랍니다.
[1] 연산자의 종류 |
산술연산자 | +, -, *, /, % |
증가/감소연산자 | ++, -- |
대입연산자 | +=, -=, *=, /=, %=, >>=, <<=, &=, |= |
비교연산자 | <, <=, >, >=, ==, != |
조건연산자(삼항연산자) | 변수 = (조건) ? 참 : 거짓 |
문자열연산자 | + |
논리연산자 | &&(and), ||(or), !(not), ^(xor) |
연산자의 종류를 표로 정리했습니다. 각 연산자들을 차례대로 살펴보겠습니다.
[2] 산술연산자 |
+ | 더하기 |
- | 빼기 |
* | 곱하기 |
/ | 나누기 |
% | 나눈 나머지 |
설명할 것도 없습니다. 다만 각 연산자들을 어떤 특수문자로 사용하는지 알고 가시면 됩니다. 여기서 가장 놀라울정도로 영향력이 있다고 할 수 있는 연산자는 % 입니다. 과연 나눈 나머지를 어디에다가 쓸까 생각했었는데, 나중에 "홀수와 짝수"를 구분하는 용도로 많이 쓰이더랍니다.
[3] 증가/감소연산자 |
++i | i 에 1을 증가시키고, 변수에 그 값( i 에 1증가 한 값 )을 전달. |
--i | i 에 1을 감소시키고, 변수에 그 값( i 에 1감소 한 값 )을 전달. |
i++ | i 의 값을 변수에 전달시키고, i 에 1을 증가시킴. |
i-- | i 의 값을 변수에 전달시키고, i 에 1을 감소시킴. |
-i | 피연산자의 기호를 변경함. |
잘 이해가 되시나요? 증가/감소연산자가 이번 강좌에서 난이도가 조금 높은 부분입니다. ++가 앞에 붙느냐, 뒤에 붙느냐에 따라서 결과는 달라집니다. 다음의 예제를 한번 풀어보시고 왜 그런지 위에 설명과 대조해보며 이유를 생각해보신다면 조금씩 이해가 가실 것입니다.
Example 1.
1 2 3 4 5 | var i = 0; i++; operator = ++i; document.write(i + operator); |
출력값은 4 입니다. ← 드레그하셔서 출력값을 확인하세요.
Example 2.
1 2 3 4 5 | var time = 4; ++time; day = ++i; document.write(time + day); |
출력값은 12 입니다. ← 드레그하셔서 출력값을 확인하세요.
[4] 대입연산자 |
a += b | a와 b를 더한 값을 x에 대입 |
a -= b | a와 b를 뺀 값을 a에 대입 |
a *= b | a와 b를 곱한 값을 a에 대입 |
a /= b | a와 b를 나눈 값을 a에 대입 |
a %= b | a와 b를 나눈 나머지 값을 a에 대입 |
오른쪽 값을 계산한 후 왼쪽 변수에 값을 대입하는 연산자입니다.
즉 a += b 는 a + b = a 라는 공식과 같다고 보시면 됩니다.
[5] 비교연산자 |
== | 등치 연산자 | 두개의 값이 같으면 참(true), 같지않으면 거짓(false) |
!= | 비등치 연산자 | 두개의 값이 같지 않으면 참(true), 같으면 거짓(false) |
> | 왼쪽 값이 오른쪽 값보다 크면 참(true), 아니면 거짓(false) | |
>= | 왼쪽 값이 오른쪽 값보다 크거나 같으면 참(true), 아니면 거짓(false) | |
< | 왼쪽 값이 오른쪽 값보다 작으면 참(true), 아니면 거짓(false) | |
<= | 왼쪽 값이 오른쪽 값보다 작거나 같으면 참(true), 아니면 거짓(false) |
[6] 논리연산자 |
&&(and) | 좌측 표현식과 우측 표현식이 모두 참이면 참 |
||(or) | 좌측 표현식과 우측 표현식 중 하나만 참이면 참 |
!(not) | 표현식이 참이면 거짓, 거짓이면 참 |
논리연산자는 주로 조건문을 간결하게 작성하거나 여러 조건을 한번에 나열할 때 많이 사용합니다.
[7] 조건연산자(삼항연산자) |
변수 = (조건) ? 참 : 거짓
1 2 3 4 5 | var number = 2; result = (number%2 == 0) ? "짝수" : "홀수"; document.write(result); |
위 예제의 출력값은 "짝수" 입니다. 괄호 안에 조건에 따라 참이면 콜론(:) 왼쪽의 결과를 출력하고 거짓이면 오른쪽의 결과를 출력하게 됩니다. 이 삼항연산자는 단순한 조건문에 자주 사용됩니다.
[8] 문자열연산자 |
A + B | 문자열을 이어주는 역할 |
A += B | A문자열에 B문자열을 더한 다음 A에 대입 |
1 2 3 4 5 6 7 8 | text1 = "ABC"; text2 = "DEF"; text3 = "GHI"; text_unite = text1 + text2; text_unite += text3; document.write(text_unite); |
위 예제의 출력값은 "ABCDEFGHI" 입니다. 결과를 보시고 원리를 생각하신다면 어려울 것이 없습니다.
[9] 특수연산자 |
comma(,) | 두 표현식을 계산하고, 두 번째 표현식의 값을 리턴. |
delete | 객체의 요소를 삭제하고 항상 undefined 값을 리턴. |
new | 객체 형의 인스턴스를 만들기 위해 사용. |
typeof | 연산자의 형을 식별하는 스트링 값을 리턴한다. |
void | 값을 리턴하지 않음. |
[10] 연산자의 우선순위 |
코딩을 하실 때 연산자의 순위가 있으니 참고하기 바랍니다. 그다지 어려운 것은 아니고 가장 중요한 것은 곱셉,나눗셈이 먼저이고 덧셈, 뺄셈이 나중이라고 배웠던 초등학교 시절을 기억하는 것입니다.^^
1 | (), [] | 괄호, 대괄호 |
2 | !, ~, ++, -- | 부정, 긍감 |
3 | *, /, % | 승제 연산자 |
4 | +, - | 가감 연산자 |
5 | <<, >>, >>> | 비트 shift 연산자 |
6 | <, >, <=, >= | 상이성 비교 연산자 |
7 | ==, != | 일치성 비교 연산자 |
8 | & | 비트 and 연산자 |
9 | ^ | 비트 xor 연산자 |
10 | | | 비트 or 연산자 |
11 | && | 논리곱 연산자 |
12 | || | 논리합 연산자 |
13 | () ? : | 조건 연산자 |
14 | =, +=, -=, *=, /=, %= | 대입 연산자 |
출처: http://ccollect.tistory.com/42 [DO "IT"]
'Web > javascript' 카테고리의 다른 글
[자바스크립트] 현재 해상도를 얻는 자바스크립트 (0) | 2018.05.15 |
---|---|
[제이쿼리][자바스크립트] 영문만, 숫자만, 한글만 입력. (0) | 2018.05.15 |
[자바스크립트] 함수 (0) | 2018.05.15 |
[자바스크립트] 배열 (0) | 2018.05.15 |
[자바스크립트] for 반복문 (0) | 2018.05.15 |