�ݺ�ߣ

Startup JavaScript
2.연산자
THINKER TO MAKER
x

연산자
THINKER TO MAKER
컴퓨터를 전자 계산기로

연산자
연산자는 미리 정의된 처리를 행하는 기호 임. 처리되는 것은 피 연산자라 함.
산술 연산자는 표준적인 사칙연산과 수치에 관한 연산을 수행
연산자 개요 사용 예 결과
+ 숫자의 덧셈 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 = =A + BOperator (연산자) Operand(피 연산자)

연산자 실습
데이터 형에 따라 연산 결과가 달라지며, 소수점 연산은 오차 발생 가능성
증가/감소 연산자의 경우 위치에 따라 의도하는 결과가 달라짐
// Operator
console.log(100 + 1); // 101
console.log(100 - 1); // 99
console.log(100 * 5); // 500
console.log(100 / 5); // 20
console.log(100 % 3); // 1
console.log('100' + 1); // 1001
var today = new Date();
console.log(today);
console.log(100 + today);
// Post-Increment
var a = 5;
var b = a++;
console.log(a); // 5
console.log(b); // 6
// Pre-Increment
var c = 5;
var d = ++c;
console.log(c); // 6
console.log(d); // 6
// Float Number
console.log(0.2 * 3);
// 0.6000000000000001
console.log(0.2 * 3 === 0.6);
// false
console.log((0.2 * 10) * 3 / 10);
// 0.6
console.log((0.2 * 10) * 3 ===
0.6 * 10);
//true

대입 연산자 (1/1)
지정된 변수에 특정 값을 대입하는 연산자로, = 이 대표 적임.
산술 연산자나 비트 연산자와 결합된 복합 대입 연산자도 포함
= 변수 등에 값을 대입 함 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

대입 연산자 (1/2)
기본 대입 연산은 값 자체가 전달되나, 참조 형은 주소 값이 전달 됨
참조 형은 따라서 원본의 실제 값이 변경 시 참조된 값에도 영향을 줌
기본형 대입 연산자
기본형은 값이 직접 보관됨, a
의 값을 b로 전달할 경우 그
값이 복사되어, 영향이 없음
참조형 대입 연산자
참조형의 경우 값 자체가 보관되는 것이 아닌, 값을 보관하
는 주소가 변수에 보관되므로, array1 변경 내용이 array2 에
도 영향을 미침
주소 값
100
200 [0, 1, 2] -> [5, 1, 2]
300
1
기본형 참조형
1
1
변수x
변수yy=x
1
1
변수 array1
변수 array2
array2 = array1
참조 주소 복사
값에 영향을 미치지 않음 서로 동일한 주소를 보고 있으므로, 결과가 영향을 줌

대입 연산자 실습
일반 값을 대입하는 경우 기본형(Value), 배열과 같은 객체를 전달하는 경우
참조형 (Reference) 으로 처리가 됨
// = and +
var a = 0;
var b = 0;
a = a + 1;
b += 1;
// value
var x = 1;
var y = x;
x = 2;
console.log(x); // 2
console.log(y); // 1
// reference
var arr1 = [0, 1, 2];
var arr2 = arr1;
arr1[0] = 10;
console.log(arr1); // 10, 1, 2
console.log(arr2); // 10, 1, 2

비교 연산자 (1/2)
좌/우변의 값을 비교하여 결과를 반환.
이항 연산은 값만, 삼항은 데이터 형도 비교하므로, 오 동작 방지가 가능
== 좌변과 우변의 값이 같을 경우 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

비교 연산자 (2/2)
등가 연산자는 데이터 형이 다르더라도 최대한 값이 같게 시도하여 반환.
참조형의 경우는 값을 비교하는 것이 아닌 주소를 비교 함.
비교 데이터 형 평가 기준
동일
문자열/숫자/논리형 단순히 쌍방의 값이 동일한지를 판단
배열/객체 참조 장소가 동일한 지를 판단
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
!=

비교 연산자 실습
이항 연산자는 어떻게든 값이 같다고 판단하므로, 개발자가 데이터 형을 의식
하지 않아도 되나, 이로 인해 의도하지 않는 결과를 가져올 수 있음
// value ==, ===
console.log(1 == true); // true
console.log(1 == '1'); // true
console.log('0x10' == 16); // true
console.log(1 === true); // false
console.log(1 === '1'); // false
console.log('0x10' === 16); // false
// reference
var arr1 = ['Banana', 'Apple', 'Orange'];
var arr2 = ['Banana', 'Apple', 'Orange'];
console.log(arr1 == arr2); // false
// ?: operator
var x = 90;
console.log((x > 80) ? 'Success' : 'fail'); //Success

논리 연산자 (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
&& || !

논리 연산자 (2/2)
논리 연산자의 평가 결과는 좌/우측 식의 논리 값에 따라 달라짐
논리 AND/OR 연산자만 사용하는 경우, 우측 식은 판정되지 않을 수 있음
Logical &&
Logical ||
false 라면
x == 1 && alert(‘Hello 2’)
x == 1 || alert(‘Hello 3’)
true/false에 관계없이
true 라면 true/false에 관계없이
조건식 전체가 반드시 false
조건식 전체가 반드시 true
평가가 불 필요
평가가 불 필요
우측 식은 숏컷 (무시)
우측 식은 숏컷 (무시)

논리 연산자 실습
복수의 조건식과 논리 값을 논리적으로 결합하여 결과를 true/false 로 반환
비교 연산자와 조합하여 복잡한 조건식을 만들어 냄
// == Logical Compare
var x = 1;
var y = 2;
var z = null;
console.log(x == 1 && y == 1); // false
console.log(x == 1 || y == 1); // true
// Short Curcuit
x == 1 && alert('Hello 1'); // popup
x == 2 && alert('Hello 2'); // pass
y == 2 || alert('Hello 3'); // pass

기타 연산자
비트 연산은 정수 값을 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 미정의 값을 되돌림

기타 연산자 실습
Delete 는 지정된 변수, 배열, 객체를 메모리에서 삭제함.
배열 삭제 시 해당 요소만 삭제, 프로퍼티의 경우 참조 객체는 삭제되지 않음
// delete
var arr =
['Banana','Tomato','Orange'];
delete arr[0];
console.log(arr); // [,
'Tomato','Orange']
var obj = { x : 10, y : 20 };
delete obj.x;
console.log(obj); // { y : 20}
var num = 10; // Can't delete
delete num;
console.log(num); // 10
// typeof
var num = 1;
var str = 'Hello';
var bool = true
console.log(typeof num);// number
console.log(typeof str);// string
console.log(typeof bool);
// boolean
// instanceof
console.log(typeof obj);
console.log(obj instanceof
Object);
console.log(obj instanceof Array);
console.log(typeof arr);
console.log(arr instanceof
Object);
console.log(arr instanceof Array);

결합 순서 / 우선 순위 (1/2)
연산자를 좌->우, 우->좌 등, 어떤 방향으로 결합할지 정하는 규칙
연산자 우선순위가 동일할 경우, 결합 순서를 가지고 어느 쪽 부터 인지 결정
좌우 데이터 형 데이터 형 기준
좌 -> 우
산술 연산자 단순히 쌍방의 값이 동일한지 비교
비교 연산자 참조 장소가 동일한지 판단
논리 연산자 쌍방 모두 null/undefined 또는 null과 undefined의 비교는 모두 true
비트 연산자 <<. >>, >>>, &, ^, |
그 외 ., [], (), ,, instanceof, in
우 -> 좌
산술 연산자 ++, --
대입 연산자 =, +=, -=, *=, /=, %=, &=, ^=, |=
논리 연산자 !
비트 연산자 ~
조건 연산자 ?:
그 외 -(부호반전), +(무연산), delete, typeof, void

결합 순서 / 우선 순위 (2/2)
수학에서 *, / 는 +, - 보다 우선 처리 됨
복수 연산자가 포함된 경우 우선 순위가 높은 순으로 연산 수행
[ ]1 ( )
++2 -- - ~ !
*3 / %
+4 -
<<5 >>
<6 <= >= >
==7 != ===
>>>
!==
&8
^9
|10
&&11
||12
?:13
14 = += -=
15 ,

결합 순서 / 우선 순위 실습
각각의 연산자는 우선 순위를 가지고 있음
우선 순위 판별 시 순위가 동일하면, 결합 순서로 연산 순서를 판별
var a = 3 * 5 + 2 * 2;
var b = (3 * 5) + (2 * 2);
var c = 2 * 5 - 3;
var d = 2 * (5 - 3);
console.log(c); // 7
console.log(d); // 4
var x = c *= 3;
var y = ( c *= 3);
console.log(x); // 21
console.log(y); // 63

W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x

�ݺ�ߣ

2.Startup JavaScript - 연산자

Recommended

More Related Content

What's hot (19)

Viewers also liked (15)

Similar to 2.Startup JavaScript - 연산자 (20)

More from Circulus (10)

2.Startup JavaScript - 연산자