TCP school | 6. 함수

22. 함수의 기초

함수 : 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록. 필요할 때마다 호출하여 해당 작업 반복해서 수행 가능.

블록 : 함수나 실행문의 중괄호({})로 묶여진 부분.

자바스크립트 함수

 : 자바스크립트에서는 함수도 하나의 datatype임.

 : 함수를 변수에 대입하거나 함수에 프로퍼티를 지정하는 것도 가능.

 : 함수는 다른 함수 안에 중첩되어 정의될 수도 있음.

함수의 정의

함수의 구성요소

1. 함수의 이름

2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

3. 중괄호({})로 둘러싸인 자바스크립트 실행문

매개변수(parameter) : 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수.

인수(argument) : 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수.

 : 인자의 개수나 순서 중요.

반환문(return)

 : 자바스크립트에서 함수는 return 포함 가능.

 : return은 함수의 실행을 중단하고, 함수에서 실행된 결과(표현식의 값)을 호출자에게 반환. 배열이나 객체를 포함한 모든 타입의 값을 반환 가능.

함수의 호출

 : 정의된 함수는 프로그램 내에서 호출되어야 실행됨.

값으로서의 함수

 : 자바스크립트에서 함수는 문법적 구문이자 값(value)임.

 : 함수가 변수에 대입될 수 있고, 다른 함수의 인수로 전달될 수 있음.

---

23. 변수의 유효 범위

변수의 유효 범위(variable scope)

변수 : 객체나 함수.

변수의 유효 범위 : 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합.

지역 변수(local variable)

지역 변수 : 함수 내에서 선언된 변수.

 : 함수가 종료되면 메모리에서 삭제됨.

 : 함수의 매개변수 또한 지역 변수처럼 동작함.

전역 변수(global variable)

 : 웹 페이지가 닫혀야만 메모리에서 삭제됨.

 : 자바스크립트에 지역 변수를 선언할 때, 반드시 var 키워드 사용(아니면 전역 변수로 선언됨).

 : 전역 변수와 지역 변수의 이름이 같으면 함수 내에서는 지역 변수만 호출할 수 있음. 밖에서는 전역 변수 호출 가능.

 : 함수 내에서 이름이 같은 전역 변수를 호출하고 싶으면, 전역 변수가 window 객체의 프로퍼티임을 명시하면 됨.

var num = 10; // 전역 변수 num을 선언함.
function globalNum() {
    var num = 20; // 같은 이름의 지역 변수 num을 선언함.
    document.write("함수 내부에서 지역 변수 num의 값은 " + num + "입니다.<br>");
    document.write("함수 내부에서 전역 변수 num의 값은 " + window.num + "입니다.<br>");
}
globalNum(); // 함수 globalNum()을 호출함.

---

24. 함수의 유효 범위(function scope)

 : 대부분의 프로그래밍 언어는 블록({}) 안에 정의된 변수를 블록 외부에서 접근할 수 없음.

 : 자바스크립트는 함수를 블록 대신 사용.

 : 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근 가능.

  전역 함수는 모든 전역 변수와 전역 함수에 접근 가능.

  내부 함수(다른 함수 내에 선언)는 부모 함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지 접근 가능.

함수 호이스팅(hoisting)

함수 호이스팅 : 자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 뜻. 그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 작용함. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작함.

호이스팅 전
var globalNum = 10;     // globalNum을 전역 변수로 선언함.
function printNum() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①
    var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

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

 : 함수 호이스팅은 자동으로 수행되지만, 함수 블록의 첫 부분에 변수를 선언하는 것이 좋음.

---

25. 매개변수와 인수

매개변수(parameter)

 : 매개변수 타입 따로 명시하지 않음.

 : 함수를 호출할 때 인수(argument)로 전달된 값에 대해 타입 검사 하지 않음.

 : 함수의 정의보다 적은 수의 인수가 전달되더라도 오류를 발생시키지 않음. 자동으로 undefined 값 설정.

arguments 객체

 : 함수의 정의보다 더 많은 인수가 전달되면, 매개변수에 대입되지 못한 인수들은 참조할 방법이 없게 됨. 하지만 argument 객체를 이용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 접근 가능.

 : 전달된 인수를 배열의 형태로 저장하고 있음(length 프로퍼티). 하지만 실제로 Array 객체는 아님

디폴트 매개변수(익스플로러, 사파리, 오페라는 지원하지 않음)

 : 기본 값 undefined.

 :  변경 가능.

function mul(a, b = 1) { // 인수가 한 개만 전달되면 나머지 매개변수의 값을 언제나 1로 설정해 줌.
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

나머지 매개변수(익스플로러, 사파리에서 지원하지 않음)

 : 생략 접두사(...)를 사용함. restArgs.

---

26. 미리 정의된 전역 함수(predefined functions)

eval() : 문자열로 표현된 자바스크립트 코드를 실행하는 함수.

parseInt() : 문자열을 파싱하여 정수로 반환. 문자열의 시작이 "0x"이면 해당 문자열을 16진수로 인식.

encodeURI() / encodeURIComponent() : encodeURI()는 특수문자 제외하고 모든 문자를 escape sequences 처리. encodeURIComponent()는 부호화하지 않는 모든 문자를 포함하여 escape sequences 처리.

escape() :  문자열에서 특정 문자들을 16진법 escape sequences 문자로 변환(더는 지원하지 않음.)

Number() : 전달받은 객체의 값을 숫자로 변환.

Number("123.000");    // 123
Number("12 34 56");   // NaN
Number("123 초콜릿"); // NaN
Number(null);         // 0