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

Freelancer / 아프리카TV BJ / Brunch Writer

기발자

2014년 10월

개발 공부 시작

HTML

CSS

JavaScript

Swift

Python

Bootstrap

Angular

React

MEAN

Ionic

Why

JavaScript

Versatile

실행 컨텍스트

클로저

호이스팅

객체지향

프로토타입

클래스

스코프

메서드

컴파일

콜백

재귀함수디버깅

생활코딩 Udemy Treehouse W3School …

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

Too Many

To Fail

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) { …… }


Parameter

Arguments

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


스크립트가 실행되면서 생성되는 것으로

생성된 순서대로 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();



test();




korName

test

this

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




korName

test

this



test();




test();

test 실행 컨텍스트

test 변수 객체


korName

this


test2 실행 컨텍스트

test2 변수 객체


this

test 실행 컨텍스트


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

test();


test2 변수 객체var korName = “Inkwon”

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

console.log(test());

test 변수 객체

호이스팅

var korName = "inkwon";

function test1() { return korName; }

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

console.log(test2());




korName

test1

test2





this







test2 변수 객체


korName

this







test1 변수 객체


this







test1 변수 객체

test2 변수 객체


test1 변수 객체


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), 재귀함수, 클로저 등

감사합니다.

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

Technology