SlideShare a Scribd company logo
1 of 8
For non-developers!
Learn Javascript Programming!
!
Learning contents with!
Operator & Type Casting!
!
!
!
!
!
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare
#6.1
산술 연산자
+ - * / %
- +
++ --
=
덧셈 뺄셈 곱셈
나눗셈
나머지
음수 양수
1씩
 증가 1씩
 감소
대입
0
1
1.300
{
2 2
2 1
대입 연산자의 확장
+ - * / %
=
+
V
+= -= *= /= %=
연산자의 결합 방식
모든 연산자는 우선순위가 있다. 곱셈은 덧셈, 뺄셈보
다 우선순위가 높다. 즉, 덧셈 뺄셈 보다 먼저 수행된다
모든 연산자는 결합 방향을 가진다. 대입 연산자는 오른
쪽에서 왼쪽으로, 뺄셈은 왼쪽에서 오른쪽으로, 증감 연
산자(++, --)는 결합 방향을(전치, 후치) 변경할 수 있다.
x 의 값은 -2이다.!
덧셈, 뺄셈의 우선순위는!
같기 때문에 좌측에서 우측으로 !
결합되며 수행된다.
y의 값은 7이다. 9라고 예상한다면 !
수식의 의도를 우선순위와 결합방향과 !
다르게 표현했기 때문이다.
연산자의 결합 방식
y 값이 7이 되는 과정. 곱셈의 우선순위가 높기 때문에 먼저
수행된 후 그 결과를 다음 우선순위인 덧셈과 결합된다.
1
2
y 값이 9가 되는 “의도” 가 있다면 그 의도를 괄호로 표현
하라. 괄호는 결합 우선순위를 명시적으로 지정할 수 있다.
2
1
문맥에 따라 기능이 달라지는 연산자
y 의 값은 각각 20, ‘1010’ 이다.!
어떻게 이런 결과가 나오는 것일까?
+연산자는 좌변과 우변이 모두 숫자 (or 숫자를 담고있는 변
수)인 경우 산술 연산을 수행하고 하나라도 문자인 경우 숫자
를 문자형으로 변환(Type Casting)한 후 “결합”한다

More Related Content

Viewers also liked

비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2민태 김
 
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)민태 김
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4민태 김
 
정규표현식 Regular expression (regex)
정규표현식 Regular expression (regex)정규표현식 Regular expression (regex)
정규표현식 Regular expression (regex)Sunyoung Kim
 
[패스트캠퍼스] 애자일에 대한 오해와 진실
[패스트캠퍼스] 애자일에 대한 오해와 진실[패스트캠퍼스] 애자일에 대한 오해와 진실
[패스트캠퍼스] 애자일에 대한 오해와 진실FAST CAMPUS
 

Viewers also liked (6)

비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
 
Git - Level 2
Git - Level 2Git - Level 2
Git - Level 2
 
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
 
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
 
정규표현식 Regular expression (regex)
정규표현식 Regular expression (regex)정규표현식 Regular expression (regex)
정규표현식 Regular expression (regex)
 
[패스트캠퍼스] 애자일에 대한 오해와 진실
[패스트캠퍼스] 애자일에 대한 오해와 진실[패스트캠퍼스] 애자일에 대한 오해와 진실
[패스트캠퍼스] 애자일에 대한 오해와 진실
 

More from 민태 김

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김
 
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library민태 김
 
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git민태 김
 
외계어 스터디 3/5 function and object
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object민태 김
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements민태 김
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview민태 김
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview민태 김
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public민태 김
 
AWS 구축 경험 공유
AWS 구축 경험 공유AWS 구축 경험 공유
AWS 구축 경험 공유민태 김
 
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍민태 김
 
Knockout.js Overview
Knockout.js OverviewKnockout.js Overview
Knockout.js Overview민태 김
 
스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략민태 김
 
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent민태 김
 
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview민태 김
 
What is Hybrid Apps
What is Hybrid AppsWhat is Hybrid Apps
What is Hybrid Apps민태 김
 
고품질웹앱개발전략
고품질웹앱개발전략고품질웹앱개발전략
고품질웹앱개발전략민태 김
 

More from 민태 김 (16)

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
 
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
 
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
 
외계어 스터디 3/5 function and object
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public
 
AWS 구축 경험 공유
AWS 구축 경험 공유AWS 구축 경험 공유
AWS 구축 경험 공유
 
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
 
Knockout.js Overview
Knockout.js OverviewKnockout.js Overview
Knockout.js Overview
 
스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략스마트미디어 크로스플렛폼 개발 전략
스마트미디어 크로스플렛폼 개발 전략
 
CANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEventCANVAS, SVG, WebGL, CSS3, WebEvent
CANVAS, SVG, WebGL, CSS3, WebEvent
 
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
 
What is Hybrid Apps
What is Hybrid AppsWhat is Hybrid Apps
What is Hybrid Apps
 
고품질웹앱개발전략
고품질웹앱개발전략고품질웹앱개발전략
고품질웹앱개발전략
 

비개발자를 위한 Javascript 알아가기 #6.1

  • 1. For non-developers! Learn Javascript Programming! ! Learning contents with! Operator & Type Casting! ! ! ! ! ! Kim min tae @ibare! NCSOFT http://ibare.kr https://medium.com/@ibare #6.1
  • 2. 산술 연산자 + - * / % - + ++ -- = 덧셈 뺄셈 곱셈 나눗셈 나머지 음수 양수 1씩
  • 5. 대입 연산자의 확장 + - * / % = + V += -= *= /= %=
  • 6. 연산자의 결합 방식 모든 연산자는 우선순위가 있다. 곱셈은 덧셈, 뺄셈보 다 우선순위가 높다. 즉, 덧셈 뺄셈 보다 먼저 수행된다 모든 연산자는 결합 방향을 가진다. 대입 연산자는 오른 쪽에서 왼쪽으로, 뺄셈은 왼쪽에서 오른쪽으로, 증감 연 산자(++, --)는 결합 방향을(전치, 후치) 변경할 수 있다. x 의 값은 -2이다.! 덧셈, 뺄셈의 우선순위는! 같기 때문에 좌측에서 우측으로 ! 결합되며 수행된다. y의 값은 7이다. 9라고 예상한다면 ! 수식의 의도를 우선순위와 결합방향과 ! 다르게 표현했기 때문이다.
  • 7. 연산자의 결합 방식 y 값이 7이 되는 과정. 곱셈의 우선순위가 높기 때문에 먼저 수행된 후 그 결과를 다음 우선순위인 덧셈과 결합된다. 1 2 y 값이 9가 되는 “의도” 가 있다면 그 의도를 괄호로 표현 하라. 괄호는 결합 우선순위를 명시적으로 지정할 수 있다. 2 1
  • 8. 문맥에 따라 기능이 달라지는 연산자 y 의 값은 각각 20, ‘1010’ 이다.! 어떻게 이런 결과가 나오는 것일까? +연산자는 좌변과 우변이 모두 숫자 (or 숫자를 담고있는 변 수)인 경우 산술 연산을 수행하고 하나라도 문자인 경우 숫자 를 문자형으로 변환(Type Casting)한 후 “결합”한다
  • 9. 명시적인 형변환 방법 y 의 값은 문자열 ‘1010’ 이다.! 값을 문자열로 변경하는 String() 함수를 이용하여! x 값을 문자열로 변경한 후 + 로 우변과 결합한다. y의 값은 20이다.! 문자 ’10’을 담고 있는 변수 x 에 ! + (양수) 연산자를 이용하여 숫자로! 변환하는 형변환을 강제로 발생시킨 후! 우변과 사칙연산이 수행된다. y의 값은 20이다.! +x 방식과 동일하나 보다 명시적인 숫자 형변환 함수를 이용했다.