모바일 부터 하드웨어까지 가능하게 하는 가장 강력한 언어, GITHUB 에서 가장 많은 프로젝트, 해커톤에서 가장 많이 사용되는 언어, 오바마 대통령도 배웠던 언어, 바로 자바스크립트입니다.

1. Welcome to
Javascript
2. 연산자

2. 1. 연산자
2. 대입 연산자
3. 비교 연산자
4. 논리 연산자
5. 기타 연산자
6. 결합 순서/ 우선 순위
Javascript 기초 2
선수 추천 과정
HTML5
CSS3

3. 연산자 (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
(피 연산자)

4. 연산자 (2/2)
데이터 형에 따라서 연산의 결과가 달라짐. 증가/감소 연산자의 경우 위치에 따라 의도
하는 결과가 달라지며, 소수점 연산의 경우 Javascript 가 내부적으로 2진수로 계산을
처리함에 따라 오차가 발생할 수 있으므로 주의가 필요 함
가산 연산
Operand 의 데이터 형에 따라서 가
산 연산자의 동작은 차이가 남. 한쪽이
문자인 경우, 연결 연산자로 인식됨
증가 연산자/ 감소 연산자
증가/감소 연산자는 Operand 에 대
해서 각각 1씩 가산/감산이 이루어진
다.
Javascript 기초2
소수점 계산 시 유의
Javascript가 내부적으로 수치계산을
2진수로 행하여 오차가 발생. 정밀한
결과가 필요할 경우 다음 절차로 수행
1. 값을 일단 정수로 바꾼 뒤에 연
산
2. 위 1의 결과를 다시 소수로 변환

5. 대입 연산자 (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

6. 대입 연산자 (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

7. 비교 연산자 (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

8. 비교 연산자 (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

9. 비교 연산자 (3/3)
== 연산자는 어떻게든 값이 같은 지 노력하는 연산자로, 개발자는 데이터 형을 의식하
지 않고 코딩이 가능, 하지만 이로 인해 의도하지 않은 비교 결과를 가져오는 경우가 있
는데, 이러한 경우 데이터 타입과 값을 비교하는 === 연산자를 이용할 것
등가 연산자 (==)
값이 같으면 true, 같지 않으면 false
를 반환 함. 데이터 형을 변환하여 어
떻게든 같다고 보이도록 시도.
동치 연산자 (===)
등가 연산자와 달리 데이터 타입과 값
모두를 비교하여, 정확한 비교가 필요
할 경우 사용
Javascript 기초2
조건 연산자(?:)
지정된 조건식에 따라 대응되는 값을
다르게 출력하는 경우에 사용. 삼항 연
산자라고 불림
기본형에서는 값 자체를 비교하므로 보이는 것과 비교 결과가 일치
참조형에서는 값을 보관하고 있는 참조 장소를 비교하므로 보이는 것과 비교 결과가 서로 일치하지 않
음

10. 논리 연산자 (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

11. 논리 연산자 (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

12. 기타 연산자 (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 오퍼랜드의 데이터형을 취득
instanceo
f
객체가 지정된 클래스의 인스턴스인지를 판정 void 미정의 값을 되돌림
Javascript 기초2

13. 기타 연산자 (2/2)
delete 는 지정된 변수나 배열 요소, 객체의 프로퍼티를 메모리에서 삭제 함. 배열 요소
를 삭제하는 경우 해당 요소만 삭제되고 요소가 앞으로 옮겨지는 것은 아니고, 프로퍼
티를 삭제하는 경우에도 프로퍼티만 삭제되고 참조 객체는 삭제되지 않음.
delete 연산자
삭제에 성공했을 경우 true, 실패한
경우에는 false 를 반환 함
* delete 특징
- 배열을 삭제하는 경우 요소만 삭제
되고 위치 변화는 없음
- 프로퍼티를 삭제하는 경우에도 참조
객체는 유지 됨
- 명시적 선언(var) 변수는 삭제 불가
typeof 연산자
Operand의 데이터형을 보여줌, 단
문자, 숫자, 논리의 기본 데이터형은
식별할 수 있으나, 배열이나 객체에 대
해서는 Wrapper 인 object 로 반환.
좀더 명확히 알고 싶은 경우는
instanceof 나 constructor 이용
Javascript 기초2

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

15. 결합 순서 / 우선 순위 (2/2)
수학에서 *, / 는 +, - 보다 우선 처리되는데, Javascript 에서도 각각의 연산자는 우선
순위를 가지고 있어, 하나의 식 안에 복수의 연산자가 포함되어 있는 경우 우선순위가
높은 순으로 연산을 수행하게 됨
Javascript 기초2
[ ]1 ( ) ++2 -- - ~ ! *3 / % +4 -
<<5 >> <6 <= >= > ==7 != ===
>>
>
!== &8
^9 |10 &&11 ||12 ?:13 14 = += -= 15 ,
연산자 우선 순위
우선 순위
수학의 우선순위 처럼 *, / 는 +, - 보
다 우선 됨. 각각의 연산자들은 우선순
위를 가지고 있음
결합 순서
우선 순위 판별 시 순위가 동일한 경우
에 어떤 방향으로 연산을 행할 것인지
를 정한 규칙

16. Expand your dimension!
Let’s Start!