Javascript 흐름, 동적데이터타입(Dynamic typing), 연산자, 객체, 배열, 동적 파라미터, Script 선언위치 등 Javascript를 처음 접했을때 꼭 이해해야 되는 내용들에 대해서 알아봅니다.

1. 프론트엔드 스터디
CH.03. JS intro.

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

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

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

5. AJAX의 등장
Sync -> Async
하드웨어↑
Javascript 엔
진의 발전
1. 빠르게 훑어 보는 자바스크립트의 흐름

6. 활용범위 확대
SPA(Single Page Application)
하이브리드 웹앱
Node.js
1. 빠르게 훑어 보는 자바스크립트의 흐름

7. 인기가 아주 그냥
Best Programming Language 2015
1. 빠르게 훑어 보는 자바스크립트의 흐름

8. 단어로 보는 역사
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. 빠르게 훑어 보는 자바스크립트의 흐름

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

10. 데이터 타입은 몇 가지?
2. 적응 안되는 데이터 타입
Undefined
Null
Boolean
String
Number
and Object
typeof 연산자로 확인 가능

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

12. * Dynamic typing
2. 적응 안되는 데이터 타입
* Dynamic typing
Dynamic typing = Javascript is a loosly ty
ped of dynamic language. (spec.)
변수를 선언할때 타입을 지정하지 않아도
된다.
=> 코드 실행시에 “문맥”에 따라 데이터
타입이 결정된다.
// Java 개발자에게 익숙한 형
태
// int a = 1;
// 하지만...
var a;
a = null;
a = 1;
a = 'str';
a = [];
a = {};

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

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

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

16. 기본타입과 참조타입
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);

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

18. == 연산자
3. 모르면 다치는 연산자
==, != 연산자 : 값을 비교 -> 경우에 따라 자동 형변환이 발생
The Abstract Equality Comparison Algorithm
http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
'' == 0;
undefined == null;
true == 1;
false == 0;
'1234' == 1234;

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

20. () - Grouping operator
1 + 2 * 3 == 7;
(1 + 2) * 3 == 9;
({}).__proto__.constructor === Object;
(1==true) && (function(){
console.log('1==true')
})();
3. 모르면 다치는 연산자
* 연산 우선순위를 지정할 수 있다.
* () 안에 있는 식의 연산 결과를 받아서 사용할 수 있다.

21. &&, || 연산자
3. 모르면 다치는 연산자
var x = (1 && true && "str" && {}); // ?
var x = (1 || true || "str" || {}); // ?
var x = (1 && true || "str" || {}); // ?
if(a==b) stop();
(a==b) && stop(); // 이런 경우에는 if를 쓰는 편이 좋다.
아래 연산의 결과를 예상해보자.

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

23. &&, || 연산자 원리
|| 연산자는 반대로 하나라도 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를 판별하는 용도로만 확인하는 것을 권장

24. 연산자 정리
연산자의 성격에 따라 연산의 대상이 되는 데이터의 타입이 변한다.
=> 연산자를 보고 어떤 데이터타입이 될지 추론할 수 있어야 한다.
예)
논리 연산자(&&, || 등) : Boolean 형
산술 연산자(+, -, *, / 등) : Number 형
부정 연산자(!) : Boolean 형
3. 모르면 다치는 연산자

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

26. 선언방법
4. 이해가 필요한 객체와 배열
// 객체 : {}, new object()
var obj = {};
var obj = new Object();
// 배열 : [], new Array()
var arr = []
var arr = new Array();
* new를 쓰기 보다는 단순한 형태를 선호.
줄여서 표현하는 것이 미덕.

27. 선언방법에 따른 실행소요시간 성능테스트
4. 이해가 필요한 객체와 배열
var arr = new Array();
var arr = [];
http://jindo.dev.naver.com/jsMatch/index.html?d=11&openResult=1

28. 선언방법에 따른 실행소요시간 성능테스트
4. 이해가 필요한 객체와 배열
http://jindo.dev.naver.com/jsMatch/index.html?d=14&openResult=1
var obj = new Object();
var obj = {};

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

30. 유사배열
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"));

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

32. +@ 꼭 알아야 될 것들 몇 가지
1. 함수 선언문 해석
2. 변수 초기화
3. 자바스크립트코드 실행
자바스크립트 엔진 해석
변수 선언, 함수선언문을 읽기 전에 이미 square
가 function으로 등록되어 있다.
debugger;
alert(square(4)); // ????
var square = 0;
function square(x) {
return x*x;
}
alert(square); // ????

33. Function에 사용되는 파라미터는 동적이다
동적 파라미터
function func(arr) {
arr = arr || [];
if (arr.length == 0) {
console.log('Error')
} else {
console.log(arr)
}
}
func(); // 파라미터가 없을 때
func([1,2,3]); // 파라미터가 있을 때
+@ 꼭 알아야 될 것들 몇 가지

34. 동적 파라미터
이것이 가능한 이유는 Arguments 오브젝트 때문
=> 파라미의 type이나 갯수로 함수의 오버로딩이 불가능. Javascrip는
이름으로만 참조.
+@ 꼭 알아야 될 것들 몇 가지
function printArg() {
console.log(arguments);
}
printArg(1);
printArg(1,'a');
printArg(1,'a',{},[1,2,3]);

35. +@ 꼭 알아야 될 것들 : 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>

36. +@ 꼭 알아야 될 것들 : 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>

37. * 출처 :
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은 이렇게 한다! 자바스크립트 성능 이야기 - 박재성, 심상민, 양정권, 황준호
우리 머리에 주먹질을 해 대는 책이 아니라면, 우리가 왜 그런 책을 읽어야 한단 말
인가? - 프란츠 카프카