[Javascript] 함수(function)

1. 함수(function)

function num(x,y){
    return x + y;
}
console.log(num(1,2))

  - 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.

  - 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있다.

  

2. 함수 선언

function 함수 이름(매개변수1, 매개변수2, ...){
	함수가 호출되었을 때 실행시킬 실행문
}

  - 함수 이름은 함수를 구분하는 식별자(identifier)다.

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

 

3. 반환(return)문

function num(x,y){
    return x + y;
}

var number = num(1,2);
console.log(number);

  - 반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환한다.

  - 반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

 

4. 변수의 유효 범위(variable scope)

  - 자바스크립트에서 객체나 함수는 모두 변수(variable)다.

  - 변수의 유효 범위란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.

  - 변수는 유효 범위에 따라 지역 변수(local variable)와 전역 변수(global variable)로 나뉜다.

 

4-1 지역 변수(local variable)

function local(){
    var num = 100; //지역 변수 선언
    console.log("함수 내부에서 변수 num : " + typeof num); //number
}
local()
console.log("함수 호출이 끝난 후 : " + typeof num); //undefined

  - 지역 변수는 함수 내에서 선언된 변수를 가리킨다.

  - 변수가 선언된 함수 내에서 유효하며, 함수가 종료되면 메모리에서 사라진다.

  - 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작한다.

 

4-2 전역 변수(global variable)

var num = 100; //전역 변수 선언

function global() {
    console.log(num);//100
    num = 200; //함수 내부에서 값 변경
}

global() //함수 호출
console.log(num); //200

  - 함수 외부에서 선언된 변수를 가리킨다.

  - 프로그램의 어느 영역에서나 접근이 가능하며, 웹페이지가  닫혀야 메모리에서 사라진다.

 

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

var x = 100, y =200; //전역 변수로 선언

function a(){
    return x + y; //전역 변수 x, y 접근
}
console.log(a()); //300

function parent(){
    var x = 10, y = 20; // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위 제한
    function b(){ //함수 내부에 함수 선언
        return x + y; //전역 변수가 아닌 지역 변수 x, y 접근
    }
    return b();
}
console.log(parent);

  - 자바스크립트는 다른 언어와 달리 함수를 블록 대신 사용한다.

  - 블록(block)이란 코드 내에 있는 중괄호({})로 둘러싸인 부분을 말하는데, 이 블록을 기준으로 하는 유효 범위를 블록 단위의 유효 범위라고 한다.

  - 전역 함수는 모든 전역 변수와 전역 함수에 접근할 수 있다. 반면, 다른 함수 내에 정의된 '내부 함수'는 그 함수의 부모 함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지 접근이 가능하다.

 

6. 함수 호이스팅(hoisting)

var number = 10; //전역 변수 선언

function num(){
    console.log(number); //undefined
  
    var number = 20; //지역 변수 선언
    console.log(number); //20
}
num();

  - 호이스팅(hoisting)은 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 변수가 함수 내에서 정의되었을 경우, 선언부분만 함수의 최상위로, 함수 바깥에서 정의된 경우, 전역 함수의 최상위로 변경이 된다.

  - 위 코드에서 처음 출력 코드에서 전역 변수를 가리킨다고 생각하기 쉽지만 결과는 undefined다.  그 이유는 호이스팅 후의 코드를 참고하면 알 수 있다.

 

↓호이스팅 후의 코드

var number = 10; //전역 변수 선언

function num(){
    var number; //지역 변수
    console.log(number);
  
    var number = 20; //지역 변수 선언
    console.log(number);
}
num();

  - num 함수 내에서 첫 번째 변수로 선언된 number는 지역 변수로 선언만 되어 있고 초기화는 되어 있지 않은 상태다.

따라서 맨 처음 출력 코드가 undefined 나온 이유는 아직 초기화되지 않은 변수에 접근해서 그렇다.

  - 실제로 변수가 초기화되는 시점은 var number = 20;부터라고 볼 수 있다.

  - 자바스크립트에서는 함수 호이스팅이 자동으로 수행되지만, 항상 함수 블록의 첫 부분에 변수를 선언하는 것이 좋다.

 

링크 <- 왼쪽 링크를 참고하면 더 쉽게 이해할 수 있다.

 

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

  - 자바스크립트는 사용자의 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하고 제공한다. 따라서 어떠한 타입의 객체에서도 바로 사용할 수 있다.

 

7-1 eval()

var x = 100, y = 200;
var a = eval("x + y");
var b = eval("y * 10");

console.log(a); //300
console.log(b); //2000
console.log(a + b); //2300

  - 형식 : eval("문자열")

  - 문자열로 표현된 자바스크립트 코드를 실행하는 함수다.

 

7-2 isFinite()

var a = 200;
var b = "pterosaurs";
var c = undefined;
var d = NaN;

console.log(isFinite(a)); //true
console.log(isFinite(b)); //false
console.log(isFinite(c)); //false
console.log(isFinite(d)); //false

  - 값이 유한한 숫자면 true, 아니면 false를 반환한다.

 

7-3 isNaN()

var a = 200;
var b = "pterosaurs";
var c = undefined;
var d = NaN;

console.log(isNaN(a)); //false
console.log(isNaN(b)); //true
console.log(isNaN(c)); //true
console.log(isNaN(d)); //true

  - 값이 NaN이면 true, 아니면 false를 반환한다.

 

7-4 parseFloat()

var a = "200";
var b = "200.55"
var c = "100 200"
var d = "string";

console.log(parseFloat(a)); //true
console.log(parseFloat(b)); //true
console.log(parseFloat(c)); //true
console.log(parseFloat(d)); //NaN

  - 문자열을 파싱하여 실수로 반환한다.

 

7-5 parseInt()

var a = "200";
var b = "200.55"
var c = "100 200"
var d = "string";

console.log(parseInt(a)); //200
console.log(parseInt(b)); //200
console.log(parseInt(c)); //100
console.log(parseInt(d)); //NaN

  - 문자열을 파싱하여 정수로 반환한다.

 

7-6 Number()

var a = "200";
var b = "200.55"
var c = "100 200"
var d = "string";

console.log(Number(a)); //200
console.log(Number(b)); //200.55
console.log(Number(c)); //NaN
console.log(Number(d)); //NaN

  - 전달받은 객체의 값을 숫자로 반환한다.

 

7-7 String()

var a = 200; 
var b = null; 
var c = "100 200"; 
var d = "string"; 
var e = Boolean(1); 

console.log(String(a)); //200
console.log(String(b)); //null
console.log(String(c)); //100 200
console.log(String(d)); //string
console.log(String(e)); //true

  - 전달받은 객체의 값을 문자열로 반환한다.