Welcome to

Javascript 2. 연산자

1. 연산자

2. 대입 연산자

3. 비교 연산자

4. 논리 연산자

5. 기타 연산자

6. 결합 순서/ 우선 순위

Javascript 기초 2

선수 추천 과정 HTML5 CSS3

연산자 (1/2)

연산자(Operator)란 변수에 대해 미리 지정된 어떤 처리를 행하기 위한 기호이다. =, +, - 등이 모두 연산자이다. 연산자에 의해 처리되는 것은 피 연산자(Operand)이다. 산술 연산자는 표준 적인 사칙연산과 수치에 관련된 연산을 행하는 연산자이다.

연산자 개요 사용 예 결과

+ 숫자의 덧셈 9+2 11

- 숫자의 뺄셈 9-2 7

* 숫자의 곱셈 9*2 18

/ 숫자의 나눗셈 9/2 4

% 숫자의 나머지 연산 9%2 1

++ 전치/후치 덧셈 x=3 일 때, x++ or ++x 3, 4

-- 전치/후치 뺄셈 x=3 일 때, x-- or --x 3, 2

X =

Javascript 기초2

= A + B Operator (연산자)

Operand (피 연산자)

연산자 (2/2)

데이터 형에 따라서 연산의 결과가 달라짐. 증가/감소 연산자의 경우 위치에 따라 의도하는 결과가 달라지며, 소수점 연산의 경우 Javascript 가 내부적으로 2진수로 계산을 처리함에 따라 오차가 발생할 수 있으므로 주의가 필요 함

가산 연산 Operand 의 데이터 형에 따라서 가산 연산자의 동작은 차이가 남. 한쪽이 문자인 경우, 연결 연산자로 인식됨

증가 연산자/ 감소 연산자 증가/감소 연산자는 Operand 에 대해서 각각 1씩 가산/감산이 이루어진다.

Javascript 기초2

소수점 계산 시 유의 Javascript가 내부적으로 수치계산을 2진수로 행하여 오차가 발생. 정밀한 결과가 필요할 경우 다음 절차로 수행

1. 값을 일단 정수로 바꾼 뒤에 연산

2. 위 1의 결과를 다시 소수로 변환

대입 연산자 (1/2)

지정한 변수에 갑을 대입하는 연산자. = 는 대표적인 대입 연산자로, 산술 연산자나 비트 연산자와 함께 연동된 기능을 제공하는 복합 대입 연산자도 포함되어 있음

연산자 개요 사용 예 결과

= 변수 등에 값을 대입 함 x = 1

+= 좌변 값에 우변 값을 더한 값을 대입 함 x = 3; x += 2 5

-= 좌변 값에 우변 값을 뺀 값을 대입 함 x = 3; x -= 2 1

*= 좌변 값에 우변 값을 곱한 값을 대입 함 x = 3; x *= 2 6

/= 좌변 값에 우변 갑을 나눈 값을 대입 함 x = 3; x %= 2 1.5

%= 좌변 값에 우변 값을 나눈 나머지 값을 대입 함 x = 3; x /= 2 1

&= 좌변 값에 우변 값을 비트 AND 연산한 값을 대입 함 x = 10; x &= 5 0

|= 좌변 값에 우변 값을 비트 OR 연산한 값을 대입 함 x = 10; x &= 5 15

^= 좌변 값에 우변 값을 비트 XOR 연산한 값을 대입 함 x = 10; x ^= 5 15

<<= 좌변 값에 우변 값만큼 좌측 SHIFT 한 결과를 대입 함 x = 10; x <<= 2 20

>>= 좌변 값에 우변 값만큼 우측 SHIFT 한 결과를 대입 함 x = 10; x >>= 1 5

>>>= 좌변 값에 우변 값 만큼 우측 SHIFT 한 결과를 대입 (Unsigned) x = 10; x >>>= 2 2

Javascript 기초2

대입 연산자 (2/2)

기본형의 대입 연산인 경우 값 자체가 전달되며, 참조형의 경우는 변수가 가지고 있는 주소값을 복사하여 넘겨주게 된다. 따라서 참조형은 원본 변수의 실제 값이 변경되는 경우, 복사된 값에도 그대로 영향을 미치게 된다

기본형 대입 연산자 기본형은 값이 직접 보관됨, a의 값을 b로 인도할 경우 그 값이 복사되어, a 값이 변경되도 b 에 영향이 없음

참조형 대입 연산자 참조형의 경우 값을 보관하는 주소가 변수에 보관되므로, array1 변경 내용이 array2 에도 영형을 미침

주소 값

100

200 [0, 1, 2] -> [5, 1, 2]

300

1

기본형 참조형

1

1

변수x

변수y y=x

1

1

변수 array1

변수 array2 array2 = array1 참조 주소 복사

서로가 별개로 영향을 미치지 않음 서로 동일한 주소를 보고 있으므로, 결과가 영향을 줌

Javascript 기초2

비교 연산자 (1/3)

좌변/우변의 값을 비교하여 그 결과를 반환. ==, != 는 값만을 비교 ===, !== 은 데이터 형도 비교하므로, 예기치 못한 오 동작 방지를 위하여 ===, !== 을 사용하는 것이 바람 직 함

연산자 개요 사용 예 결과

== 좌변과 우변의 값이 같을 경우 true 3 == 3 true

!= != 좌변과 우변의 값이 같지 않을 경우, true 3 != 3 false

< 좌변이 우변보다 작은 경우, true 3 < 7 true

<= 좌변이 우변보다 작거나 같을 경우, true 3 <= 3 true

> 좌변이 우변보다 클 경우, true 3 > 7 false

>= 좌변이 우벼보다 크거나 같을 경우, true 3 >= 3 true

=== 좌변과 우변의 값이 같고 데이터 형도 같은 경우, true 3 === 3 true

!== 좌변과 우변 값이 같지 않거나 데이터 형이 다른 경우, true 3 !== 3 false

?: 조건 식? 식1:식2, true 인 경우 식1을 false 인 경우 식2를 수행 <x==1) ? 1:0 1 또는 0

Javascript 기초2

비교 연산자 (2/3)

등가 연산자는 Operand 의 데이터형이 다른경에도 데이터 형을 변환하여 어떻게든 같아 보이게 하는 시도의 연산자임. 단, 참조형의 비교인 경우 값을 비교하는 것이 아닌 참조하고 있는 주소를 비교함.

비교 데이터 형 평가 기준

동일

문자열/숫자/논리형 단순히 쌍방의 값이 동일한지를 판단

배열/객체 참조 장소가 동일한 지를 판단

null/undefined 쌍방이 모두 null/undefined 또는 null과 undefined 의 비교는 모두 true

틀림 문자열/숫자/논리형 문자열/논리형을 수치로 변환 후에 판단

객체 기본형으로 변환 후에 판단

주소 값

100

200 [1, 2, 6, 8, 10]

300

400

500 [1, 2, 6, 8, 10]

600

10

기본형 참조형

10

변수x

숫자형:num2

==

배열형:arr1

배열형:arr2

서로가 별개로 영향을 미치지 않음

10

10

숫자형:num1

!=

Javascript 기초2

비교 연산자 (3/3)

== 연산자는 어떻게든 값이 같은 지 노력하는 연산자로, 개발자는 데이터 형을 의식하지 않고 코딩이 가능, 하지만 이로 인해 의도하지 않은 비교 결과를 가져오는 경우가 있는데, 이러한 경우 데이터 타입과 값을 비교하는 === 연산자를 이용할 것

등가 연산자 (==) 값이 같으면 true, 같지 않으면 false 를 반환 함. 데이터 형을 변환하여 어떻게든 같다고 보이도록 시도.

동치 연산자 (===) 등가 연산자와 달리 데이터 타입과 값 모두를 비교하여, 정확한 비교가 필요할 경우 사용

Javascript 기초2

조건 연산자(?:) 지정된 조건식에 따라 대응되는 값을 다르게 출력하는 경우에 사용. 삼항 연산자라고 불림

기본형에서는 값 자체를 비교하므로 보이는 것과 비교 결과가 일치

참조형에서는 값을 보관하고 있는 참조 장소를 비교하므로 보이는 것과 비교 결과가 서로 일치하지 않음

논리 연산자 (1/2)

논리연산자는 복수의 조건 식을 결합하여 그 결과를 true/false 로 반환 함 비교 연산자와 조합하여 사용하며, 보다 복잡한 조건식을 표현할 수 있다.

연산자 개요 사용 예 결과

&& 좌우식이 모두 true 인 경우 true 100 == 100 && 1000 == 1000 true

|| 좌우시의 어느 쪽이든 true 인 경우 true 100 == 100 || 1000 = 500 true

! 식이 false 인 경우, true !(10 > 100) true

좌측 식 우측 식 && ||

true true true true

true false false true

false true false true

false false false false

&& || !

Javascript 기초2

논리 연산자 (2/2)

논리 연산자의 평가 결과는 좌측 식/우측 식의 논리 값에 따라 달라짐. 논리 AND/OR 연산자를 사용하는 경우, 좌측 식만 판정되고 우측 식은 판정되지 않는 케이스가 있으므로 사용시 유의할 것(Short Curcuit Evaluation).

논리 연산자 복수의 조건식과 논리 값을 논리적으로 결합하여 그 결과를 true/false 값으로 반환함. 비교 연산자와 조합하여 복잡한 조건식을 만들어 냄

Logical &&

Logical ||

false 라면

x == 1 && alert(‘Hello 2’)

x == 1 || alert(‘Hello 3’)

true/false에 관계없이

true 라면 true/false에 관계없이

조건식 전체가 반드시 false

조건식 전체가 반드시 true

평가가 불 필요

평가가 불 필요

우측 식은 숏컷 (무시)

Javascript 기초2

기타 연산자 (1/2)

비트 연산은 정수 값을 2로 나타냈을 때 각 bit 단위로 논리계산을 행 하는 연산을 의미. 그 외에 콤마와 delete, new, typeof, instanceof 등 다양한 이용가능한 연산자가 있음.

연산자 개요 사용 예

& 좌우 값 모두에 세트된 비트 (AND 연산) 10&5 -> 1010&0101 -> 0000 -> 0

| 좌우 값 중 어느 쪽이든 세트된 비트 (OR 연산) 10|5 -> 1010|0101 -> 1111 -> 15

^ 좌우 값중 어느쪽이든 세트 되었거나 양쪽 모두 세트되지 않은 비트 (XOR 연산)

10^5 -> 1010^0101 -> 1111 -> 15

~ 비트를 반전 (NOT 연산) ~10 -> ~1010 -> 0101 -> -11

<< 비트를 좌측으루 SHIFT 10<<1 -> 1010<<1 -> 10100 -> 20

>> 비트를 우측으로 SHIFT 10>>1 -> 1010>>1 -> 0101 -> 5

>>> 비트를 우측으로 SHIFT 하되, 좌측을 0 으로 채움 10>>>2 -> 1010>>>2 -> 0010 -> 2

연산자 개요 연산자 개요

, (콤마) 좌우의 식을 계속하여 실행 new 새로운 인스턴스를 생성

delete 객체의 프로퍼티나 배열의 요소를 삭제 typeof 오퍼랜드의 데이터형을 취득

instanceof

객체가 지정된 클래스의 인스턴스인지를 판정 void 미정의 값을 되돌림

Javascript 기초2

기타 연산자 (2/2)

delete 는 지정된 변수나 배열 요소, 객체의 프로퍼티를 메모리에서 삭제 함. 배열 요소를 삭제하는 경우 해당 요소만 삭제되고 요소가 앞으로 옮겨지는 것은 아니고, 프로퍼티를 삭제하는 경우에도 프로퍼티만 삭제되고 참조 객체는 삭제되지 않음.

delete 연산자 삭제에 성공했을 경우 true, 실패한 경우에는 false 를 반환 함 * delete 특징 - 배열을 삭제하는 경우 요소만 삭제 되고 위치 변화는 없음 - 프로퍼티를 삭제하는 경우에도 참조 객체는 유지 됨 - 명시적 선언(var) 변수는 삭제 불가

typeof 연산자 Operand의 데이터형을 보여줌, 단 문자, 숫자, 논리의 기본 데이터형은 식별할 수 있으나, 배열이나 객체에 대해서는 Wrapper 인 object 로 반환. 좀더 명확히 알고 싶은 경우는 instanceof 나 constructor 이용

Javascript 기초2

결합 순서 / 우선 순위 (1/2)

연산자를 좌측에서 우측으로, 혹은 우측에서 좌측으로 어떤 방향으로 결합할 지를 결정하는 규칙. 연산자의 우선순위가 동일한 경우, Javascript 는 이 결합 순서를 가지고 좌우 어느 쪽 부터인지를 결정

좌우 데이터 형 데이터 형 기준

좌 -> 우

산술 연산자 단순히 쌍방의 값이 동일한지 비교

비교 연산자 참조 장소가 동일한지 판단

논리 연산자 쌍방 모두 null/undefined 또는 null과 undefined의 비교는 모두 true

비트 연산자 <<. >>, >>>, &, ^, |

그 외 ., [], (), ,, instanceof, in

우 -> 좌

산술 연산자 ++, --

대입 연산자 =, +=, -=, *=, /=, %=, &=, ^=, |=

논리 연산자 !

비트 연산자 ~

조건 연산자 ?:

그 외 -(부호반전), +(무연산), delete, typeof, void

Javascript 기초2

결합 순서 / 우선 순위 (2/2)

수학에서 *, / 는 +, - 보다 우선 처리되는데, Javascript 에서도 각각의 연산자는 우선순위를 가지고 있어, 하나의 식 안에 복수의 연산자가 포함되어 있는 경우 우선순위가 높은 순으로 연산을 수행하게 됨

Javascript 기초2

[ ] 1 ( ) ++ 2 -- - ~ ! * 3 / % + 4 -

<< 5 >> < 6 <= >= > == 7 != === >>>

!== & 8

^ 9 | 10 && 11 || 12 ?: 13 14 = += -= 15 ,

연산자 우선 순위

우선 순위 수학의 우선순위 처럼 *, / 는 +, - 보다 우선 됨. 각각의 연산자들은 우선순위를 가지고 있음

결합 순서 우선 순위 판별 시 순위가 동일한 경우에 어떤 방향으로 연산을 행할 것인지를 정한 규칙

Expand your dimension!

Let’s Start!