자바스크립트 문법 (6)

함수의 기초

 

<값으로서의 함수>

 

js에서 함수는 문법적 구문일뿐만 아니라 값이기도 함

따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있음

 

function sqr(x) {
  return x * x;
}
var sqrNum = sqr;
document.write(sqr(4) + "<br>");
document.write(sqrNum(4));

function localNum(){
  var num = 10;
  document.write("함수 내부에서 변수 num의 타입은" + typeof num + "입니다.<br>" );
}
localNum();
document.write("함수의 호출이 끝난 뒤 변수 num의 타입은" + typeof num +"입니다.");

//함수 내부에서 변수 num의 타입은number입니다.
함수의 호출이 끝난 뒤 변수 num의 타입은undefined입니다.

 

 

var num = 10;
function globalNum() {
  document.write("함수 내부에서 변수 num의 값은" + num + "입니다.<br>");
  num = 20;
}
globalNum();
document.write("함수의 호출이 끝난 뒤 변수 num의 값은" + num + "입니다.")

//함수 내부에서 변수 num의 값은10입니다.
함수의 호출이 끝난 뒤 변수 num의 값은20입니다.

 

함수 내부에서 var키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역변수가 아닌 전역 변수로 선언됩니다.

 

var num = 10;
function globalNum(){
  var num = 20;
  document.write("함수 내부에서 변수 num의 값은" + num + "입니다.<br>")
}
globalNum();
document.write("함수 호출이 끝난 뒤 변수 num의 값은" + num + "입니다.<br>")

//함수 내부에서 변수 num의 값은20입니다.
함수 호출이 끝난 뒤 변수 num의 값은10입니다.

 

 

 

전역 변수를 호출하려면, 전역 변수가 window 객체의 프로퍼티임을 명시

 

var num = 10;
function globalNum(){
  var num = 20;
  document.write("함수 내부에서 지역 변수 num의 값은 " + num + "입니다.<br>");

  document.write("함수 내부에서 전역 변수 num의 값은 " + window.num + "입니다.<br>");
  
}
globalNum();

//함수 내부에서 지역 변수 num의 값은 20입니다.
함수 내부에서 전역 변수 num의 값은 10입니다.

 

var x = 10, y = 20;
function sub(){
  return x - y;
}
document.write(sub() + "<br>");

//parentFunc()을 전역변수로 선언

function parentFunc() {
  var x = 1, y = 2;
  
  function add(){
    return x + y;
  }
  return add();
}
document.write(parentFunc())

 

var globalNum = 10;
function printNum() {
  document.write("지역변수 globalNum 선언 전의 globalNum의 값은" + globalNum + "입니다.<br>");
  var globalNum = 20;
  document.write("지역 변수 globalNum 선언 후의 globalNum의 값은" + globalNum + "입니다.");
}
printNum();

 

<호이스팅 후의 코드>

 

 

var globalNum = 10;
function printNum(){
  var globalNum; //함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동
  document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");

  globalNum = 20;

  document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

<매개변수>

 

JS에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시X

함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와 달리 오류X

function addNum(x,y,z){
  return x + y + z;
}
document.write("인수가 3개 모두 전달되면 반환값은 " + addNum(1, 2, 3) + "입니다.<br>");	
document.write("인수가 2개만 전달되면 반환값은 " + addNum(1, 2) + "입니다.<br>");
document.write("인수가 1개만 전달되면 반환값은 " + addNum(1) + "입니다.<br>");
document.write("인수가 아무것도 전달되지 않으면 반환값은 " + addNum() + "입니다.");

 

addNum()을 호출할 때 인수가 세 개 보다 적게 전달되면, 계산할 수 없다는 NaN을 반환

 

function addNum(x,y,z){
  if(x === undefined)
    
    x = 0;
  
  if(y === undefined)
    
    y = 0;
  
  if(z === undefined)
    
    z = 0;
  
  return x + y + z;
}
document.write("인수가 3개 모두 전달되면 반환값은 " + addNum(1, 2, 3) + "입니다.<br>");
document.write("인수가 2개만 전달되면 반환값은 " + addNum(1, 2) + "입니다.<br>");
document.write("인수가 1개만 전달되면 반환값은 " + addNum(1) + "입니다.<br>");
document.write("인수가 아무것도 전달되지 않으면 반환값은 " + addNum() + "입니다.");

 

//인수가 3개 모두 전달되면 반환값은 6입니다.
인수가 2개만 전달되면 반환값은 3입니다.
인수가 1개만 전달되면 반환값은 1입니다.
인수가 아무것도 전달되지 않으면 반환값은 0입니다.

 

 

NaN값을 반환하지 않고 전달된 인수만을 가지고 정상적으로 계산하는 함수

 

<arguments 객체>

 

함수의 정의보다 더 많은 수의 인수가 전달되면, 매개변수에 대입되지 못한 인수들은 참조할 방법X

 

arguments객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있음

 

첫 번째 인수는 arguments[0]에 저장, 그 다음 인수는 arguments[1]에 저장.

 

인수의 총 갯수는 arguments 객체의 length 프로퍼티에 저장

 

function addNum(){
  var sum = 0;
  
  for(var i =0; i < arguments.length; i++){
    sum += arguments[i];
  }
  
  return sum;
}
document.write("인수가 3개 전달되면 반환값은 " + addNum(1, 2, 3) + "입니다.<br>");
document.write("인수가 2개 전달되면 반환값은 " + addNum(1, 2) + "입니다.<br>");
document.write("인수가 1개 전달되면 반환값은 " + addNum(1) + "입니다.<br>");
document.write("인수가 아무것도 전달되지 않으면 반환값은 " + addNum() + "입니다.<br>");
document.write("인수가 10개나 전달되도 반환값은 " + addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) + "로 잘 동작합니다!!");

 

 

<삼항 연산자를 이용>

function mul(a,b){
  
  b = (typeof b !== 'undefined') ? b :1;
  return a * b
}
document.write(mul(3,4) + "<br>")
document.write(mul(3))

//12

3

 

<디폴트 매개변수를 이용하여 매개변수 기본값을 바꿈>

 

function mul(a,b = 1){
  
  return a *  b;
}
document.write(mul(3,4) + "<br>");
document.write(mul(3));

 

<차례대로 인수를 빼는 예제>

 

function sub(){
  var firstNum = arguments[0];
  for(var i = 0; i < arguments.length-1; i++){
    
    firstNum -= arguments[i+1];
  }
  
  return firstNum;
}
document.write(sub(10,2,3) + "<br>");
document.write(sub(10,1,5,8))

 

 

 

 

 

 

<나머지 매개변수를 이용>

 

function sub(firstNum, ...restArgs){
  for(var i=0; i < restArgs.length; i++){
    firstNum -= restArgs[i]
  }
  
  return firstNum;
}
document.write(sub(10,2,3) + "<br>")
document.write(sub(10,1,5,8))

 

첫번째 인수를 변수 firstNum에 저장하고 나머지 인수들은 배열 restArgs에 저장

 

 

 

eval()

 

문자열로 표현된 JS코드를 실행하는 함수

 

var x = 10, y = 20;
var a = eval("x + y");
var b = eval("y * 3");
var c = (x * 5)
var d = ("y * 5");
document.write(a + "<br>" + b + "<br>" + c + "<br>" + d);

//30
60
50
y * 5

 

eval 없이 문자열로 연산을 실행하게 된다면 문자열 그대로인 "y * 5"가 출력된다.

 

isFinite()

 

전달된 값이 유한한 수인지 검사하여 그 결과 반환

 

인수로 전달된 값이 숫자가 아니라면, 숫자로 변환하여 검사

 

isFinite(123);       // true

isFinite(123e100);   // true

isFinite(0);         // true

isFinite(true);      // true

isFinite(false);     // true

isFinite(null);      // true

isFinite("123");     // true

isFinite("");        // true

 

isFinite("문자열");  // false

isFinite(undefined); // false

isFinite(NaN);       // false

 

 

isNaN()

 

 

전달된 값이 NaN인지 아닌지 검사하여 그 결과를 반환 typeof연산자를 대신 사용해도 됨.

 

isNaN(123);       // false

isNaN(123e100);   // false

isNaN(0);         // false

isNaN(true);      // false

isNaN(false);     // false

isNaN(null);      // false

isNaN("123");     // false

isNaN("");        // false

 

isNaN("문자열");  // true

isNaN(undefined); // true

isNaN(NaN);       // true

 

 

parseFloat()

 

 

문자열을 파싱하여 부동 소수점 수로 반환

 

parseInt()

 

정수로 반환

 

encodeURI()와 encodeURIComponent()

 

encodeURl()함수는 URI에서 주소를 표시하는 특수문자를 제외하고, 모든 문자를 이스케이프 시퀀스

처리하여 부호화함.

하지만 encodeURIComponent()함수는 URI에서 encodeURI()함수에서 부호화 하지 않은 모든 문자까지

포함하여 이스케이프 시퀀스 처리함.

 

var uri =  "http://google.com/search.php?name=홍길동&city=서울";

var enc1 = encodeURI(uri);
var enc2 = encodeURIComponent(uri);
document.write(enc1 + "<br>" + enc2);

//http://google.com/search.php?name=%ED%99%8D%EA%B8%B8%EB%8F%99&city=%EC%84%9C%EC%9A%B8
http%3A%2F%2Fgoogle.com%2Fsearch.php%3Fname%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26city%3D%EC%84%9C%EC%9A%B8

 

decodeURI()와 decodeURIComponent()

 

decodeURIComponent()함수는 encodeURIComponent()함수나 다른 방법으로 만들어진 URI 컴포넌트를 해독

 

 

var uri = "http://google.com/search.php?name=홍길동&city=서울";

 

var enc1 = encodeURI(uri);

var enc2 = encodeURIComponent(uri);

document.write(enc1 + "<br>" + enc2 + "<br><br>");

 

var dec1 = decodeURI(enc1);

var dec2 = decodeURIComponent(enc2);

document.write(dec1 + "<br>" + dec2);

 

//http://google.com/search.php?name=%ED%99%8D%EA%B8%B8%EB%8F%99&city=%EC%84%9C%EC%9A%B8
http%3A%2F%2Fgoogle.com%2Fsearch.php%3Fname%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26city%3D%EC%84%9C%EC%9A%B8

http://google.com/search.php?name=홍길동&city=서울
http://google.com/search.php?name=홍길동&city=서울

 

 

escape()와 unescape()

 

escape() 함수는 전달받은 문자열에서 특정 문자들을 16진법 이스케이프 시퀀스 문자로 변환

unescape()함수는 전달받은 문자열에서 escape()함수나 다른 방법으로 만들어진 16진법 이스케이프 시퀀스 문자를

원래의 문자로 변환

 

 

 

 

+) escape() 함수는 자바스크립트 1.5버전부터 더는 지원하지 않으므로, encodeURI() 함수나
encodeURIComponent() 함수를 대신 사용