SlideShare a Scribd company logo
1 of 61
Download to read offline
자바스크립트
제대로 알고 쓰기
박민
박민
리액트망스터
자바스크립트 개발자
자바스크립트
체기반 스크립트 프로그래밍 어
웹브라우저에 주로 사용되는 어
오
대충해도 돌아간다
배우지 않는다
틀리기 전까지
할 수 있는 거
서버
Node.js
웹
React, Vue, Angular
모바일
ReactNative, NativeScript
데스크탑
Electron, NW
VR
React VR
엉망 같지만 잘 돌아간다
자바스크립트
제대로 알기
타입, 호이스팅, 클로져
자바스크립트는 타입이 없다?
var로 선언하잖아?
var타입인가?
•null
•undefined
•boolean
•number
•string
•object
•symbol (ES6+)
null undefined== // true
null undefined=== // false
==
===
값을 비교한다
값과 타입을 비교한다
==
===
강제변환이 허용된다
강제변환이 허용되지 않는다
값을 비교한다
값과 타입을 비교한다
==
===
강제변환이 허용된다
강제변환이 허용되지 않는다
값을 비교한다
값과 타입을 비교한다
“42” == 42
“42” === 42
// true
// false
==
===
강제변환이 허용된다
강제변환이 허용되지 않는다
값을 비교한다
값과 타입을 비교한다
느슨한 동등비교
엄격한 동등비교
=== 권장
하지만, null과 undefined는 ==도 권장
if( voidFunc() == null ){
…
}
이거 보단
if( voidFunc() === null &&
voidFunc() === undefined ){
…
}
•“0” == false // true
•false == 0 // true
•false == “” // true
•false == [ ] // true
•“” == 0 //true
•“” == [ ] // true
•0 == [ ] // true
한쪽이라도 true/false 값이 나올거 같다면
한쪽이라도 [],””,0이 될 가능성이 있다면
한쪽이라도 true/false 값이 나올거 같다면
한쪽이라도 [],””,0이 될 가능성이 있다면
=== 을 쓰자
호이스팅
호스팅도아님
둘리가아니다 선언문이
스코프의 꼭대기로
끌어올려지는 것
호이스팅
호스팅도아님
둘리가아니다 선언문이
스코프의 꼭대기로
끌어올려지는 것
호이스팅
구문분리
끌어올리기
호이스팅
구문분리
끌어올리기
선언문 대입문
1. 참조에러
2. undefined
3. 2
1. 참조에러
2. undefined
3. 2
호이스팅
선언문이
스코프의 꼭대기로
끌어올려지는 것
클로져
스코프의 외부에
스코프를 참조하여 접근
1. 2
2. 32
1. 2
2. 32
5, 5, 5, 5, 5
IIFE
즉시호출함수표 식
뭐라는거야
0, 1, 2, 3, 4
let
블록 스코프 변수 선언
0, 1, 2, 3, 4
0, 1, 2, 3, 4
팁 이제부터 팁나갑니다보자마자 쓸 수 있는
자바스크립트
잠재력이 많은 어
감사합니다
끝
질문있으신가요?
???끝???
메일 :
zooqzqz@gmail.com
더 궁금한 점이 있으시다면
감사합니다
진짜 끝

More Related Content

What's hot

More effective c++ 3
More effective c++ 3More effective c++ 3
More effective c++ 3현찬 양
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4현찬 양
 
Jsp convert to Servlet
Jsp convert to ServletJsp convert to Servlet
Jsp convert to ServletJU Chae
 
Effective c++ 1
Effective c++ 1Effective c++ 1
Effective c++ 1현찬 양
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드Sukjoon Kim
 
Effective C++ Chapter 1 Summary
Effective C++ Chapter 1 SummaryEffective C++ Chapter 1 Summary
Effective C++ Chapter 1 SummarySeungYeonChoi10
 
Effective c++ item9
Effective c++ item9Effective c++ item9
Effective c++ item9진화 손
 
M5 6 1
M5 6 1M5 6 1
M5 6 1nexthw
 
Welcome to ruby!
Welcome to ruby!Welcome to ruby!
Welcome to ruby!성훈 김
 
Mvc 패턴
Mvc 패턴Mvc 패턴
Mvc 패턴Seokju Hong
 

What's hot (11)

More effective c++ 3
More effective c++ 3More effective c++ 3
More effective c++ 3
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4
 
Jsp convert to Servlet
Jsp convert to ServletJsp convert to Servlet
Jsp convert to Servlet
 
1 2 1
1 2 11 2 1
1 2 1
 
Effective c++ 1
Effective c++ 1Effective c++ 1
Effective c++ 1
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드
 
Effective C++ Chapter 1 Summary
Effective C++ Chapter 1 SummaryEffective C++ Chapter 1 Summary
Effective C++ Chapter 1 Summary
 
Effective c++ item9
Effective c++ item9Effective c++ item9
Effective c++ item9
 
M5 6 1
M5 6 1M5 6 1
M5 6 1
 
Welcome to ruby!
Welcome to ruby!Welcome to ruby!
Welcome to ruby!
 
Mvc 패턴
Mvc 패턴Mvc 패턴
Mvc 패턴
 

Recently uploaded

JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP Korea
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법JMP Korea
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석JMP Korea
 
JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP Korea
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?Jay Park
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP Korea
 
공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화JMP Korea
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP Korea
 

Recently uploaded (8)

JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
 
JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례
 
공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
 

자바스크립트 제대로 알고쓰기