[JavaScript] 변수 선언, 함수 정의 및 형태

변수

• 변수란
  • 데이터를 저장하기 위해 이름을 부여한 메모리 공간을 의미한다. 프로그램을 작성할 때 필요한 값을 저장하고 꺼내 쓰는 역할을 한다.

변수 선언

• 변수를 사용하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
• 선언 키워드 : var, let, const
• ES6버전에서 var의 단점을 보완한 let, const 가 도입되면서 var는 잘 사용하지 않는다.
• 선언 후 초기화를 해주지 않으면 변수의 값에는 쓰레기 값이 들어간다. var로 선언을 하면 자동으로 undefined로 초기화가 된다.

변수의 생성과정

1. 선언
2. 초기화 (undefined를 할당주는 단계)
3. 할당

var와 let의 차이점

• var는 선언과 초기화가 동시에 된다. 그래서 할당 전에 호출하면 'undefined'가 나온다.
• let은 선언단계와 초기화 단계가 분리되어서 진행된다. 호이스팅되면서 선언단계가 이루어지지만 초기화는 코드가 실행됐을 때 수행되기 때문에 에러가 발생한다.

var name;
console.log(name);    // undefined


let name;
console.log(name);    //ReferenceError

 

 

---

함수

함수 정의

• 함수정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.
• 함수 정의 방식
  • 함수 선언문
  • 함수 표현식
  • Function 생성자 함수
  • 화살표 함수

1. 함수 선언문

• 함수 선언문은 함수 리터럴 형태와 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.

function add(x, y) {
    return x + y;

// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다.
console.dir(add);     // f add(x, y)

// 함수 호출
console.log(add(2, 5))  // 7

2. 함수 표현식

• 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식
• 함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수라 한다.

var add = function(x, y) {
    return x + y;
};

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5));   // 7

3. Function 생성자 함수

• JS가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new연산자와 함께 호출하면 함수 객체를 생성해서 반환하다.
• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않다.

생성자 함수(constructor function)
객체를 생성하는 함수를 말한다. 객체를 생성하는 방식은 객체 리터럴 이외에 다양한 방법이 있다.

var add = new Function('x', 'y', 'return x + y');
console.log(add(2, 5));        // 7

4. 화살표 함수

• ES6에서 도입된 화살표 함수는 항상 익명함수로 정의한다.
• 생성자 함수로 사용할 수 없으며, 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5));        // 7

 

함수의 형태

1. 즉시 실행 함수

• 함수 정의와 동시에 즉시 호출되는 함수
• 단 한 번만 호출되며 다시 호출할 수 없다.
• 익명 함수를 사용하는 것이 일반적이나 함수 이름이 있는 기명 즉시 실행 함수도 사용할 수 있다. 하지만 함수 선언문이 아니라 함수 리터럴로 평가되며 함수 이름은 함수 몸체에서만 참조할 수 있는 식별자이므로 다시 호출할 수는 없다.
• 즉시 실행 함수는 반드시 그룹 연산자 (...)로 감싸야 한다.

// 기명 즉시 실행 함수
(function foo() {
    var a = 3;
    var b = 5;
    return a * b;
}());

foo();        // ReferenceError: foo is not defined

// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
var res = (function() {
    var a = 3;
    var b = 5;
    return a * b;
}());

console.log(res);    // 15

2. 재귀 함수

• 재귀 호출(자기 자신을 호출하는 것)을 수행하는 함수

// 팩토리얼은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n - 1) * n
function factorial(n) {
    // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
    if (n <= 1) return 1;
    // 재귀호출
    return n * factorial(n - 1);
}

3. 중첩 함수

• 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다. 그리고 중첩 함수를 포함하는 함수는 외부 함수라 부른다.

function outer() {
    var x = 1;

    // 중첩 함수
    function inner() {
        var y = 2;
        // 외부 함수의 변수를 참조할 수 있다.
        console.log(x + y);        // 3
    }
    inner();
}

outer();

4. 콜백 함수

• 함수의 변하지 않는 공통 로직은 미리 정의해두고, 경우에 따라 변경되는 로직은 추상호해서 함수 외부에서 함수 내부로 전달하는 것이다.
• 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
• 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
• 즉, 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
• 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다. 다시 말해, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

// 고차 함수
// 외부에서 전달받은 f를 n번 반복 호출
function repeat(n, f) {
  for (var i = 0; i < n; i++) {
    f(i); // i를 전달하며 f 호출
  }
}

// 콜백 함수1
var logAll = function(i) {
  console.log(i);
};

// 고차 함수에 콜백 전달
repeat(5, logAll); // 0 1 2 3 4

// 콜백 함수2
var logOdds = function(i) {
  if (i % 2) console.log(i);
};

repeat(5, logOdds); // 1 3

• 콜백 함수는 비동기 처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.

// 콜백 함수를 사용한 이벤트 처리
document.getElementById('myButton').addEventListener('click', function() {
  console.log('button clicked');
});

// 콜백 함수를 사용한 비동기 처리
setTimeout(function() {
  console.log('1초 경과');
}, 1000);