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

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

2014년 10월
개발 공부 시작

HTML
CSS
JavaScript
Swift
Python
Bootstrap
Angular
React
MEAN
Ionic

실행 컨텍스트
클로저
호이스팅
객체지향
프로토타입
클래스
스코프
메서드
컴파일
콜백
재귀함수디버깅

생활코딩 Udemy Treehouse W3School …
여러 채널을 통해 공부했지만…

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

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

=var name “inkwon”
“inkwon”
name

JavaScript에서 기본적인 빌딩 블록 중의 하나로
작업을 수행하거나 값을 계산하는
문장의 집합과 같은 자바스트립트 절차

JavaScript에서 기본적인 빌딩 블록 중의 하나로
작업을 수행하거나 값을 계산하는
문장의 집합과 같은 자바스트립트 절차
function

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

function coffeeMachine(coffee beans)
{
……
}

{
……
}
Parameter
Arguments

{
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”
전역에서의 실행 컨텍스트

전역 실행 컨텍스트
전역 변수 객체
scope ( 스코프 체인 )
korName : undefined -> Inkwon
this

함수 호출 시 실행 컨텍스트
function test() {
var korName = “Lee”
}
test();

function test() {
}
test();
korName
test
this

test 함수 실행 시 test 실행 컨텍스트 생성
korName
test
this
function test() {
}
test();

function test() {
}
test();
test 실행 컨텍스트
test 변수 객체
korName
this

test2 실행 컨텍스트
test2 변수 객체
this
test 실행 컨텍스트
function test() {
function test2() {
return korName
}
test2();
}
test();

test2 변수 객체
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
function test1() {
return korName;
}
function test2() {
return test1();
}
this

function test1() {
return korName;
}
function test2() {
return test1();
}
test2 변수 객체
korName
this

function test1() {
return korName;
}
function test2() {
return test1();
}
test1 변수 객체
this

function test1() {
return korName;
}
function test2() {
return test1();
}
test1 변수 객체
test2 변수 객체

test1 변수 객체
test2 변수 객체
function test1() {
return korName;
}
function test2() {
return test1();
}

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”);
this.name = name;
this.getName = function() {…}
this.setName = function(reName) {…}
}

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”);
this.name = name;
}

Person
name
getName
setName
Person.prototype
korName
name
usName
name

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

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

More Related Content

What's hot

Viewers also liked

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

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