[하코사 세미나] 비전공자의 자바스크립트 도전기

비전공자의 자바스크립트 도전기

Freelancer / 아프리카 TV BJ / Brunch Writer기발자

2014 년 10 월개발 공부 시작

HTMLCSS

JavaScriptSwift

Python

BootstrapAngularReactMEANIonic

WhyJavaScript

Versatile

실행 컨텍스트

클로저

호이스팅

객체지향

프로토타입클래스

스코프메서드

컴파일

콜백재귀함수디버깅

생활코딩 Udemy Treehouse W3School …

여러 채널을 통해 공부했지만…

Too ManyTo Fail

K.O

Image + Structure

+ =1 1 2

+ =

+ =1 1 2

값과 연관된 이름으로서 , 이를 통해 데이터를 저장하고 조작할 수 있는 것

var 값과 연관된 이름으로서 ,

이를 통해 데이터를 저장하고 조작할 수 있는 것

=var name “inkwon”

=var name “inkwon”

“inkwon”name

JavaScript 에서 기본적인 빌딩 블록 중의 하나로 작업을 수행하거나 값을 계산하는

문장의 집합과 같은 자바스트립트 절차

JavaScript 에서 기본적인 빌딩 블록 중의 하나로 작업을 수행하거나 값을 계산하는

문장의 집합과 같은 자바스트립트 절차

function

function coffeeMachine(coffee beans) { ……}coffeeMachine(“ 브라질 산토스” )

function coffeeMachine(coffee beans) { ……}

coffeeMachine(“ 브라질 산토스” )

function coffeeMachine(coffee beans) { ……}

coffeeMachine(“ 브라질 산토스” )

Parameter

Arguments

function coffeeMachine(coffee beans) { return 브라질 산토스 원두로 만들어진 커피}

coffeeMachine(“ 브라질 산토스” )

스크립트가 실행되면서 생성되는 것으로 생성된 순서대로 Stack 메모리에 삽입되며 언제나 1 개의 Variable Environment,

1 개의 Lexical Environment, 그리고 1 개의 This Binding 속성으로 구성되어 있는 것

Execution Context

스크립트가 실행되면서 생성되는 것으로 생성된 순서대로 Stack 메모리에 삽입되며 언제나 1 개의 Variable Environment,

1 개의 Lexical Environment, 그리고 1 개의 This Binding 속성으로 구성되어 있는 것

var korName = “Inkwon”전역에서의 실행 컨텍스트

var korName = “Inkwon”

전역 실행 컨텍스트전역 변수 객체

scope ( 스코프 체인 )

korName : undefined -> Inkwon

this

함수 호출 시 실행 컨텍스트var korName = “Inkwon”

function test() { var korName = “Lee”}

test();

var korName = “Inkwon”

function test() { var korName = “Lee”}

test();

전역 실행 컨텍스트전역 변수 객체

scope ( 스코프 체인 )

korName

test

this

test 함수 실행 시 test 실행 컨텍스트 생성

전역 실행 컨텍스트전역 변수 객체

scope ( 스코프 체인 )

korName

test

this

var korName = “Inkwon”

function test() { var korName = “Lee”}

test();

전역 실행 컨텍스트

var korName = “Inkwon”

function test() { var korName = “Lee”}

test();

test 실행 컨텍스트test 변수 객체

scope ( 스코프 체인 )

korName

this

전역 실행 컨텍스트

test2 실행 컨텍스트test2 변수 객체

scope ( 스코프 체인 )

this

test 실행 컨텍스트

var korName = “Inkwon”

function test() { var korName = “Lee” function test2() { return korName } test2();}

test();

var korName = “Inkwon”

function test() { function test2() { return korName } return test2();}

console.log(test());

전역 실행 컨텍스트

test2 실행 컨텍스트test 실행 컨텍스트

스코프 체인

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

전역 실행 컨텍스트전역 변수 객체

scope ( 스코프 체인 )

korName

test1

test2

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

this

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

전역 실행 컨텍스트

test2 실행 컨텍스트test2 변수 객체

scope ( 스코프 체인 )

korName

this

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

전역 실행 컨텍스트

test1 실행 컨텍스트test1 변수 객체

scope ( 스코프 체인 )

this

test2 실행 컨텍스트

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

전역 실행 컨텍스트

test1 실행 컨텍스트test2 실행 컨텍스트

전역 실행 컨텍스트

test1 실행 컨텍스트전역 실행 컨텍스트

test2 실행 컨텍스트

var korName = "inkwon";

function test1() { return korName; }

function test2() { var korName = "Lee"; return test1(); }

console.log(test2());

JavaScript 에서 prototype 은 함수의 속성이며 생성자 함수에서 만든 개체의 속성입니다 . 함수의 프로토타입은 개체입니다 .

이는 함수가 생성자로 사용될 때 주로 사용됩니다 .

Prototype

var add = function(x, y) { return x + y;}

var add = function(x, y) { return x + y;}

console.dir(add.prototype);console.dir(add.prototype.constructor);

add 함수 객체 add.prototype( add 프로토타입 객체 )

prototype 프로퍼티constructor 프로퍼티

객체지향 프로그래밍 (OOP) 에서 클래스는 특정 종류의 객체내에 있는 변수와 메서드를 정의하는 일종의 틀 , 즉 템플릿이다 . 따라서 , 객체는 클래스로

규정된 인스턴스로서 , 변수 대신 실제값을 가진다 .

Class

function Person(name) { this.name = name; this.getName = function() {…} this.setName = function(reName) {…}}

var korName = new Person(“inkweon”);

var usName = new Person(“Christy”);

function Person(name) { this.name = name; this.getName = function() {…} this.setName = function(reName) {…}}

Person

name

getName

setName

Person

name

getName

setName

korName

name

getName

setName

Person

name

getName

setName

korName

name

getName

setName

usName

name

getName

setName

Person

name

getName

setName

korName

name

getName

setName

usName

name

getName

setName

불필요한 메모리 공간을 차지

Person.prototype.getName = function() {…}

Person.prototype.setName = function(reName) {…}

var korName = new Person(“inkweon”);

var usName = new Person(“Christy”);

function Person(name) { this.name = name;}

Person

name

getName

setName

Person.prototype

korName

name

usName

name

남은 JavaScript 주요 개념객체지향 (OOP), 재귀함수 , 클로저 등

감사합니다 .