2.startup javascript - 연산자

Startup JavaScript2.연산자

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

변수 array2array2 = array1참조 주소 복사

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

대입 연산자 실습

일반 값을 대입하는 경우 기본형(Value), 배열과 같은 객체를 전달하는 경우

참조형 (Reference) 으로 처리가 됨

// = and +

var a = 0;

var b = 0;

a = a + 1;

b += 1;

console.log(a); // 1

console.log(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);

console.log(a); // 19

console.log(b); // 19

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