프론트엔드스터디 e03 - javascript intro
TRANSCRIPT
프론트엔드 스터디CH.03. JS intro.
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들 몇 가지
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들
Javascript 공부할게 있나 ?
페이지 전체 새로 고침
Validation 체크 정도
간단한 이벤트 발생
1. 빠르게 훑어 보는 자바스크립트의 흐름
AJAX 의 등장
Sync -> Async
하드웨어↑Javascript 엔진의 발전
1. 빠르게 훑어 보는 자바스크립트의 흐름
활용범위 확대
SPA(Single Page Applica-tion)
하이브리드 웹앱
Node.js
1. 빠르게 훑어 보는 자바스크립트의 흐름
인기가 아주 그냥
Best Programming Language 2015
1. 빠르게 훑어 보는 자바스크립트의 흐름
단어로 보는 역사
Brendan Eich
Mocha -> Live Script -> Javascript<-> Jscript
ECMA(European Computer Manufacturers Association)- 문법과 의미를 표준화하여 일반적인 목적에 쓸 수 있고 플랫폼을 가리지 않으며 제조사에 중립인 스크립트 언어
TC39 - 넷스케이프 , 마이크로소프트 , 선 , 볼랜드 , NOMBAS 등
Javascript 1.0 -> 1.1 -> ECMA-262 -> 2 판 -> 3 판 -> 4 판 ( 폐기 ) -> 5 판 -> 6 판https://ko.wikipedia.org/wiki/ECMA스크립트
1. 빠르게 훑어 보는 자바스크립트의 흐름
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 익숙하지 않은 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들
데이터 타입은 몇 가지 ?
2. 적응 안되는 데이터 타입
UndefinedNull
BooleanString
Number
and Object
typeof 연산자로 확인 가능
Java 와 다른 점 몇 가지
* Dynamic typing
숫자를 표현하는데에 Number type 하나만
존재 , 소수 표현에 부동소수점 사용
String 의 표현에 Double/Single quotation 둘 다 사용 가능
String 이 참조타입이 아닌 기본타입 .
2. 적응 안되는 데이터 타입
* Dynamic typing
2. 적응 안되는 데이터 타입
* Dynamic typing
Dynamic typing = Javascript is a loosly typed of dynamic language. (spec.) 변수를 선언할때 타입을 지정하지 않아도
된다 . => 코드 실행시에 “문맥”에 따라 데이터
타입이 결정된다 .
// Java 개발자에게 익숙한 형태// int a = 1;
// 하지만 ...var a;a = null;a = 1;a = 'str';a = [];a = {};
이것이 가능한 이유 ?
2. 적응 안되는 데이터 타입
실행 시점의 문맥에 따라 변수를 Wrapper Class 로 감싼다 . 이 Wrapper 객체는 사용이 끝나면 시스템이 회수해간다 .
* Wrapper Class :
자바스크립트에는 세 가지 핵심 기본 데이터 타입 각각에
대응되는 Wrapper 클래스가 정의되어 있다 . Wrapper 는 기본
데이터 타입 값과 동일한 값을 담고 있고 , 데이터 조작을 위한
프로퍼티와 메서드도 가지고 있다 .
* Dynamic typing
+, -, *, /, ! 5 가지의 연산자를 통해 타입이 어떻게 변하는지 보자
2. 적응 안되는 데이터 타입
+ 연산자의 작동방식은 피연산자중 하나라도 String 형이 있으면 나머지
피연산자를 String 형으로 변환
그렇지 않으면 모든 피연산자를 Number 형으로 변환한다 .나머지 사칙연산자 -, *, / 는 모든 피연산자를 Number type 으로 변환
* Dynamic typing
'123' + 123;'123' - 123;'123' * 123;'123' / '123';
! 연산자는 피연산자를 Boolean 형으로 변환한다 .!'123';!'';!123;!false;
이러한 성질을 이용하면 형변환을 간단히 할 수 있다 .
2. 적응 안되는 데이터 타입
* Dynamic typing
// string 형으로 변환var x = 123;x += '';
// number 형으로 변환 (*, -, / 연산자를 활용 )var x = '123'x *= 1;
// Boolean 형으로 변환var x = '';x = !!x;
기본타입과 참조타입
2. 적응 안되는 데이터 타입
Javascript 의 Primitive types 를 제외한 나머지 모든
데이터타입은 참조타입 . Java 의 String 이 참조타입인 것과 대조된다 .
// 기본타입var a = 1;var b = a;a = 2;console.log('a : ', a, ' / ', 'b : ', b);
// 참조타입var a = {k:1};var b = a;a.k = 2;console.log('a : ', a, ' / ', 'b : ', b);
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들
== 연산자
3. 모르면 다치는 연산자
==, != 연산자 : 값을 비교 -> 경우에 따라 자동 형변환이 발생
The Abstract Equality Comparison Algorithmhttp://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
'' == 0;undefined == null;true == 1;false == 0;'1234' == 1234;
=== 연산자
===, !== 연산자 : 값과 타입 모두를 비교 -> 자동 형변환이
발생하지 않음 .
The Strict Equality Comparison Algorithmhttp://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6
* 정확한 비교를 위해서는 ==, != 보다는 ===, !== 사용
권장
'' === 0;undefined === null;true === 1;
3. 모르면 다치는 연산자
() - Grouping operator1 + 2 * 3 == 7;(1 + 2) * 3 == 9;
({}).__proto__.constructor === Object;
(1==true) && (function(){ console.log('1==true')})();
3. 모르면 다치는 연산자
* 연산 우선순위를 지정할 수 있다 .* () 안에 있는 식의 연산 결과를 받아서 사용할 수 있다 .
&&, || 연산자
3. 모르면 다치는 연산자
var x = (1 && true && "str" && {}); // ?var x = (1 || true || "str" || {}); // ?var x = (1 && true || "str" || {}); // ?
if(a==b) stop();(a==b) && stop(); // 이런 경우에는 if 를 쓰는 편이 좋다 .
아래 연산의 결과를 예상해보자 .
&&, || 연산자 원리
* 공통적으로 적용되는 원리는 가장 왼쪽의 표현식부터 평가된다는 점이다 .
&& 연산자는 나열된 표현식의 Boolean 처리 결과가 true 인지 확인한
다 . 즉 , 왼쪽의 표현식부터 순서대로 하나씩 확인하며 모두 true 인지
검사한다 . 만약 표현식의 처리결과가 false 경우에는 해당 시점의
표현식을 리턴한다 . 만약에 모두 true 라면 마지막의 표현식이 리턴된다 .
3. 모르면 다치는 연산자
&&, || 연산자 원리
|| 연산자는 반대로 하나라도 true 가 있는지 확인하며 , 모두
false 인 경우 마지막의 표현식이 리턴된다 .
3. 모르면 다치는 연산자
var x = (0 || false || "" || null || undefined); // ?var x = (0 || false && "a" || null || undefined); // ?var x = (0 || true && "a" || null || undefined); // ?
* 위와 같은 방식은 표현식의 값에 따라 원치 않는 작동을 할 수
있으므로 &&, || 는 true, false 를 판별하는 용도로만 확인하는 것을
권장
연산자 정리
연산자의 성격에 따라 연산의 대상이 되는 데이터의 타입이 변한다 .=> 연산자를 보고 어떤 데이터타입이 될지 추론할 수 있어야 한다 .
예 )논리 연산자 (&&, || 등 ) : Boolean 형
산술 연산자 (+, -, *, / 등 ) : Number 형
부정 연산자 (!) : Boolean 형
3. 모르면 다치는 연산자
1. 빠르게 훑어 보는 자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들
선언방법
4. 이해가 필요한 객체와 배열
// 객체 : {}, new object()
var obj = {};var obj = new Object();
// 배열 : [], new Array()
var arr = []var arr = new Array();
* new 를 쓰기 보다는 단순한 형태를 선호 . 줄여서 표현하는 것이 미덕 .
선언방법에 따른 실행소요시간 성능테스트
4. 이해가 필요한 객체와 배열
var arr = new Array(); var arr = [];
http://jindo.dev.naver.com/jsMatch/index.html?d=11&openResult=1
선언방법에 따른 실행소요시간 성능테스트
4. 이해가 필요한 객체와 배열
http://jindo.dev.naver.com/jsMatch/index.html?d=14&openResult=1
var obj = new Object();
var obj = {};
Javascript 배열의 특수한 점
4. 이해가 필요한 객체와 배열
* Javascript 배열의 특수한 점은 배열의 길이가 동적으로 변한다는 점과
length 속성의 값을 조정함으로써 배열의 크기를 확장하거나 축소시킬 수
있다는 점이다 .그리고 다양한 자료형을 담을 수 있다 . <- 당연한 이야기 (dynamic typ-ing)
var arr = []; // arr.length == 0arr.push(1); // arr.length == 1arr.push(2); // arr.length == 2arr.push(3); // arr.length == 3arr.pop(); // arr.length == 2arr.length = 1; // 나머지 요소는 삭제arr.length = 5; // 나머지 요소는 undefined
유사배열
4. 이해가 필요한 객체와 배열
객체 , String wrapper class, document.getElementsByTag-Name("div") 등 배열과 유사한 구조
var obj = {a:1, b:2, c:3};for(idx in obj) { console.log(obj[idx]);};
var str_wrapper = new String('abcdefg');console.dir(str_wrapper);
console.dir(document.getElementsByTagName("div"));
1. 빠르게 훑어 보는 자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들
+@ 꼭 알아야 될 것들 몇 가지
1. 함수 선언문 해석
2. 변수 초기화
3. 자바스크립트코드 실행
자바스크립트 엔진 해석
변수 선언 , 함수선언문을 읽기 전에 이미 square 가 function 으로 등록되어 있다 .
debugger;alert(square(4)); // ????var square = 0;function square(x) { return x*x;}alert(square); // ????
Function 에 사용되는 파라미터는 동적이다
동적 파라미터
function func(arr) { arr = arr || []; if (arr.length == 0) { console.log('Error') } else { console.log(arr) }}
func(); // 파라미터가 없을 때func([1,2,3]); // 파라미터가 있을 때
+@ 꼭 알아야 될 것들 몇 가지
동적 파라미터
이것이 가능한 이유는 Arguments 오브젝트 때문
=> 파라미의 type 이나 갯수로 함수의 오버로딩이 불가능 . Javascrip 는 이름으로만 참조 .
+@ 꼭 알아야 될 것들 몇 가지
function printArg() { console.log(arguments);}printArg(1);printArg(1,'a');printArg(1,'a',{},[1,2,3]);
+@ 꼭 알아야 될 것들 : Script 위치
Script 선언 위치
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Script 선언위치 </title> <script> debugger; console.log('script tag 가 body 위에 선언된 경우 : ' + document.body); </script></head><body> Script tag 를 선언하기에 적당한 장소는 어디일까요 ? <script> console.log('script tag 가 body 안에 선언된 경우 : ' + document.body); </script></body></html>
+@ 꼭 알아야 될 것들 : Script 위치
HTML, CSS, Script 의 바른 위치
종합<!DOCTYPE html><html lang="en"><head> <!-- head 에는 meta 정보를 작성합니다 . --> <meta charset="UTF-8"> <title>html, css, script 선언위치 </title> <!-- css import 위치 --> <link rel="stylesheet" src="/css/myCss.css"/> <style> /* css 를 파일 내부에서 정의할 경우 여기에 기재합니다 . */ span { color: red; } </style></head><body> body 에 기재 할 Contents <!-- script import 위치 --> <script src="/js/myJs.js"></script> <script> debugger; document.body.innerHTML = "<span>Script 로 추가한 Contents</span>"; </script></body></html>
* 출처 : ECMA5 Specification : http://www.ecma-international.org/ecma-262/5.1/MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures자바스크립트 완벽 가이드 5/E - 데이비드 플래너건
몰입 ! 자바스크립트 – 김영보
프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스
NHN 은 이렇게 한다 ! 자바스크립트 성능 이야기 - 박재성 , 심상민 , 양정권 , 황준호
우리 머리에 주먹질을 해 대는 책이 아니라면 , 우리가 왜 그런 책을 읽어야 한단
말인가 ? - 프란츠 카프카