웹개발 11 - 자바스크립트 함수

2019. 06. 19 필기

함....수.....뻥...션...

< 함수 Function >

 

함수 Function 란?
--> 원하는 기능을 제공하기 위한 명령들의 모임
--> 데이터를 전달받아 정해진 작업을 수행하고 그 결과를 리턴하도록 작성된 코드블록
함수 선언 후 호출에 의해 함수의 명령 실행

 

자바스크립트 함수의 형식 및 선언

 

함수의 형식

<script type="text/javascript">

//기본형식
function 함수이름(값1, 값2, ..., 값n) {
  함수의 내용
  return 반환값;
}

//선언함수
function abc() {
  선언함수의 내용
}

//익명함수
function() {
  익명함수의 내용
}

//변수함수
var efg=function() {
  변수함수의 내용
}

</script>

return 키워드의 기능 :
1)함수의 종료
2)함수의 반환값을 호출명령 위치로 반환

*cf* 자바 또는 자바스크립트 문법을 모르는 사람들을 위해 첨언하자면,
    abc( ) <-- 라고 생긴 함수가 있다고 했을 때
    abc는 함수의 이름이며, 괄호 ( ) 안에는 함수에 넣을 값이 들어간다.

*cf* 자바스크립트에는 동일한 이름의 함수가 존재할 수 있으며,
      먼저 선언된 함수는 덮어씌워지고 가장 나중에 선언된 함수만 유효하다.
      --- 여러 사람이 함께 작업했을 경우 코드소스를 합쳤을 때 생길 수 있는 흔한 문제

 

자바스크립트 함수의 호출

 

함수의 호출

<script type="text/javascript">

//이미 선언되어 있는 함수를 호출
abc();

//함수를 선언과 동시에 호출
(funtion() {
  익명함수 내용
})();

</script>

--- 자바와는 달리 함수의 호출을 먼저, 선언을 나중에 해도 된다.
--- 함수 매개변수의 개수보다 적은 값 전달 가능 >> 값을 전달받지 못한 매개변수는 undefined로 표현
--- 함수 매개변수의 개수보다 많은 값 전달 가능 >> 오버된 값은 자동 소멸
------ 자바와는 달리 매개변수와 값의 개수가 일치하지 않아도 에러는 떨어지지 않는다. 호출도 가능

 

변수의 종류
·  전역변수(Global Variable) : 함수 외부에서 선언된 변수 - 모든 함수에서 사용 가능 (자바의 필드와 비슷한 개념)
·  지역변수(Local Variable) : 함수 내부에서 선언된 변수 - 선언된 함수 안에서만 사용 가능
--- 함수 내부에서 변수선언 없이 사용된 변수는 자동으로 전역변수로 인식한다
·  매개변수(Argument) : 함수의 명령 실행에 필요한 값을 전달받기 위한 변수

 

자바스크립트 함수의 종류
·  선언함수 : 함수명이 존재하는 함수
·  익명함수 : 함수명이 존재하지 않는 함수
·  함수변수 : 변수에 저장된 익명함수 >> 변수를 이용하여 함수 호출 
--- 자바스크립트의 특징이다. JS에서는 함수도 객체, 즉 일종의 값이다.
·  전역함수 : 자바 스크립트 처리기에서 제공하는 함수들
·  내부함수 : 선언된 함수 내에서만 호출할 수 있는 함수
·  콜백함수 : 매개변수에 함수를 전달해 함수 내부에서 호출되는 함수
--- 즉 어떤 이벤트가 발생한 후, 수행될 함수
·  클로저함수 : 내부함수를 반환받아 호출하는 함수
--- 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수
·  타임함수 : window 객체가 제공하는 타이머를 작동시키는 메소드
·  encode / decode 함수 : 한글이 섞인 주소를 이스케이프 해주기 위한 함수(아래에 자세히)

 

자바스크립트 전역함수(내장함수)의 종류
·  eval() : 값을 문자열 형태로 전달받아 계산
·  parseInt() : 문자열을 숫자(정수)로 변환
·  parseInt(str, radix) : str 문자열을 radix 진수로 해석하고 10진 정수로 바꿔서 리턴
·  parseFloat() : 문자열을 숫자(실수)로 변환
·  isFinite() : 값이 숫자라면 true
·  isNaN() : 값이 숫자가 아니면 true

 

내부함수 Inner Function

: 선언된 함수에서만 호출 가능

내부함수

<script type="text/javascript">

function abc() {

	//내부함수
	function print() () {
    	함수 내용
        }
        
}

</script>

 

콜백함수 Callback Function

콜백함수는 강사님 설명도 어렵고 인터넷을 찾아봐도 어려웠던 개념이다. 최대한 내가 이해할 수 있었던 내용을 여기에 옮겨적는다.

프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.
즉 콜백함수란, 다른 함수의 매개변수로 호출될 함수를 전달하고, 특정이벤트가 발생하고 나서 매개변수로 호출된 함수가 다시 호출되는 함수를 말한다.

 

 

클로저함수 Closure Function

클로저 함수도 이해하기 힘들었는데, 아래 내용을 보고 조금이나마 이해하게 되었다.

클로저란, 변수가 사라지지 않고(메모리에서 제거되지 않고) 계속해서 값을 유지하는 상태를 뜻한다.
또한 클로저 함수는 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 뜻한다. 즉 클로저 상태의 변수를 계속 사용중인 함수를 뜻한다.

클로저는 자바스크립트에서만 사용되는 개념이 아니라, 여러 언어에서 차용되고 있는 특성이다.

 

그리고 다음은 창의적으로 클로즈 함수를 활용한 예시라고 한다.(이해하려 노력중)

<script type="text/javascript">

function celebrityID() {
    var celebrityID = 999;
    // 우리는 몇개의 내부 함수를 가진 객체를 리턴할것입니다.
    // 모든 내부함수는 외부변수에 접근할 수 있습니다.
    return {
        getID: function() {
            // 이 내부함수는 갱신된 celebrityID변수를 리턴합니다.
            // 이것은 changeThdID함수가 값을 변경한 이후에도 celebrityID의 현재값을 리턴합니다.
            return celebrityID;
        },
        setID: function(theNewID) {
            // 이 내부함수는 외부함수의 값을 언제든지 변경할 것입니다.
            celebrityID = theNewID;
        }
    }
}
var mjID = celebrityID(); // 이 시점에, celebrityID외부 함수가 리턴됩니다.
mjID.getID(); // 999
mjID.setID(567); // 외부함수의 변수를 변경합니다.
mjID.getID(); // 567; 변경된 celebrityID변수를 리턴합니다.

</system>
(출처: Understand JavaScript Closures With Ease
http://javascriptissexy.com/understand-javascript-closures-with-ease/)

참고한 블로그 :
- https://victorydntmd.tistory.com/44
- https://webclub.tistory.com/8?category=501058   
- http://chanlee.github.io/2013/12/10/understand-javascript-closure/
- Understand JavaScript Closures With Ease http://javascriptissexy.com/understand-javascript-closures-with-ease/

 

타임함수

·  intervalId

·  setInterval : 시간마다 반복실행(무한반복)

·  setTimeout

 

Encode / Decode 함수

웹페이지를 이동할 때 자바스트립트의 location 객체를 이용하여 문서를 요청한다. 이 때 요청 문서에 QueryString를 이용하여 값을 전달해야 하는데, 영문자, 숫자, 일부 특수문자를 제외한 값은 전달이 불가능하다.(즉 URI 주소로 인식 불가) 따라서 이 값들을 전달하기 위해서는 '부호화'시켜줘야 하는데, 이것을 인코딩이라고 한다. 즉 한글 등의 문자열을 사용하기 위해 활용되는 함수이다.

encode : 일반문자열 -> 퍼센트 인코딩된 문자열
decode : 인코딩된 문자열 -> 일반문자열
=> 인코딩, 디코딩은 세트로 움직임
--- 퍼센트 인코딩이란, URL에 문자를 표현하는 인코딩 방식으로, 알파벳이나 숫자, 일부 특수문자(@, *, -, _, +, ., /) 등을 제외한 문자들을 16진수 값으로 코딩하는 방식 --> 1byte 문자는 %XX 형식으로 출력

escape( ) <-> unescape( )
- ASCII 문자를 유니코드 문자로 변환 --- 1byte 문자는 %XX, 2byte는 %uXXXX로 변환
- 간단한 문자열(* @ - _ + . / 제외) 인코딩
- 코드값에 맞는 문자로 변환 (escape 로 변환된 코드값만 문자로 변환)

encodeURI( ) <-> decodeURI( )
- 최소한의 문자 인코딩
- 인터넷 주소에 사용되는 일부 특수문자(/ ? : ; @ & = + $ #) 제외하고 인코딩 
- 보통 url을 인코딩할 때 사용(https:// 제외)

encodeURIComponent( ) <-> decodeURIComponent( )
- encodeURI이 제외한 일부 특수문자까지도 인코딩
- https:// 포함한 url 전체를 인코딩할 때 사용

참고 :  https://blog.naver.com/ambifire/150027317745