아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

Web/javascript

[자바스크립트] 연산자

2018. 5. 15. 14:58

[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);

cs

출력값은 4 입니다. ← 드레그하셔서 출력값을 확인하세요.


Example 2.

1

2

3

4

5

var time = 4;

++time;

day = ++i;

document.write(time + day);

cs


출력값은 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);

cs



위 예제의 출력값은 "짝수" 입니다. 괄호 안에 조건에 따라 참이면 콜론(:) 왼쪽의 결과를 출력하고 거짓이면 오른쪽의 결과를 출력하게 됩니다. 이 삼항연산자는 단순한 조건문에 자주 사용됩니다.



[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);

cs


위 예제의 출력값은 "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"]

728x90
저작자표시 비영리 (새창열림)

'Web > javascript' 카테고리의 다른 글

[자바스크립트] 현재 해상도를 얻는 자바스크립트  (0) 2018.05.15
[제이쿼리][자바스크립트] 영문만, 숫자만, 한글만 입력.  (0) 2018.05.15
[자바스크립트] 함수  (0) 2018.05.15
[자바스크립트] 배열  (0) 2018.05.15
[자바스크립트] for 반복문  (0) 2018.05.15

티스토리툴바