![Page 1: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/1.jpg)
스파르탄 스터디CH.01. JS Intro. Data Type
![Page 2: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/2.jpg)
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들 몇 가지
![Page 3: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/3.jpg)
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
![Page 4: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/4.jpg)
Javascript 공부할게 있나 ?
페이지 전체 새로 고침
Validation 체크 정도
간단한 이벤트 발생
1. 빠르게 훑어 보는 자바스크립트의 흐름
![Page 5: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/5.jpg)
AJAX 의 등장Sync -> Async
하드웨어↑Javascript 엔진의 발전
1. 빠르게 훑어 보는 자바스크립트의 흐름
![Page 6: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/6.jpg)
활용범위 확대
1. 빠르게 훑어 보는 자바스크립트의 흐름
SPA(Single Page Application)
하이브리드 웹앱
Node.js
![Page 7: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/7.jpg)
인기가 아주 그냥
1. 빠르게 훑어 보는 자바스크립트의 흐름
Best Programming Language 2015
![Page 8: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/8.jpg)
단어로 보는 역사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. 빠르게 훑어 보는 자바스크립트의 흐름
![Page 9: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/9.jpg)
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 익숙하지 않은 연산자
4. 이해가 필요한 객체와 배열
![Page 10: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/10.jpg)
데이터 타입은 몇 가지 ?
2. 적응 안되는 데이터 타입
UndefinedNull
BooleanString
Number
and Object
![Page 11: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/11.jpg)
Java 와 다른 점 몇 가지
2. 적응 안되는 데이터 타입
* Dynamic typing
숫자를 표현하는데에 Number type 하나만 존재 , 소수
표현에 부동소수점 사용
String 의 표현에 Double/Single quotation 둘 다 사용
가능
String 이 참조타입이 아닌 기본타입 .
![Page 12: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/12.jpg)
* 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. 변수를 선언할때 타입을 지정하지 않아도 된다 . => 코드 실행시에 문맥에 따라 데이터 타입이
결정된다 .
![Page 13: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/13.jpg)
이것이 가능한 이유 ?
2. 적응 안되는 데이터 타입
실행 시점의 문맥에 따라 변수를 Wrapper Class 로 감싼다 . 이 Wrapper 객체는 사용이 끝나면 시스템이 회수해간다 .
* Wrapper Class :
자바스크립트에는 세 가지 핵심 기본 데이터 타입 각각에 대응되는 Wrapper 클래스가 정의되어 있다 . Wrapper 는 기본 데이터 타입 값과 동일한 값을 담고 있고 , 데이터 조작을 위한 프로퍼티와 메서드도 가지고 있다 .
* Dynamic typing
![Page 14: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/14.jpg)
+, -, *, /, ! 5 가지의 연산자를 통해 타입이 어떻게 변하는지 보자
2. 적응 안되는 데이터 타입
+ 연산자의 작동방식은 피연산자중 하나라도 String 형이 있으면 나머지 피연산자를 String 형으로
변환
그렇지 않으면 모든 피연산자를 Number 형으로 변환한다 .나머지 사칙연산자 -, *, / 는 모든 피연산자를 Number type 으로 변환
'123' + 123;'123' - 123;'123' * 123;'123' / '123';
! 연산자는 피연산자를 Boolean 형으로 변환한다 .!'123';!'';!123;!false;
* Dynamic typing
![Page 15: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/15.jpg)
이러한 성질을 이용하면 형변환을 간단히 할 수 있다 .
2. 적응 안되는 데이터 타입
- string 형으로 변환
var x = 123;x += '';
- number 형으로 변환 (*, -, / 연산자를 활용 )var x = '123'x *= 1;
- Boolean 형으로 변환
var x = '';x = !!x;
* Dynamic typing
![Page 16: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/16.jpg)
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);
![Page 17: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/17.jpg)
기본타입과 참조타입
2. 적응 안되는 데이터 타입
Javascript 의 Primitive types 를 제외한 나머지 모든 객체는 참조타입 .Java 의 String 이 참조타입인 것과 대조된다 .
![Page 18: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/18.jpg)
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
![Page 19: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/19.jpg)
== 연산자
3. 모르면 다치는 연산자
==, != 연산자 : 값을 비교 -> 자동 형변환이 발생
The Abstract Equality Comparison Algorithmhttp://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
'' == 0;undefined == null;
![Page 20: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/20.jpg)
=== 연산자
The Strict Equality Comparison Algorithmhttp://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6
===, !== 연산자 : 값과 타입을 비교 -> 타입 변환이 발생하지 않음 .
'' === 0;
* 정확한 비교를 위해서는 ==, != 보다는 ===, !== 사용 권장
3. 모르면 다치는 연산자
![Page 21: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/21.jpg)
&&, || 연산자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. 모르면 다치는 연산자
![Page 22: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/22.jpg)
&&, || 연산자
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. 모르면 다치는 연산자
![Page 23: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/23.jpg)
&&, || 연산자
* 공통적으로 적용되는 원리는 가장 왼쪽의 표현식부터 평가된다는 점이다 .
&& 연산자는 나열된 표현식의 Boolean 처리 결과가 true 인지 확인한다 . 즉 , 왼쪽의 표현식부터
순서대로 하나씩 확인하며 모두 true 인지 검사한다 . 만약 표현식의 처리결과가 false 경우에는
해당 시점의 표현식을 리턴한다 . 만약에 모두 true 라면 마지막의 표현식이 리턴된다 .
|| 연산자는 반대로 하나라도 true 가 있는지 확인하며 , 모두 false 인 경우 마지막의 표현식이
리턴된다 .
3. 모르면 다치는 연산자
![Page 24: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/24.jpg)
&&, || 연산자
|| 연산자는 반대로 하나라도 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. 모르면 다치는 연산자
![Page 25: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/25.jpg)
1. 빠르게 훑어 보는자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
![Page 26: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/26.jpg)
생성방법
4. 이해가 필요한 객체와 배열
객체 : {}, new object()
var obj = {};var obj = new Object();
배열 : [], new Array()
var arr = []var arr = new Array()
![Page 27: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/27.jpg)
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
![Page 28: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/28.jpg)
유사배열
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"));
![Page 29: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/29.jpg)
+@ 꼭 알아야 될 것들 몇 가지
1. 함수 선언문 해석
2. 변수 초기화
3. 자바스크립트코드 실행
debugger;alert(square(4)); // ????var square = 0;function square(x) { return x*x;}alert(square); // ????
자바스크립트 엔진 해석
변수 선언 , 함수선언문을 읽기 전에 이미 square 가 function으로 등록되어 있다 .
![Page 30: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/30.jpg)
+@ 꼭 알아야 될 것들 몇 가지
Function 에 사용되는 파라미터는 동적이다
동적 파라미터
function func(arr) { arr = arr || []; if (arr.length == 0) { console.log('Error') } else { console.log(arr) }}
func(); // 파라미터가 없을 때func([1,2,3]); // 파라미터가 있을 때
![Page 31: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/31.jpg)
+@ 꼭 알아야 될 것들 몇 가지
동적 파라미터
function printArg() { console.log(arguments);}printArg(1);printArg(1,'a');printArg(1,'a',{},[1,2,3]);
이것이 가능한 이유는 Arguments 오브젝트 때문
=> 파라미의 type 이나 갯수로 함수의 오버로딩이 불가능 . Javascrip 는 이름으로만 참조 .
![Page 32: Javascript introduction, dynamic data type, operator](https://reader034.vdocuments.pub/reader034/viewer/2022051503/588a72201a28ab336f8b6463/html5/thumbnails/32.jpg)
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 - 송형주 , 고현준
프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스
우리 머리에 주먹질을 해 대는 책이 아니라면 , 우리가 왜 그런 책을 읽어야 한단 말인가 ? - 프란츠 카프카