�ݺ�ߣ

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

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
typeof 연산자로 확인 가능

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

* Dynamic typing
* 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 = {};

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

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

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

== 연산자
==, != 연산자 : 값을 비교 -> 경우에 따라 자동 형변환이 발생
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;

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

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

&&, || 연산자
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라면 마지막의 표현식이 리턴된다.

&&, || 연산자 원리
|| 연산자는 반대로 하나라도 true가 있는지 확인하며, 모두 false
인 경우 마지막의 표현식이 리턴된다.
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 형

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

선언방법에 따른 실행소요시간 성능테스트
var arr = new Array();
var arr = [];
http://jindo.dev.naver.com/jsMatch/index.html?d=11&openResult=1

선언방법에 따른 실행소요시간 성능테스트
http://jindo.dev.naver.com/jsMatch/index.html?d=14&openResult=1
var obj = new Object();
var obj = {};

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. 자바스크립트코드 실행
자바스크립트 엔진 해석
변수 선언, 함수선언문을 읽기 전에 이미 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>

<meta charset="UTF-8">
<title>html, css, script 선언위치</title>

<link rel="stylesheet" src=/slideshow/e03-javascript-intro/61147426/"/css/myCss.css"/>
<style>
/* css를 파일 내부에서 정의할 경우 여기에 기재합니다. */
span {
color: red;
}
</style>
</head>
<body>
body에 기재 할 Contents

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

�ݺ�ߣ

프론트엔드스터디 E03 - Javascript intro.

Recommended

More Related Content

What's hot (18)

Similar to 프론트엔드스터디 E03 - Javascript intro. (20)

프론트엔드스터디 E03 - Javascript intro.