Post on 13-Apr-2017
스파르탄 스터디CH.01. JS Intro. Data Type
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들 몇 가지
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
Javascript 공부할게 있나 ?
페이지 전체 새로 고침
Validation 체크 정도
간단한 이벤트 발생
1. 빠르게 훑어 보는 자바스크립트의 흐름
AJAX 의 등장Sync -> Async
하드웨어↑Javascript 엔진의 발전
1. 빠르게 훑어 보는 자바스크립트의 흐름
활용범위 확대
1. 빠르게 훑어 보는 자바스크립트의 흐름
SPA(Single Page Application)
하이브리드 웹앱
Node.js
인기가 아주 그냥
1. 빠르게 훑어 보는 자바스크립트의 흐름
Best Programming Language 2015
단어로 보는 역사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
Java 와 다른 점 몇 가지
2. 적응 안되는 데이터 타입
* Dynamic typing
숫자를 표현하는데에 Number type 하나만 존재 , 소수
표현에 부동소수점 사용
String 의 표현에 Double/Single quotation 둘 다 사용
가능
String 이 참조타입이 아닌 기본타입 .
* Dynamic typing
2. 적응 안되는 데이터 타입
// Java 개발자에게 익숙한 형태
int a = 1;
// 하지만 ...
var a;
a = null;
a = 1;
a = 'str';
a = [];
a = {};
* Dynamic typing
Dynamic typing = Javascript is a loosly typed of dynamic language. 변수를 선언할때 타입을 지정하지 않아도 된다 . => 코드 실행시에 문맥에 따라 데이터 타입이
결정된다 .
이것이 가능한 이유 ?
2. 적응 안되는 데이터 타입
실행 시점의 문맥에 따라 변수를 Wrapper Class 로 감싼다 . 이 Wrapper 객체는 사용이 끝나면 시스템이 회수해간다 .
* Wrapper Class :
자바스크립트에는 세 가지 핵심 기본 데이터 타입 각각에 대응되는 Wrapper 클래스가 정의되어 있다 . Wrapper 는 기본 데이터 타입 값과 동일한 값을 담고 있고 , 데이터 조작을 위한 프로퍼티와 메서드도 가지고 있다 .
* Dynamic typing
+, -, *, /, ! 5 가지의 연산자를 통해 타입이 어떻게 변하는지 보자
2. 적응 안되는 데이터 타입
+ 연산자의 작동방식은 피연산자중 하나라도 String 형이 있으면 나머지 피연산자를 String 형으로
변환
그렇지 않으면 모든 피연산자를 Number 형으로 변환한다 .나머지 사칙연산자 -, *, / 는 모든 피연산자를 Number type 으로 변환
'123' + 123;'123' - 123;'123' * 123;'123' / '123';
! 연산자는 피연산자를 Boolean 형으로 변환한다 .!'123';!'';!123;!false;
* Dynamic typing
이러한 성질을 이용하면 형변환을 간단히 할 수 있다 .
2. 적응 안되는 데이터 타입
- string 형으로 변환
var x = 123;x += '';
- number 형으로 변환 (*, -, / 연산자를 활용 )var x = '123'x *= 1;
- Boolean 형으로 변환
var x = '';x = !!x;
* Dynamic typing
Wrapper Class 로 변환
2. 적응 안되는 데이터 타입
var num_wrapper = new Object(3);console.dir(num_wrapper);
- 보다 명시적인 방식
new Number(1);new Boolean(true);
var str_wrapper = new String("It's String!");
console.dir(str_wrapper);
기본타입과 참조타입
2. 적응 안되는 데이터 타입
Javascript 의 Primitive types 를 제외한 나머지 모든 객체는 참조타입 .Java 의 String 이 참조타입인 것과 대조된다 .
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;
=== 연산자
The Strict Equality Comparison Algorithmhttp://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6
===, !== 연산자 : 값과 타입을 비교 -> 타입 변환이 발생하지 않음 .
'' === 0;
* 정확한 비교를 위해서는 ==, != 보다는 ===, !== 사용 권장
3. 모르면 다치는 연산자
&&, || 연산자var x = (1 && true && "str" && {}); // ?var x = (1 || true || "str" || {}); // ?
var x = (1 && true || "str" || {}); // ?
if(a==b) stop();(a==b) && stop();
(1==true) && function() {console.log("function's called")}();
3. 모르면 다치는 연산자
&&, || 연산자
var x = (1 && true && "str" && {}); // ?var x = (1 || true || "str" || {}); // ?
var x = (1 && true || "str" || {}); // ?
// 같은 표현
if(a==b) stop();(a==b) && stop();
(1==true) && function() {console.log("function's called")}();
3. 모르면 다치는 연산자
&&, || 연산자
* 공통적으로 적용되는 원리는 가장 왼쪽의 표현식부터 평가된다는 점이다 .
&& 연산자는 나열된 표현식의 Boolean 처리 결과가 true 인지 확인한다 . 즉 , 왼쪽의 표현식부터
순서대로 하나씩 확인하며 모두 true 인지 검사한다 . 만약 표현식의 처리결과가 false 경우에는
해당 시점의 표현식을 리턴한다 . 만약에 모두 true 라면 마지막의 표현식이 리턴된다 .
|| 연산자는 반대로 하나라도 true 가 있는지 확인하며 , 모두 false 인 경우 마지막의 표현식이
리턴된다 .
3. 모르면 다치는 연산자
&&, || 연산자
|| 연산자는 반대로 하나라도 true 가 있는지 확인하며 , 모두 false 인 경우 마지막의 표현식이
리턴된다 .
var x = (0 || false || "" || null || undefined); // ?var x = (0 || false && "a" || null || undefined); // ?var x = (0 || true && "a" || null || undefined); // ?
* 위와 같은 방식은 표현식의 값에 따라 원치 않는 작동을 할 수 있으므로 &&, || 는 true, false 를
판별하는 용도로만 확인하는 것을 권장
3. 모르면 다치는 연산자
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
생성방법
4. 이해가 필요한 객체와 배열
객체 : {}, new object()
var obj = {};var obj = new Object();
배열 : [], new Array()
var arr = []var arr = new Array()
Javascript 배열의 특수한 점
4. 이해가 필요한 객체와 배열
* Javascript 배열의 특수한 점은 배열의 길이가 동적으로 변한다는 점
length 속성의 값을 조정함으로써 배열의 크기를 확장하거나 축소시킬 수 있다 .그리고 다양한 자료형을 담을 수 있다 . <- 당연한 이야기 (dynamic typing)
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.getElementsByTagName("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. 자바스크립트코드 실행
debugger;alert(square(4)); // ????var square = 0;function square(x) { return x*x;}alert(square); // ????
자바스크립트 엔진 해석
변수 선언 , 함수선언문을 읽기 전에 이미 square 가 function으로 등록되어 있다 .
+@ 꼭 알아야 될 것들 몇 가지
Function 에 사용되는 파라미터는 동적이다
동적 파라미터
function func(arr) { arr = arr || []; if (arr.length == 0) { console.log('Error') } else { console.log(arr) }}
func(); // 파라미터가 없을 때func([1,2,3]); // 파라미터가 있을 때
+@ 꼭 알아야 될 것들 몇 가지
동적 파라미터
function printArg() { console.log(arguments);}printArg(1);printArg(1,'a');printArg(1,'a',{},[1,2,3]);
이것이 가능한 이유는 Arguments 오브젝트 때문
=> 파라미의 type 이나 갯수로 함수의 오버로딩이 불가능 . Javascrip 는 이름으로만 참조 .
4. 이해가 필요한 객체와 배열
* 출처 :
ECMA5 Specification : http://www.ecma-international.org/ecma-262/5.1/MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures자바스크립트 완벽 가이드 5/E - 데이비드 플래너건
몰입 ! 자바스크립트 - 김영보
Inside Javascript - 송형주 , 고현준
프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스
우리 머리에 주먹질을 해 대는 책이 아니라면 , 우리가 왜 그런 책을 읽어야 한단 말인가 ? - 프란츠 카프카