Javascript introduction, dynamic data type, operator

스파르탄 스터디
CH.01. JS Intro. Data Type

1. 빠르게 훑어 보는
자바스크립트의 흐름
2. 적응 안되는 데이터 타입
3. 모르면 다치는 연산자
4. 이해가 필요한 객체와 배열
+@ 꼭 알아야 될 것들 몇 가지

Javascript
공부할게 있나?
페이지 전체
새로 고침
Validation
체크 정도
간단한 이벤
트 발생
1. 빠르게 훑어 보는 자바스크립트의 흐름

AJAX의 등장
Sync -> Async
하드웨어↑
Javascript 엔
진의 발전

활용범위 확대
SPA(Single Page Application)
하이브리드 웹앱
Node.js

인기가 아주 그냥
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스크립트

3. 익숙하지 않은 연산자

데이터 타입은 몇 가지?
Undefined
Null
Boolean
String
Number
and Object

Java와 다른 점 몇 가지
* Dynamic typing
숫자를 표현하는데에 Number type 하나만 존재, 소수 표현에
부동소수점 사용
String의 표현에 Double/Single quotation 둘 다 사용 가능
String이 참조타입이 아닌 기본타입.

* Dynamic typing
// 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.
변수를 선언할때 타입을 지정하지 않아도 된다.
=> 코드 실행시에 문맥에 따라 데이터 타입이 결
정된다.

이것이 가능한 이유?
실행 시점의 문맥에 따라 변수를 Wrapper Class로 감싼다.
이 Wrapper 객체는 사용이 끝나면 시스템이 회수해간다.
* Wrapper Class :
자바스크립트에는 세 가지 핵심 기본 데이터 타입 각각에 대응되는 Wrapper 클래스가
정의되어 있다. Wrapper는 기본 데이터 타입 값과 동일한 값을 담고 있고, 데이터 조작
을 위한 프로퍼티와 메서드도 가지고 있다.
* Dynamic typing

+, -, *, /, ! 5가지의 연산자를 통해 타입이 어떻게 변하는지 보자
+ 연산자의 작동방식은 피연산자중 하나라도 String형이 있으면 나머지 피연산자를 String 형으로 변
환
그렇지 않으면 모든 피연산자를 Number형으로 변환한다.
나머지 사칙연산자 -, *, / 는 모든 피연산자를 Number type으로 변환
'123' + 123;
'123' - 123;
'123' * 123;
'123' / '123';
! 연산자는 피연산자를 Boolean 형으로 변환한다.
!'123';
!'';
!123;
!false;
* Dynamic typing

이러한 성질을 이용하면 형변환을 간단히 할 수 있다.
- string 형으로 변환
var x = 123;
x += '';
- number 형으로 변환 (*, -, / 연산자를 활용)
var x = '123'
x *= 1;
- Boolean 형으로 변환
var x = '';
x = !!x;
* Dynamic typing

Wrapper Class로 변환
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);

기본타입과 참조타입
Javascript의 Primitive types 를 제외한 나머지 모든 객체는 참조타입.
Java의 String이 참조타입인 것과 대조된다.

== 연산자
==, != 연산자 : 값을 비교 -> 자동 형변환이 발생
The Abstract Equality Comparison Algorithm
http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
'' == 0;
undefined == null;

=== 연산자
The Strict Equality Comparison Algorithm
http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6
===, !== 연산자 : 값과 타입을 비교 -> 타입 변환이 발생하지 않음.
'' === 0;
* 정확한 비교를 위해서는 ==, != 보다는 ===, !== 사용 권장

&&, || 연산자
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")}();

&&, || 연산자
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")}();

&&, || 연산자
* 공통적으로 적용되는 원리는 가장 왼쪽의 표현식부터 평가된다는 점이다.
&& 연산자는 나열된 표현식의 Boolean 처리 결과가 true인지 확인한다. 즉, 왼쪽의 표현식부터 순서
대로 하나씩 확인하며 모두 true인지 검사한다. 만약 표현식의 처리결과가 false 경우에는 해당 시점
의 표현식을 리턴한다. 만약에 모두 true라면 마지막의 표현식이 리턴된다.
|| 연산자는 반대로 하나라도 true가 있는지 확인하며, 모두 false인 경우 마지막의 표현식이 리턴된다.

&&, || 연산자
|| 연산자는 반대로 하나라도 true가 있는지 확인하며, 모두 false인 경우 마지막의 표현식이 리턴된다.
var x = (0 || false || "" || null || undefined); // ?
var x = (0 || false && "a" || null || undefined); // ?
var x = (0 || true && "a" || null || undefined); // ?
* 위와 같은 방식은 표현식의 값에 따라 원치 않는 작동을 할 수 있으므로 &&, ||는 true, false를 판별
하는 용도로만 확인하는 것을 권장

생성방법
객체 : {}, new object()
var obj = {};
var obj = new Object();
배열 : [], new Array()
var arr = []
var arr = new Array()

Javascript 배열의 특수한 점
* Javascript 배열의 특수한 점은 배열의 길이가 동적으로 변한다는 점
length 속성의 값을 조정함으로써 배열의 크기를 확장하거나 축소시킬 수 있다.
그리고 다양한 자료형을 담을 수 있다. <- 당연한 이야기 (dynamic typing)
var arr = []; // arr.length == 0
arr.push(1); // arr.length == 1
arr.pop(); // arr.length == 2
arr.length = 1; // 나머지 요소는 삭제
arr.length = 5; // 나머지 요소는 undefined

유사배열
객체, 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는 이름으로만 참조.

* 출처 :
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 - 송형주, 고현준
프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스
우리 머리에 주먹질을 해 대는 책이 아니라면, 우리가 왜 그런 책을 읽어야 한단 말인가?
- 프란츠 카프카

Javascript introduction, dynamic data type, operator

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Javascript introduction, dynamic data type, operator

Ähnlich wie Javascript introduction, dynamic data type, operator (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

Javascript introduction, dynamic data type, operator