자바스크립트의 함수

자바스크립트의 함수

자바스크립트에서 함수는 일급 객체(first class citizen)다. 따라서 함수는 변수, 객체, 배열 등에 저장될 수 있고 다른 함수에 전달하는 전달인자 혹은 반환 값으로도 사용될 수 있다.

일급 객체?
프로그래밍 언어에서 특정 type을 1) 변수나 자료 구조 안에 담을 수 있고, 2) 파라미터로 전달할 수 있고, 3) 리턴 값으로 사용할 수 있는 경우, 해당 type을 1급 객체로 간주한다.

 // 함수의 인자에 함수 전달 가능
var foo = function(func) {
  if(typeof func == 'function'){
    func();
  }
}

foo(function(){
  console.log("파라미터에 함수를 넘겨줘서 호출하는 예제");
});

위와 같이 함수를 함수의 인자로 넘겨주면, 함수 안에서 넘겨받은 함수를 실행해줄 수 있다.

// 함수 안에서 함수를 리턴하여 리턴된 함수를 호출
var foo2 = function() {
  return function(){
    console.log("함수 안에서 함수를 리턴하여 리턴된 함수를 호출하는 예제22");
  };
}

var baz = foo2();
baz();

// foo2()(); 도 위의 두 줄과 같은 의미이다.

함수 정의 방법

1. 함수 선언문(선언적 함수)

function add(a, b){
	console.log("함수 생성");
}

선언적 함수는 함수를 선언할 때 이름을 붙여준다.

2. 함수 표현식(익명 함수)

const add = function(a, b){
	console.log("함수 생성");
}

익명 함수는 위와 같이 변수에 대입해서 사용해주어야 한다.

3. function 생성자

let a = 1;
let b = 2;
const add = new Function("a", "b", "var sum = 0; sum = a + b; console.log(sum);");
add(a, b);

함수 정의 방법에 따른 차이

console.log("add: " + add(10, 20)); // 선언적 함수는 호출한 시점에서 이미 메모리에 올라와있음
console.log(typeof add2); // undefined
console.log("add2: " + add2(10,20)); // 에러

// 선언적 함수
function add(a, b) {
  var sum = a + b; // 지역 변수
  return sum;
}

// 익명 함수
var add2 = function(a, b) {
  var sum = a*b;
  return sum;
}

위와 같이 작성하였을 때, 선언적 함수는 선언된 위치가 어디든 메모리에 올려두고 실행되기 때문에 문제없이 호출되는 반면(선언적 함수의 호이스팅), 익명 함수의 호출에서는 에러가 난다.

자바스크립트의 실행 컨텍스트

실행 컨텍스트 영역이란 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라는 뜻으로, 다른 함수에서의 scope랑 같은 의미로 사용된다.

const myVar = "전역변수";
function myFunc(){
  const myVar = "지역변수";
  console.log("지역변수: " + myVar);
  console.log("전역변수: " + this.myVar);
  console.log("전역변수: " + window.myVar);
}

그런데 만약 myFunc 함수 안에 myVar이라는 전역 변수와 같은 이름의 지역 변수가 없다면, 전역 변수 myVar이 출력될 것이다.

한편, JavaScript에서는 다음과 같은 블록({}) 유효범위를 지원하지 않는다.

{
	let a = 10;
}

console.log(a);

---

변수 호이스팅

호이스팅이란 변수의 선언부를 함수의 최상단으로 끌어올려 주는 것을 말한다. 따라서 변수 호이스팅으로 인해 자바스크립트에서는 변수를 사용하기 이전에 선언해두지 않아도 유효 범위 내에 선언된 변수를 바로 사용할 수 있다.

cf. var를 붙이지 않은 변수

var type을 붙이지 않은 변수는 전역 변수처럼 사용된다. let, const의 사용으로 현재는 이런 식의 문법이 거의 사라졌지만 여전히 사용되는 코드가 있으므로 알아두도록 하자.

cf. null과 undefined

let typeExample;
console.log(typeof typeExample); // undefined

typeExample = null;
console.log(typeof typeExample); // object

null과 undefined는 서로 다른 의미이지만, 동등연산자(==)를 사용하면 두 값이 같다고 간주하기 때문에 엄격한 일치연산자(===)를 사용하는 것이 좋다.

cf. 자바스크립트와 ECMA스크립트?

JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.
따라서 ECMAScript 문서를 읽으면 어떻게 스크립트 언어를 만들 수 있는지를 알 수 있고, JavaScript 문서를 읽으면 어떻게 스크립트 언어를 쓸 수 있는지를 알 수 있다.