3.JavaScript- function oriented
3.Javascript - 함수지향 프로그래밍
First citizen : 전달저장리턴
클로저 : 내부함수가 외부함수의 context(지역변수,파라미터 등)에 접근하는것
1. 유효범위
var vsscope = 'global';
function fs(){
var vsscope = 'local';
var lv = 'non';
vsscope2 = 'local2';
}
fs()
// alert(lv); // 지역변수이기 때문에 호출안됨
alert(vsscope); // local 의 변수를 변경한것이기 때문에 'global'유지
//alert(vsscope2); // global의 변수를 'local2로' 변경한것
// var 키워드를 지역변수에서 사용해야 전역변수로부터 변경이 되지 않기 때문에 사용해야한다.
2. 유효범위의 효용
function a (){
var i = 0;
// i=0; 이면 전역변수로 사용하기 때문에 for문에서 무한루프 발생
}
for(var i=0; i<5; i++){
a();
document.write(i);
}
2. 모듈화하는 방법
// 모듈화
// 전역변수의 사용을 줄이기위해 익명함수(함수를 선언 후 종료) 사용
(function() {
var MYAPP = {}
MYAPP.caculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right': null
}
MYAPP.caculator.left = 10;
MYAPP.caculator.right = 20;
function sum(){
return MYAPP.caculator.left + MYAPP.caculator.right
}
document.write(sum());
}())
3. 자바스크립트 유효범위
for(var i = 0; i < 1; i++){
var name = 'coding everybody';
}
alert(name); // javascript에서는 for문 if문에서 { }안의 변수는 지역변수로 보지 않기때문에 가능, 만약 function이면 호출 불가능
4. 정적 유효범위
var i = 5 ; //전역변수
function a(){
var i=10; //지역변수
b();
}
function b(){
document.write(i);
}
a() // 함수b 가 정의될때 전역변수가 정의되기 때문에 i = 5 이다.
// 함수가 선언될때 유효범위를 갖는다. -> 정적 유효범위.
// 동적 유효범위를 적용하게되면 i = 10 이된다
5. 값으로서의 함수 - first class citizen
// 저장
var a = function(){} // 함수는 값이기 때문에 변수에 저장 할 수 있다
a = {
b : function(){} // 함수는 값이기 때문에 객체안에 저장 할 수 있다
} // b라는 속성 (property)에 담겨 있는 함수는 method이다
// 전달
function cal(func, num){
return func(num)
}
function increase(num){
return num+1
}
function decrease(num){
return num-1
}
alert(cal(increase, 1)); // 함수는 값이기 때문에 다른 함수의 인자로 전달 될수 있다.
alert(cal(decrease, 1));
// 리턴
function cal(mode){
var funcs = {
'plus' : function(left, right){return left + right},
'minus' : function(left, right){return left - right}
}
return funcs[mode];
}
alert(cal('plus')(2,1)); // 함수는 함수의 리턴값으로 사용될 수 있다
alert(cal('minus')(2,1)); // cal 함수의 리턴값 mode를 plus 함수로 사용
// 배열의 값으로도 사용가능
var process = [
function(input){ return input + 10;},
function(input){ return input * input;},
function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
input = process[i](input);
}
alert(input); // 첫번째 for 1 + 10 , 두번째 11 x 11 , 세번째 121 / 2
6. 콜백함수
var numbers = [2,10,3,4]
var sortfunc = function(a,b){
// if (a>b){
// return 1;
// } else if(a<b){
// return -1;
// } else {
// return 0;
// }
return a-b; // sort는 우선순위를 정렬 또는 음수,양수,0인지에 따라서 순서를 정한다.
}
console.log(numbers.sort(sortfunc)); // sortfunc 가 콜백함수가 된다
// 값으로 함수를 사용할수있기때문에 sort의 동작방법을 바꿀수 있다.
7. 비동기 처리 - Ajax
datasource.json.js
{ “title” : “JavaScript” , “author”:”egoing”}
demo.html
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get('./datasource.json.js',
function(result){ // 콜백함수를 통해서 get 메소드가 동작하는 방법을 변경
console.log(result); // 이 콜백함수는 log를 출력
}, 'json');
</script>
</body>
</html>
8. 클로저
내부함수가 외부함수에 접근할수 있는 것
function outter(){
var title = 'coding everybody';
function inner(){
alert(title); // 내부함수에서 외부함수의 지역변수에 접근 - 클로저
}
inner();
}
outter();
외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할수있다
function outter(){
var title = 'coding everybody';
return function(){
alert(title);
}
}
inner = outter();
inner(); // 외부함수가 종료된 이후에도 내부함수를 통해 외부함수의 변수 title에 접근할수있다
——————————————————
function factory_movie(title){
return {
get_title : function() {
return title; // 외부함수의 지역변수 title는 종료되었지만 내부함수를 통해서 접근한다 - 클로저
},
set_title : function(_title){
title = _title
}
}
} /
ghost = factory_movie('Ghost in the shell');
alert(ghost.get_title())
matrix = factory_movie('Matrix');
alert(matrix.get_title());
ghost.set_title('공각기동대');
alert(ghost.get_title());
/ title은 get_title 과 set_title 만 을 통해서 수정할 수 있기 때문에 다른 사람으로 인한 변경을 줄일수있다. - 자바스크립트 클로저의 효과
클로저를 사용시 자주 발생하는 실수
var arr = []
for(var i = 0; i < 5; i++){ // i의 값이 외부변수의 값이 아니기 때문에 5만 출력
arr[i] = function(){
return i;
}
}
for(var index in arr) {
console.log(arr[index]());
}
for(var i=0; i<5; i++){
arr[i] = function(id){ // 외부함수 정의 - id의 값으로 i를 받고있다
return function(){ // 내부함수 return
return id; // 내부함수가 외부함수의 지역변수 id에 접근 -클로저
}
}(i); // 외부함수의 매개변수를 i - function(id)에 i를 대입
}
for(var index in arr){
console.log(arr[index]());
}
9. arguments - 유사 배열
function sum(){
var i, _sum = 0;
for(i=0; i < arguments.length; i++){
document.write(i + ':' + arguments[i] +'<br/>');
_sum += arguments[i];
}
}
document.write('result : '+sum(1,2,3,4));
// function a(arg- 매개변수 parameter){ }
// a(1 - 인자 argument)
10. 매개변수의 수
function zero(){
console.log(
'zero.length', zero.length,
'arguments', arguments.length
)
}
zero()
function one(arg1){
console.log(
'one.length', one.length, // 1출력 - 함수가 정의한 매개변수의 수
'arguments', arguments.length // 2출력 - 함수를 호출시 정의된 매개변수의 수
}
one('val1','val2')
11. 함수의 호출
자바스크립트의 유연함 , 자유로움
function sum(arg1,arg2){
return arg1 + arg2;
}
alert(sum.apply(null,[1,2]))
alert(sum.apply(null,[4,2])) // 객체없이 바로 배열계산
——————————————————
o1 = {val1:1,val2:2,val3:3}
o2 = {v1:10,v2:50,v3:100,v4:25}
function sum2(){
var _sum = 0;
for (name in this){
_sum += this[name];
}
return _sum;
}
alert(sum2.apply(o1)) // 6 - var this = o1 ; 이 암시적으로 들어감
alert(sum2.apply(o2)) // 185 // o2.sum 과 같이 o2라는 객체에 sum이라는 메소드를 실행하는것과 같다
——————————————————
o3 = {val1:1,val2:2,val3:3,sum3:sum3}
o4 = {v1:10,v2:50,v3:100,v4:25,sum3:sum3}
function sum3(){
var _sum = 0;
for (name in this){
_sum += this[name];
}
return _sum;
}
alert(o3.sum3())
alert(o4.sum3())
——————————————————
o5 = {val1:1,val2:2,val3:3,sum4:sum4}
o6 = {v1:10,v2:50,v3:100,v4:25,sum4:sum4}
function sum4(){
var _sum = 0;
for (name in this){
if(typeof this[name] !== 'function')
_sum += this[name];
}
return _sum;
}
alert(o5.sum4())
alert(o6.sum4())
——————————————————
o7 = {val1:1,val2:2,val3:3,sum5:sum5}
o8 = {v1:10,v2:50,v3:100,v4:25,sum5:sum5}
function sum5(){
var _sum = 0;
for (name in this){
if(typeof this[name] !== 'function') // 생활코딩 잘못설명 부분
_sum += this[name];
}
return _sum;
}
alert(sum5.apply(o7))
alert(sum5.apply(o8))
Leave a comment