'프로그래밍/javascript'에 해당되는 글 3건


###  Closuser

출처 : 단일페이지 웹 어플리케이션 (위키북스)


Closure 역시나 내용이 쉽지 않으나, 설명이 참 좋다. 


<script>
var makePrison = function (prisoner) {
return function () {
return prisoner;
}
};

var joshPrison = makePrison('Josh Powerll');
var mikePrison = makePrison('Mike Mikowski');

//클로저
// 클로저란 변수가 생성된 실행 컨텍스트 외부에서도 변수에 접근할 수
// 있게끔 변수를 유지함으로써 가비지 컬렉터가 변수를 메모리에서
// 제거할 수 없게끔 하는 절차다.
console.log(joshPrison());
console.log(mikePrison());

var prison = {
names: 'Mike Mikowski and Josh Powell',
who: function () {
return console.log( this.names );
}
};
prison.who();
</script>

위에서의 this 는 prison 이며, closure 처리됨.


이런 경우에 Closure 처리를 함으로서 원하는 바를 얻을 수 있다. 

Ajax 호출에 대한 응답은 최초 비동기 호출이 발생했던 실행 컨텍스트 밖에서 발생하게 된다. 

( 참고 : context 의미 )

<script>
var prison = {
names: 'Mike Mikowski and Josh Powell',
who: function () {
var that = this;
$.ajax({
success: function () {
//console.log ( this.names); // 여기서 this 는 ajax 호출을 가리킴

//success함수 호출될 때에 that 변수를 참조할 수 있음
// that 객체가 closure 처리되어
console.log ( that.names);
}
});
}
};
prison.who();



</script>


### 실행 컨텍스트란 ( p.62 )

함수가 호출될 때마다 새로운 실행 컨텍스트(executioin context)가 생긴다.

실행 컨텍스트는 함수가 실행되는 동안 일어나는 모든 내용으로 구성된다. 실행 컨텍스트는 함수 선언과는 다르다. 함수 선언이 함수가 실행될 때 어떤 동작을 하는지 설명하는 데 반해, 실행 컨텍스트는 함수 실행 그 자체다.

... 중략...

실행 컨텍스트에 속한 변수 및 함수는 실행 컨텍스트 객체에 저장된다.

자바스크립트 엔진이 실행 컨텍스트를 통해 2단계를 거치면서 변수를 선언하고 초기화한다. 

1차 : 인자와 함수가 선언되고 대입

2차 : 자바스크립트를 실행하고 지역 변수의 값을 정의함






'프로그래밍 > javascript' 카테고리의 다른 글

[ECMAScrpt6] Arrow 함수  (0) 2018.04.03
[javascript] 계산기 만들기  (0) 2017.05.16
블로그 이미지

ohnewdev

배워서 남주자

,

[ 참고서적 : ECMAScrip6 - 김보영 님 저. ]

(param) => { 코드 };
param => { 코드 };
() => { 코드 };
( param1, param2, , , , paramN) => { 코드 };
param => ( {key: value} );
(param1, param2, ...rest) => { 코드 };
( param1, param2 = 123, , ,  paramN) => {코드 };
( [one, two] = [1, 2] _ => one + two;
({key : sum} = {key : 10 + 20 }) => { 코드 };
let fn = (param) => { 코드 };

화살표 함수는 functnion(param) { 코드 } 를 축약한 것으로 (param) => {코드} 형태로 작성합니다.






'프로그래밍 > javascript' 카테고리의 다른 글

Closure  (0) 2018.07.04
[javascript] 계산기 만들기  (0) 2017.05.16
블로그 이미지

ohnewdev

배워서 남주자

,


그간 대강 두리뭉실 써왔던 javascript를 다시 보고 있다. 재입문이 아니라 처음 배우는 느낌이다.

함수 선언 VS. 표현식

함수에는 두 가지 리터럴 형태가 있는데, 다른지는 몰랐었다.

[함수 선언-function declaration]

function add(num1, num2){
return num1 + num2;
}

[함수 표현식-function expression]

var add = function (num1, num2){
return num1 + num2;
}

함수 선언식을 사용하면 코드가 실행 될 때 컨텍스트(선언된 함수를 포함하고 있는 함수 스코프 또는 전역 스코프) 상단에 끌어올려진다고 한다. 즉, 함수를 호출하는 코드가 함수를 선언한 코드보다 앞에 있어도 에러가 발생하지 않는다는 뜻이다.(hoisting)

var result = add(5,5);
function add(num1, num2){
return num1 + num2;
}

함수 호이스팅(hoisting)은 함 수 이름을 먼저 처리하기 때문에 일어나는 현상으로 함수 선언에만 적용된다. 
같은 자리에 함수 표현식으로 작성하면 에러가 난다.

[인용-객체지향자바스크립트의 원리]

정규식

숫자키 버튼 및 텍스트박스 직접 입력 등의 입력값에 대한 검증을 하기 위해 정규식 사용. 
참조 : 정규식

strict mode

개발과정에서 발생될 수 있는 오류에 대해 더 엄격하게 두기.

참조 : Strict mode


계산기 프로그램 OOP 로 만들기

객체지향 언어 특징을 다시 정리하면


'프로그래밍 > javascript' 카테고리의 다른 글

Closure  (0) 2018.07.04
[ECMAScrpt6] Arrow 함수  (0) 2018.04.03
블로그 이미지

ohnewdev

배워서 남주자

,