콜백

처리의 위임

함수가 값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수를 전달할 수 있다.
값으로 전달된 함수는 호출 될 수 있기 때문에 이를 이용하면 동작을 완전히 바꿀 수 있다.

예시) 객체에 속한 메소드(함수)를 이용해 이해해보자.

1. var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];  
   alert (numbers.sort()); // [1, 10, 2, 20, 3, 4, 5, 6, 7, 8, 9]

    

결과를 보면 3보다 10이 먼저 나오는 등의 이상한 결과를 볼 수 있다.
이건 내장 함수인 sort 때문인데 sort의 정의를 보면

1. sort(sortfunc)  

    

인자명	데이터형	필수/옵션	설명
sortfunc	function	옵션	원소들 간에 무엇이 우선인지를 판단한다

이와 같이 sort는 배열의 방식을 자신이 정할 수 있다.
정하지 않으면 기본 적인 동작을 하기 때문에 10이 3보다 먼저 나오는 것이다.

자세한 예를 들진 않고 결과만 설명하면 sort는 인자로 음수를 받게 되면 앞에 들어오는 수가 뒤에 오는 수 보다 작다고 인식한다.

Sort의 동작 방식과 콜백(처리 위임)을 사용하면 원하는 순서대로 나열 할 수 있다.

1. function sortNumber(a,b){  
   // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬 순서가 반대가 된다.   
   return b-a;  
   }  
   var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];  
   alert(numbers.sort(sortNumber)); // [20,10,9,8,7,6,5,4,3,2,1]

    

비동기 처리

콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

해당 실습은 서버 환경에서만 동작하므로 영상을 참,

 

 

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부, 외부 함수

1. function outter(){// 외부 함수의 시작
   var title = 'coding everybody';    
   function inner(){// 내부 함수의 시작
   alert(title);  
   }                 // 내부 함수의 끝  
   inner();  
   }   // 외부 함수의 끝
   outter(); //coding everybody

    

위 예제를 보면 3. ~ 5. 까지가 내부 함수 이고 그것을 감싸고 있는 1. ~ 7. 까지가 외부 함수이다.

여기서 주목 하고 싶은 것은 외부 함수의 지역 변수인 title을 내부 함수에서 부를 수 있다는 것이다.

클로저의 특징

1. function outter(){  
   var title = 'coding everybody';    
   return function(){          
   alert(title);  
   }  
   }  
   inner = outter();  
   inner();    // coding everybody

    

위 예제를 보면 7. 에서 outter()함수를 호출하고 return값으로 함수를 반환하고 inner라는 변수의 저장한다.
이후 8. 에서 inner()함수를 호출하면 “coding everybody” 라는 함수가 표현 된다.

여기서 눈여겨봐야 하는 것은 분명히 2. 에 있는 변수 title는 return을 했기에 4. 에서 호출하는alert(title); 를 실행 시킬 수 없어야 하지만 호출이 가능하다는 것이 클로저의 특징이다.

Ex) 클로저를 이용한 좀 더 실용적인 예제

1. function factory_movie(title){  
   return {  
   get_title : function (){  
   return title;  
   },  
   set_title : function(_title){  
   title = _title  
   }  
   }  
   }  
   ghost = factory_movie('Ghost in the shell');  
   matrix = factory_movie('Matrix');  
   alert(ghost.get_title());    // Ghost in the shell
   alert(matrix.get_title());   // Matrix
   set_title('공각기동대 ');  
   alert(ghost.get_title());    // 공각기동대
   alert(matrix.get_title());   // Matrix
   ~ 10. 까지는 get title와 set title 라는 함수를 가진 객체를 return하고 있다.

    

get title는 외부 함수가 받은 title라는 인자를 반환 하는 역할을 하고 (2. ~ 5.)
set title는 set title가 받은 _title를 외부 함수의 저장된 title에 넣는 역할을 한다. (6. ~ 8.)

11. 에선 변수 ghost 에 “Ghost in the shell”라는 title을 가진 객체를 담고,
    12. 에선 변수 matrix에 “Matrix”라는 title을 가진 객체를 담는다.
12. ~ 15. 19. ~ 20. 에서 처럼 이후 내장 함수인 get_title를 통해 저장된 title을 볼 수 있으며
13. 에서처럼 내장 함수인 set_title를 통해 저장된 title을 변경 할 수 있다.

또한 여기서 만들어진 외부 함수의 title은 private변수가 되어 set_title이나 get_title으로만 변경/접근이 가능하다.

클로저의 응용

배열 arr[0 ~ 4] 까지에 0 ~ 4를 넣는 예제를 한번 만들어 보자.

1. var arr = []  
   for(var i = 0; i < 5; i++){  
   arr[i] = function(){  
   return i;  
   }  
   }  
   for(varindex in arr) {  
   log(arr[index]());  
   }    // 5, 5, 5, 5, 5

    

얼핏 보면 2. 에서 for문을 돌면서i를 return 하여 arr[i]에 넣는 것처럼 보이지만 실행 결과는 5, 5, 5, 5, 5가 나오게 된다. 왜냐하면 4. 에서의 i값은 우리가 정의한 3. ~ 5. 함수의 외부 변수의 값이 아니기 때문이다.

그러므로 3. ~ 5.에게 외부 함수를 만들어 외부 변수를 참조하게 하면 제일 처음 원하는 결과를 얻을 수 있게 된다.

1. var arr = []  
   for(var i = 0; i < 5; i++){  
   arr[i] = function(id) {  
   return function(){  
   return id;  
   }  
   }(i);  
   }  
   for(varindex in arr) {  
   log(arr[index]());  
   }    // 0, 1, 2, 3, 4

    

3. ~ 7. 외부 함수는 (i)를 인자로 받고 외부 변수 (id)에 값 넣어 5. 에서 그 값을 return한다.
그렇게 되면 arr[i] 값에는 우리가 원하는 0 ~ 4까지의 값이 들어가게 된다.

 

 

arguments (객체)

아래 예제를 보자

1. function sum(){ // 전달되는 인자가 없다.  
   var i, _sum = 0;      
   for(i = 0; i < arguments.length; i++){ 
   write(i+' : '+arguments[i]+'<br />');  
   _sum += arguments[i];  
   }     
   return _sum;  
   }  
   write('result : '+ sum(1,2,3,4)); // 전달되는 인자가 있다.  

    

1. 을 보면 sum이라는 함수의 인자가 없어도 9. 에서처럼 인자를 전달 할 수 있다.

이게 가능한 이유는arguments라는 함수 안에서 사용할 수 있도록 전달 받은 인자들을 자동으로 배열에 넣어주는 기능을 가진 약속된 이름의 배열이 있기 때문이다.

매개변수의 수

1. function one(arg1){  
   log(  
   'one.length', one.length,  
   'arguments', arguments.length  
   );  
   }  
   one('val1', 'val2');  // one.length 1 arguments 2 
   functiontwo(arg1, arg2){  
   log(  
   'two.length', two.length,  
   'arguments', arguments.length  
   );  
   }  
   two('val1');  // two.length 2 arguments 1

    

7. 에서 one을 호출 할 때 2개의 인자를 보내고있고 one에서 지정된 매개 변수는 1개 이다.
이때 one.length와 결과와 arguments.length의 결과가 다른데 그 이유는 arguments는 매개 변수의 개수가 아닌 전달 받은 인자의 수만큼의 length를 가지고 있기 때문이다.

이를 이용해서 func.length값과 arguments.length 값을 비교해 정해진 매개변수만큼 인자가 왔는지 확인이 가능하다.

 

객체

객체란, 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용한 데이터를 가져오게 되는 것이 객체이다.

생성 방법

객체의 선언

var object = {'one': 1, 'two':2, 'three': '3'}
// Object {one: 1, two: 2, three: "3"}  

객체의 호출

var object = {'one': 1, 'two':2, 'three': '3'}  // 객체 선언
for(key in object){  
    document.write(key + " "+ object +"</br>")  
}  
/*
one [object Object]
two [object Object]
three [object Object]
*/

 

객체와 함수

객체는 배열과는 달리 객체 안에 함수를 넣을 수 있다.

var object = {   
    'number' : {'one': 1, 'two':2, 'three': '3'},  
    'show' : function() {   
               document.write('obj func')  
     }  
} // 객체 선언
object.show() // obj func

 

모듈

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장 되기에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있다. (브라우저에만 해당)

사용 방법

먼저 필요한 기능을 입력 할 JS 파일을 생성한다.

var print  
print = function(){  
    document.write("print 함수가 호출 되었습니다.");  
}  

임의의 파일명 “printf_func.js”으로 저장한다.

기능을 사용할 파일에서 head에서 JS파일을 호출한다.
만약 메인 파일과 동일한 위치에 있을 경우는 src = “” 안에 파일명만 적어주면 된다.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <script src="print_func.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
    print(); // print함수가 호출 되었습니다.
</script>  
</body>  
</html>  

 

라이브러리

라이브러리란 모듈과 비슷한 개념으로 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다.

사용 방법

모듈과 같이 유명한 jquery등의 라이브러리를 다운 받아 head에 추가하여 사용한다.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <script src="jquery.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
    $(/*commend*/) //jquery와 같은 경우에는 $표시를 이용해 라이브러리 안에 함수를 호출 한다.  
</script>  
</body>  
</html>  

 

 

조건문과 반복문

조건문

비교 연산자 등을 사용해서 True와 False 값을 이용, 조건문의 코드가 실행 여부를 결정 할 수 있다.

var i = 5;  
if ( i == 1){  
    document.write("i is 1");  
}  
else if ( i == 5){  
    document.write("i is 5");  
}  
else {  
    document.write("i isn't 1 and 5");  
}  
// i is 5

반복문

반복문 또한 비교 연산자 등을 사용해서 True와 False 값을 이용, 반복문의 코드가 실행 여부를 결정 할 수 있으며, False 값이 나올 때까지 코드를 반복해서 실행한다.

var i = 0;  
while(i < 10){  
    document.write(i);  
i++; // 조건문 확인 후 i 증가  
++i; // i 증가 후 조건문 확인
}  
/*
i++ 일 경우
..789 
++i 일 경우
..8910
*/

 

함수

함수란

같은 코드가 지속적으로 사용될 경우 필요할 때에 코드를 함수명으로 불러올 수 있는 기능이다.

함수의 선언 방법

• function “함수명”으로 불러오는 방법

function print(){  
    document.write("print text");  
}  
print();  
// print text

• 변수에 함수를 넣는 방법

varprint  
print=function(){  
    document.write("print");  
}  
print();  
// print text

선언 방식에만 차이가 있을 뿐 이후 사용방법등은 같다.

 

배열

배열의 선언

var member = ['1', '2', '3'] // member > ["1", "2", "3"]  
member[0] // "1"
member[1] // "2"
member[2] // "3"

반복 문과 배열

var member = ['1', '2', '3']  
for(var i = 0; i < 3; i++){  
    document.write(member[i]);  
}  
// 123

 

배열 수정

• Push > 배열의 제일 앞에 입력한 값을 집어 넣는다.

var member = ['1', '2', '3']  
member.push('0') // ["0", "1", "2", "3"]

• unshift > 배열의 제일 뒤에 입력한 값을 집어 넣는다.

var member = ['1', '2', '3']  
member.unshift('0') // ["1", "2", "3", "0"]

• splice(index,howmany,’element#1’…. ’element#n’)

var member = ['1', '2', '3']  
member.splice(1, 0, '0') // []
// member >> ["1", "0", "2", "3"]

index 배열에 추가할 특정 배열의 위치
howmany : 인덱스를 포함하여 원소를 몇 개나 삭제할 것인지, 0이면 삭제하지 않음
’element#n’ : 넣을 원소

 

배열의 정렬

arr.sort() > 작은 것부터 큰 순으로 정렬

var member = ['2', '3', '1']  
member.sort() // ["1", "2", "3"]  

arr.reverse() > 큰 것부터 작은 순으로 정렬

var member = ['2', '3', '1']  
member.reverse() // ["3", "2", "1"]

arr.shift() > 제일 앞에 있는 원소가 출력되고 배열에서 지워 짐

var member = ['1', '2', '3']
member.shift() // "1"
// member >> ["2", "3"]

arr.pop() > 제일 뒤에 있는 원소가 출력되고 배열에서 지워 짐

var member = ['1', '2', '3']  
member.shift() // "3"
// member >> ["1", "2"]

 

여러가지 연산자

연산자

• +, -, *, /를 사용하여 기본적인 사칙 연산을 수행 할 수 있다.

Console를 이용한 예제

1+1 // 2  
1-1 // 0  
2*3  // 6  
3/4  // 0.75  

 

• ==, ===, >, <, >=, <=등의 비교 연산을 통하여 true 혹은 false의 값을 얻어 낼 수 있다.

1==1  // true  
1>=2  // false  
1<3 // true  

 

• “ === “은 “ == “과는 다른 기능을 한다. 예를 들어
  1 == “1”의 경우 True를 반환 하는 반면에
  1 ===”1”의 경우는 False를 반환한다.

1=="1" //true  
1==="1" //false  

 

 

Math 함수

일반적인 사칙연산으로 할 수 없는 계산을 할 수 있는 함수이다.

• pow(a, b): a의 b제곱의 값을 알려준다.

Math.pow(3,2) // 9  

 

• round(Decimal): 소수 부분을 반올림 해준다.

Math.round(10.3) // 10 
Math.round(10.6) // 11

 

• ceil(Decimal): 소수 부분을 올림 해준다.

Math.ceil(10.3) // 11  

 

• floor(Decimal): 소수 부분을 버림 해준다.

Math.floor(10.6)// 10

 

• random(): 임의의 소수를 출력해준다.

Math.random() // 0.07498681149445474  

 

 

문자열과 연산자

원하는 문자열을 표시하고 싶다면, “나 ‘로 묶어 문자열로 표시한다.

• ‘을 문자열로 표시하고 싶다면, “ “ 사이에 ‘

alert(" Hello'world!' "); // Hello'world!' 

 

• ‘ ‘ 사이에 “는 문자로 인식하게 된다.

alert(' Hello"world!" ');  // Hello"world!"

 

• \ 를 이용하여 아래와 같이 입력하면 ‘ ‘ 안에 ‘표시를 넣을 수 있다.

alert(' Hello\'world!\' ');   // Hello'world!'

 

• 두 개 이상의 문자열을 “+” 연산자로 연결이 가능하다.

alert("Hello"+"World");// HelloWorld

 

그리고 숫자나 변수 또한 위치기 가능하다.

alert("Hello"+123+"World");// Hello123World

다만 변수에 경우에는 변수에 저장된 값이 있어야 한다.

 

+ α  변수 이야기

C 언어와는 달리 문자형에 따라 변수를 선언해 줄 필요 없다.

var i = 100  

             var를 빼도 무리는 없으나 입력하는 것을 추천한다.

오리엔테이션

---

 

JavaScript란? Java와 JavaScript의 차이는 햄과 햄스터의 차이

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.

이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.

JavaScript의 프로그래밍 툴은 어떤 것이 있을까?

1. 텍스트(txt)파일로 작성한 뒤 확장자를 html로 변경해 웹 브라우저로 실행 시켜도 상관이 없다.
2. Chrome 기준 F12를 누른뒤 “Console” 탭에 들어가 JavaScript를 Python처럼 코드를 작성과 동시에 실행 할 수 있다.
3. 본 강의에서 사용되는 도구인 Sublime Text를 사용하여 코딩 할 수 있다.

그 외에도 Vim, Atom, VS code, Brackets등등.. 어마어마한 종류의 에디터들이 있습니다.

 

JavaScript의 실행과 실습

---

 

Sublime Text 홈페이지^[링크]에 들어가 Sublime Text 3를 다운받아 설치한다.

 

현재 상태에서도 JavaScript를 작성할 수 있지만
편한 작업 환경을 위해 몇가지 더 작업 해보자.

먼저 JavaScript를 작성할 새 파일을 생성한다.

그러면 Untitled 라는 문서가 생긴다.

다음으로는 적당한 위치에 적당한 이름으로 파일을 저장한다.

다만, 반드시 .html 파일로 저장 되어야한다! 

JavaScript를 작성할 준비가 완료 되었다.

자동완성 기능

위 이미지 처럼 “html”을 입력한 뒤 Tab을 눌르게 되면,

이 처럼 html의 가장 기본적으로 입력해야 하는 것들이 자동으로 입력된다.

실습

예전 XSS 강의 중에서 ” <script> alert(1) </script> “로 XSS의 존재 여부를 판단한 적이 있다.

이번 실습에서 사용할 함수가 바로 ” alert” 함수이다.

위 html과 마찬가지로 script를 입력한 후 Tab을 누르면 자동으로
” <script type=”text/javascript”></script> “
입력 되는데 ” <script ~ >   </script> ” 사이에 사용할 함수를 입력하면 된다.

위와 같이 입력했다면, 아까 파일을 저장한 위치로 가서
방금 작성한 html파일을 실행 시켜보자.

브라우저가 실행되고 위와 같은 경고창이 나온다면 잘 작동 한다는 것이다.

 

Console를 이용한 JavaScript작성

브라우저 상에서 콘솔 창을 실행 하게 된다면 위와 같이 표시된다.

아까와 같이 Hello Wordl!를 띄워보자.

콘솔 창에 alert(‘Hello World!’)를 치고 엔터를 누르게 되면

따로 파일을 실해하는 과정 없이 바로 창이 뜨는 것을 볼 수 있다.

이 처럼 간단한 JavaScript코드는 콘솔창을 이용하고, 복잡한 코드는 파일로 직접 코딩할 수 있다.

 

다음 글에서는…

---

 

숫자와 문자의 표현과 수의 연산, 그
리고 문자에 대한 명령어 + α 에 대해서 알아보도록 하겠다.

생활 코딩에서 제공해 주는 무료 인강을 보고 공부했습니다.