2016 자바카페 스파르탄 스터디

INSIDE Java Script 1-3

JAVACAFE

박진현

2016 자바카페 스파르탄 스터디들어가기 앞서..

본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해제작되었습니다.

본 슬라이드의 대부분의 내용은인사이드 자바스크립트(2014 송형주, 고현준) 의내용을 참고하였습니다.

2016 자바카페 스파르탄 스터디목 차

자바스크립트 기본 개요

자바스크립트 개발 환경

자바스크립트 데이터 타입과 연산자

2016 자바카페 스파르탄 스터디자바스크립트 기본 개요

자바스크립트 활용범위

웹 개발 ( jQuery, React JS, Angularjs, etc..)

서버 사이드 개발 (Node.js)

응용프로그램 개발(Sencha ExtJS, React Native)

2016 자바카페 스파르탄 스터디자바스크립트 핵심 개념

객체 자바스크립트를 구성하는 거의 모든것은 객체

기본타입 : boolean, number, string, null, undefined

나머지는? 죄다 객체

함수 함수도 객체, 심지어 일급 객체!

일급 객체 : 다른 객체들에 적용가능한 연산을 모두 지원하는 객체 변수나 데이터구조안에 담을수 있음

파라미터로 전달가능

반환값으로 사용가능

할당에 사용된 이름과 관계없이 고유한 구별 가능

동적으로 프로퍼티 할당이 가능

2016 자바카페 스파르탄 스터디자바스크립트 핵심 개념

프로토타입

모든객체는 숨겨진 링크인 프로토타입을 가짐

실행컨텍스트와 클로저

자신만의 독특한 과정으로 실행컨텍스트 만들고 그안에서실행이 이루어짐

실행컨텍스트는 자신만의 유효범위를 가짐

이과정을 통해서 클로저를 구현할수 있음

Closure : 로컬변수를 참조하고 있는 함수 내의 함수자신의 범위(Scope)밖에 있는 변수들에 접근할수 있는 함수

2016 자바카페 스파르탄 스터디자바스크립트 핵심 개념

단점 ?

느슨한 타입체크 (말이 많음)

전역객체의 존재 (더 말이 많음)

2016 자바카페 스파르탄 스터디자바스크립트 개발 환경

Chrome + F12

2016 자바카페 스파르탄 스터디자바스크립트 데이터 타입과 연산자

primitive type number

string

Boolean

undefined

null

reference type object

array

function

regular expression

2016 자바카페 스파르탄 스터디자바스크립트 기본타입

number

모든 숫자를 64bit 부동소수점으로 저장( java의 double)

string

‘,”로 생성, immutable 객체(생성되면 변하지 않음)

boolean

null, undefined

undefined 는 타입이자 값을 나타냄

2016 자바카페 스파르탄 스터디자바스크립트 참조타입

object 이름(key) : 값(value)를 저장하는 컨테이너

생성하는 법 var qoo = new Object()

var qoo = {}

var qoo = function(){ return {} }(???)

객체 프로퍼티 읽기/쓰기/갱신 qoo[“taste”] = “honey butter”

qoo.taste = “lemon”

해당 객체에 프로퍼티가 이미 존재하는경우 이를 갱신하지만,만일 존재하지 않는경우 새로운 프로퍼티를 생성한후 값을 할당함

접근하려는 프로퍼티가 예약어나 표현식의 경우 대괄호 표기법만을 사용

2016 자바카페 스파르탄 스터디자바스크립트 참조타입

for in

delete

프로퍼티 삭제(O)

객체 삭제(X)

2016 자바카페 스파르탄 스터디자바스크립트 참조타입 객체 비교

기본 타입은 비교 시 값이 동일하면 true

참조 타입의 경우 참조 값이 같아야만 true

하지만 JSON이 출동한다면..?

2016 자바카페 스파르탄 스터디자바스크립트 참조타입 특징

call by value(primitive type)

call by reference(reference type)

2016 자바카페 스파르탄 스터디자바스크립트 프로토타입

모든 객체는 자신의 부모 역할을 하는 객체가 있음

크롬, Edge, IE11 은 __proto__ 객체가 해당 역할을 수행

객체 리터럴(표기법) 방식으로생성된 객체는 Object.prototype가프로토타입 객체로 설정됨

객체를 생성할때 결정한 프로타입을임의로 변경 가능

2016 자바카페 스파르탄 스터디자바스크립트 배열

[] 혹은 new Array()

length 프로퍼티는 배열인덱스중가장 큰값(+1)을 기준으로 설정

length 프로퍼티는 임의 조작가능

배열의 프로토타입 객체는Array.protype 객체

2016 자바카페 스파르탄 스터디자바스크립트 배열 프로퍼티 열거 및 삭제

for in 문으로 열거 가능, 단 모든 프로퍼티가 열거됨

delete 연산자로 해당 요소를 undefined로 설정(삭제X)

splice 메소드를 통해 배열에서 해당 객체 제거

2016 자바카페 스파르탄 스터디자바스크립트 유사 배열 객체

length 프로퍼티를 가진 객체 === 유사배열객체

객체(O) / 배열 (X) -> __proto__ 가 다름

apply() 메소드를 사용하면 배열 메소드 사용가능

arguments , jQuery 객체가 유사배열 객체

4장에서 추가설명예정 (사실 아직 왜 필요한지 모르겠음)

2016 자바카페 스파르탄 스터디자바스크립트 유사 배열 객체

length 프로퍼티를 가진 객체 === 유사배열객체

객체(O) / 배열 (X) -> __proto__ 가 다름

apply() 메소드를 사용하면 배열 메소드 사용가능

arguments , jQuery 객체가 유사배열 객체

4장에서 추가설명예정 (사실 아직 왜 필요한지 모르겠음)

2016 자바카페 스파르탄 스터디자바스크립트 연산자

+, typeof, ==, ===

== 연산자는 비교하는 대상이 다른경우 형변환

=== 연산자는 형 변환을 하지 않음