해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 JavaScript lesson 12, 13에 해당되는 함수, 타입 체크에 대해 알아보겠습니다.
12. 함수(Function)
어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록입니다.
동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적 입니다.
JavaScript의 함수는 객체이며, 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 것 입니다.
함수 정의
함수 선언문
// 함수 선언문
function square(number) {
return number * number;
}
function
키워드와 함수명, 매개변수 목록(()
로 감싸고 콤마로 분리), 함수 몸체({}
로 감싸고 return
문으로 결과값 반환)로 이루어져 있습니다.
함수 표현식
함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는 방식 입니다.
// 함수 표현식
var bar = function(number) {
return number * number;
};
함수명을 생략하는 게 일반적이며, 호출할 시에는 함수를 가리키는 변수명을 사용해야 합니다.
함수명을 사용해 호출하게 되면 에러가 발생하는데, 이는 함수 표현식에서 사용한 함수명은 외부 코드에서 접근 불가능하기 때문 입니다.
함수명은 함수 몸체에서 재귀적 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 합니다.
함수 선언문으로 정의한 함수 square
의 경우, 함수명으로 호출할 수 있었는데 이는 자바스크립트 엔진에 의해 함수 표현식으로 형태가 변경 되었기 때문 입니다.
함수명과 함수 참조값을 가진 변수명이 일치하므로 함수명으로 호출되는 듯 보이지만 사실은 변수명으로 호출된 것 입니다.
따라서 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것 입니다.
Function 생성자 함수
Function 생성자 함수는 Function.prototype.constructor
프로퍼티로 접근할 수 있습니다.
// 기본 형태
new Function(arg1, arg2, ... argN, functionBody)
var square = new Function('number', 'return number * number');
console.log(square(10)); // 100
형태는 위와 같으며, 해당 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않습니다.
함수 호이스팅
함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능하며, 이를 함수 호이스팅 이라고 합니다.
호이스팅이란 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다.
즉, JavaScript는 모든 선언문(var
, let
, const
, function
, function*
, class
)이 선언되기 이전에 참조 가능하다.
var res = square(5);
function square(number) {
return number * number;
}
함수 선언문
으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장합니다.
함수 선언, 초기화, 할당이 한번에 이루어지기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출 가능 합니다.
var res = square(5); // TypeError: square is not a function
var square = function(number) {
return number * number;
}
함수 표현식
의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생 합니다.
- 변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행
- 호이스팅된 변수는
undefined
로 초기화 되고, 실제값의 할당은 할당문에서 이루어짐
함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고, runtime
에 해석되고 실행됩니다.
따라서 함수 선언문이 아닌 함수 표현식을 권고하고 있습니다.
함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하게 됩니다.
이는 애플리케이션의 응답속도를 현저히 떨어트릴 수 있으므로 주의해야 할 필요가 있습니다.
First-class object (일급 객체)
일급 객체란 생성, 대입, 연산, 인자 또는 반환 값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미합니다.
일급 객체는 다음의 조건을 갖추고 있습니다.
무명의 리터럴로 표현 가능
변수나 자료 구조(객체, 배열 등)에 저장 할 수 있음
함수의 매개변수에 전달 할 수 있음
반환 값으로 사용할 수 있음
JavaScript의 함수는 위의 조건을 모두 만족하므로 Javascript의 함수는 일급객체 입니다.
매개변수(Parameter, 인자)
함수의 작업 실행을 위해 추가적인 정보가 필요할 경우, 매개변수를 지정 합니다.
매개변수는 함수 내에서 변수와 동일하게 동작 합니다.
매개변수(parameter, 인자) vs 인수(argument)
var foo = function (p1, p2) {
console.log(p1, p2);
};
foo(1); // 1 undefined
매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보합니다.
함수에 전달한 인수는 매개변수에 할당되며, 인수를 전달하지 않으면 매개변수는 undefined
로 초기화 됩니다.
Call-by-value
원시 타입 인수는 Call-by-value(값에 의한 호출)로 동작합니다.
호출 시 원시 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값을 복사하여 함수로 전달하는 방식입니다.
이때 함수 내에서 매개변수를 통해 값이 변경되어도 전달이 완료된 원시 타입 값은 변경되지 않습니다.
function foo(primitive) {
primitive += 1;
return primitive;
}
var x = 0;
console.log(foo(x)); // 1
console.log(x); // 0
Call-by-reference
객체형 인수는 Call-by-reference(참조에 의한 호출)로 동작합니다.
이는 함수 호출 시 참조 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값이 복사되지 않고, 객체의 참조 값이 매개변수에 저장되어 함수로 전달되는 방식입니다.
함수 내에서 매개변수의 참조 값을 이용하여 객체의 값을 변경 했을 때 전달되어진 참조형의 인수값도 같이 변경됩니다.
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'Kim';
obj.gender = 'female';
}
var num = 100;
var obj = {
name: 'Lee',
gender: 'male'
};
console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}
changeVal(num, obj);
console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}
반환값
함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)할 수 있으며, 반환된 값을 반환값(return value)이라 합니다.
return
키워드는 함수를 호출한 코드에 값을 반환할 때 사용합니다.
함수는 한 번에 여러 개의 값(배열 등을 이용)을 리턴할 수 있으며, 반환을 생략할 수 있습니다. (undefined
반환)
return
키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아가며 return
키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않습니다.
함수 객체의 프로퍼티
arguments 프로퍼티
함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회 가능한 유사 배열 객체(array-like object)이며 함수 내부에서 지역 변수처럼 사용 됩니다.
- 유사 배열 객체?
length
프로퍼티를 가진 객체 - 지역 변수? 함수 내부에서 선언된 변수로 내부에서만 접근할 수 있는 변수
arguments
객체는 매개변수 갯수가 확정되지 않은 가변 인자 함수를 구현할 때 유용하게 사용됩니다.
caller 프로퍼티
caller
프로퍼티는 자신을 호출한 함수를 의미 합니다.
function foo(func) {
var res = func();
return res;
}
function bar() {
return 'caller : ' + bar.caller;
}
console.log(foo(bar)); // caller : function foo(func) {...}
console.log(bar()); // null (browser에서의 실행 결과)
length 프로퍼티
함수 정의 시 작성된 매개변수 갯수를 의미 합니다.
function baz(x, y) {
return x * y;
}
console.log(baz.length); // 2
arguments.length
의 값과는 다를 수 있으므로 주의해야 합니다.
arguments.length
는 함수 호출시 인자의 갯수 입니다.
name 프로퍼티
함수 명을 나타내며 기명함수의 경우 함수 명을 값으로 갖고, 익명함수의 경우 빈 문자열을 값으로 갖는다.
// 기명 함수 표현식(named function expression)
var namedFunc = function multiply(a, b) {
return a * b;
};
// 익명 함수 표현식(anonymous function expression)
var anonymousFunc = function(a, b) {
return a * b;
};
console.log(namedFunc.name); // multiply
console.log(anonymousFunc.name); // ''
proto 접근자 프로퍼티
모든 객체는 [[Prototype]]
이라는 내부 슬롯이 있으며, [[Prototype]]
내부 슬롯은 프로토타입 객체를 가리킵니다.
- 프로토타입 객체? 다른 객체에 공유 프로퍼티를 제공하는 객체
__proto__
프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티 입니다.
단, 직접 접근할 수 없고 간접적으로 프로토타입 객체에 접근할 수 있습니다.
// __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 객체에 접근할 수 있다.
// 객체 리터럴로 셍성한 객체의 프로토타입 객체는 Object.prototype이다.
console.log({}.__proto__ === Object.prototype); // true
// 함수 객체의 프로토타입 객체는 Function.prototype이다.
console.log((function() {}).__proto__ === Function.prototype); // true
prototype 프로퍼티
함수 객체만이 소유하는 프로퍼티이며, 일반 객체에는 해당 프로퍼티가 없습니다.
함수가 객체를 생성하는 생성자 함수로 사용될 때, 생성자 함수가 생성한 인스턴스의 프로토타입 객체를 가리킵니다.
console.log(Object.getOwnPropertyDescriptor(function() {}, 'prototype'));
// {value: {…}, writable: true, enumerable: false, configurable: false}
함수의 다양한 형태
즉시 실행 함수
함수의 정의와 동시에 실행되는 함수를 의미하며, 최초 한 번만 호출되는 특징을 갖고 있습니다. (초기화 처리에 사용)
(function () {
// ...
}());
즉시 실행 함수 내에 처리 로직을 모아 두면 혹시 있을 수도 있는 변수명 또는 함수명의 충돌을 방지할 수 있습니다.
내부 함수
함수 내부에 정의된 함수를 의미하며, 부모 함수 or 부모 함수의 외부에서 접근할 수 없습니다.
재귀 함수
자기 자신을 호출하는 함수를 의미하며, 무한히 연쇄 호출하기에 멈출 수 있는 탈출 조건을 반드시 만들어야 합니다. (무한 호출시 stackoverflow
에러 발생)
콜백 함수
명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 의미합니다.
대표적인 예시로는 이벤트 핸들러 처리가 있으며, 주로 비동기식 처리 모델에 사용됩니다.
- 비동기식 처리 모델? 처리가 종료되면 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출
13. 타입 체크(Type Checking)
변수나 반환값의 타입을 사전에 지정하지 않는 JavaScript의 동적 타이핑으로 인해서 JavaScript는 타입 체크가 필요 합니다.
typeof
타입 연산자 typeof
는 피연산자의 데이터 타입을 문자열로 반환합니다.
typeof ''; // string
typeof 1; // number
typeof NaN; // number
typeof true; // boolean
typeof []; // object
typeof {}; // object
typeof new String(); // object
typeof new Date(); // object
typeof /test/gi; // object
typeof function () {}; // function
typeof undefined; // undefined
typeof null; // object (설계적 결함)
typeof undeclared; // undefined (설계적 결함)
typeof
는 null을 제외한 원시 타입을 체크하는 데는 문제가 없지만 객체의 종류까지 구분하여 체크할 때는 적합하지 않습니다.
Object.prototype.toString
해당 메소드는 객체를 나타내는 문자열을 반환합니다.
var obj = new Object();
obj.toString(); // [object Object]
Function.prototype.call
메소드를 사용하면 모든 타입의 값의 타입을 알아낼 수 있습니다.
자세한 예시는 원본 글 참고 부탁드립니다.
instanceof
해당 연산자는 피연산자인 객체가 우항에 명시한 타입의 인스턴스인지 여부를 알려줍니다.
프로토타입 체인에 존재하는 모든 constructor
(타입)를 검색하여 일치하는 constructor
가 있다면 true
를 반환 합니다.
function Person() {}
const person = new Person();
console.log(person instanceof Person); // true
console.log(person instanceof Object); // true
유사 배열 객체
배열인지 체크하기 위해서는 Array.isArray
메소드를 사용합니다.
유사 배열 객체(array-like object)은 length
프로퍼티를 갖는 객체로 문자열, arguments
, HTMLCollection
, NodeList
등은 유사 배열 입니다.
유사 배열 객체는 length
프로퍼티가 있으므로 순회할 수 있으며 call
, apply
함수를 사용하여 배열의 메소드를 사용할 수도 있습니다.
여기까지 JavaScript lesson 12, 13에 해당되는 함수, 타입 체크에 대해 알아보았습니다.