21/09/17 TL. 자바스크립트 - 함수(2), 스코프

🍉 함수 호출

🥥 매개변수와 인수

함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 undefined로 초기화된 이후, 인수가 순서대로 할당된다.

function add(x, y) { // 암묵적으로 x, y를 선언, 초기화 후 인수 2, 5를 넘겨받는 과정을 거친다.
	return x + y; // x + y의 값을 평가한 뒤 반환한다.
}

var result = add(2, 5); // 매개변수 x, y로 인수 2, 5를 넘긴다.
// result에는 평가된 x + y의 값이 담긴다.

console.log(add(2)) // NaN
// x에는 2를 넘기지만, b는 넘길 값이 없기 때문에 undefined 상태로 유지된다.
// 2 + undefined 이므로 NaN이 반환된다.

fuction add2(x, y) {
	console.log(arguments);
	// Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]

	return x + y;
}

console.log(add2(2, 5, 10)); // 7
// 초과된 인수는 arguments 객체의 프로퍼티로 보관된다.

🥥 인수 확인

js의 경우 다음과 같은 경우도 문법상 어떠한 문제가 없어 그대로 실행한다.

function add(x, y) { // 암묵적으로 x, y를 선언, 초기화 후 인수 2, 5를 넘겨받는 과정을 거친다.
	return x + y; // x + y의 값을 평가한 뒤 반환한다.
}

var result = add(2, 5); // 매개변수 x, y로 인수 2, 5를 넘긴다.
// result에는 평가된 x + y의 값이 담긴다.

console.log(add(2)) // NaN
// x에는 2를 넘기지만, b는 넘길 값이 없기 때문에 undefined 상태로 유지된다.
// 2 + undefined 이므로 NaN이 반환된다.

fuction add2(x, y) {
	console.log(arguments);
	// Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]

	return x + y;
}

console.log(add2(2, 5, 10)); // 7
// 초과된 인수는 arguments 객체의 프로퍼티로 보관된다.

1. js의 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
2. js는 동적 타입 언어이다. 따라서 매개변수 타입을 사정에 지정하지 않는다.

와 같은 이유로 발생하는 문제들이다. 따라서, js는 함수를 정의할 때 적절한 인수가 전달되었는지 확인해야 한다.

function add(x, y) {
	if (typeof x !== 'number' || typeof y !== 'number') {
		throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
	}
	
	return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 합니다.

인수가 전달되지 않을 수도 있는 경우엔 매개변수에 기본값을 지정하면 된다.

🥥 매개변수의 최대 개수

매개변수는 순서에 의미가 있다. 따라서 숫자가 많아지면 순서 제어 등의 이유로 함수 사용에 어려움이 생기기 때문에 가급적 적게 하는 것이 좋다. 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.

따라서 매개 변수는 최대 3개 이상 넘지 않는 것을 권장하며 더 많아진다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다(ajax가 그러한 형태를 지닌다). 이 경우 프로퍼티 키만 정확히 지정하면 매개변수 순서를 신경 쓰지 않아도 된다.

그러나 이러한 방법도 함수 내부에서 객체를 변경했을 떄 함수 외부의 객체가 변경되는 부수 효과가 발생하기 때문에 주의해야 한다.

🍉 참조에 의한 전달과 외부 상태의 변경

원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다.

function changeVal(primitive, obj) {
	primitive += 100;
	obj.name = 'Kim';
}

var num = 100;
var person = { name: 'Lee' };

changeVal(num, person);

console.log(num); // 100
consoel.log(person); // {name: "Kim"}

원시 값은 값 자체가 복사돼 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경해도 원본이 오염되지 않는다.

그러나, 객체 타입은 참조 값이 복사되어 매개변수에 전달되기 때문에 원본이 훼손된다. 이런 경우 상태 변화를 추적하기 어려워진다. 이런 경우 해결 법 중 하나는 객체를 불변 객체로 만들어 사용하는 것이다. 즉, 깊은 복사를 통해 새로운 객체를 생성하고 재할당해 교체하는 것이다.

외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다. 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 프로그래밍 패러다임을 함수형 프로그래밍이라 한다.

🍉 다양함 함수의 형태

🥥 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 말한다. 단 한 번만 호출되며 다시 호출할 수 없다. 일반적으로 익명 함수를 사용한다.

function changeVal(primitive, obj) {
	primitive += 100;
	obj.name = 'Kim';
}

var num = 100;
var person = { name: 'Lee' };

changeVal(num, person);

console.log(num); // 100
consoel.log(person); // {name: "Kim"}

즉시 실행 함수는 반드시 그룹 연산자 ()로 감싸야 하며 그렇지 않으면 SyntaxError를 반환한다. js엔진이 암묵적으로 함수 선언문 뒤에(즉, 중괄호 뒤에) ; 을 암묵적으로 붙이기 때문이다. 따라서 이 경우 그룹 연산자로 해석하고 피연산자가 없기 때문에 에러가 발생한다.

그룹 연산자의 피연산자는 값으로 평가되기 때문에 함수 리터럴로 평가되어 함수 객체가 된다. 즉, 함수 리터럴을 평가해 함수 객체를 생성하기 위해 그룹 연산자로 묶는 것이다.

이 외에도 여러 방법이 있다.

(function () { // 이 경우가 가장 일반적이다.
	// ...
}());

(function () {
	// ...
})();

!function() {
	// ...
}();

+function() {
	// ...
}();

즉시 실행 함수도 값 반환, 인자 전달 등의 기능을 할 수 있다.

var res = (function () {
	var a = 3;
	var b = 5;
	return a * b;
}());

console.log(res); // 15

res = (function (a, b) {
	return a * b;
}(3, 5));

console.log(res); // 15

🥥 재귀 함수

재귀 호출할 때는 함수 이름도 되고, 식별자로도 가능하다.

var res = (function () {
	var a = 3;
	var b = 5;
	return a * b;
}());

console.log(res); // 15

res = (function (a, b) {
	return a * b;
}(3, 5));

console.log(res); // 15

🥥 중첩 함수

ES6 이전에는 코드의 최상위 또는 다른 함수 내부에서만 함수를 정의할 수 있었으나 ES6부터는 if 문이나 for문 등의 코드 블럭 내에서도 정의할 수 있다. 물론 바람직하진 않다.

🥥 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 하며, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수를 고차함수(HOF)라고 한다.

콜백함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다. 따라서 고차 함수에 콜백 함수를 전달할 때 콜백 함수를 호출하지 않고 함수 자체를 전달해야 한다.

콜백 함수를 익명 함수 리터럴로 정의하면서 곧바로 고차 함수에 전달하는 것이 일반적이다.

function repeat(n, f) {
	for (var i = 0; i < n; i++) {
		f(i); // i를 전달하며 f를 호출한다.
	}
}

reapeat(5, function (i) {
	if (i % 2) console.log(i);
}); // 1 3

콜백함수는 일부분만 다른 함수를 매번 새롭게 정의할 필요를 없게 만들 뿐만 아니라 비동기 처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.

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

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

또한 배열 고차 함수에서도 사용된다. js에서 배열은 사용 빈도가 매우 높은 자료구조이고 배열을 다룰 때 배열 고차 함수는 매우 중요하다.

var res = [1, 2, 3].map(function (item) {
	return item * 2;
});

console.log(res); // [2, 4, 6]

res = [1, 2, 3].filter(function (item) {
	return item % 2;
});

console.log(res); // [1, 3]

res = [1, 2, 3].reduce(function (acc, cur) {
	return acc + cur;
}, 0);

console.log(res); // 6

🥥 순수 함수와 비순수 함수

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해 불변성을 지향하는 프로그래밍 패러다임이다. 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하며, 변수 사용을 억제하거나 생명주기를 최소화해서 상태 변경을 피해 오류를 최소화하는 것을 목표로 한다.

• 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해서 가독성을 해치고, 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본 원인이 될 수 있다.

js는 멀티 패러다임 언어이므로 객체지향 프로그래밍 뿐만 아니라 함수형 프로그래밍을 적극적으로 활용하고 있다.

 

🍉스코프란?

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다.

식별자 결정 : 이름이 같은 2개의 변수 중 어떤 변수를 참조해야 할지 js 엔진이 결정하는 걸 말한다.

• 스코프란 js 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

js 엔진은 코드를 실행할 때 코드의 문맥을 고려한다.

• 코드가 어디서 실행되며 어떤 코드가 있는지를 렉시컬 환경이라 부른다. 실행 컨텍스트는 이를 구현한 것이다. 즉, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.

변수 이름이 같더라도 스코프가 다르다면 다른 별개의 변수라고 할 수 있다. 식별자라는 건 말 그대로 식별할 수 있도록 유일해야한다. 그러나 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.

즉, 스코프는 네임스페이스다.

• var가 아닌 let, const를 권장하는 것도 이 이유이다. var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다.
• 네임스페이스 : 개체를 구분할 수 있는 범위를 나타낸다. 하나의 네임스페이스 안에서는 단 하나의 개체만을 가리킨다.

🍉 스코프 체인

함수가 중첩될 수 있다는 것은 스코프 또한 중첩될 수 있다는 말이다. 모든 스코프는 하나의 계층적 구조로 연결되며 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

변수를 참조할 때 js 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

js 엔진은 코드를 실행하기에 앞서 렉시컬 환경을 생성한다. 변수 선언이 실행되면 변수 식별자가 이 자료구조에 키로 등록되고, 변수 할당이 일어나면 이 자료구조의 변수 식별자에 해당하는 값을 변경한다. 변수의 검색도 이 자료구조 상에서 이뤄진다.

🍉 함수 레벨 스코프

지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 말한다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.

C, 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라 한다.

if (true) {
	var a = 'b';
}

function foo() {
	var b = 'c';
}

console.log(a); // b
console.log(b); // Uncaught ReferenceError: b is not defined

ES6에서 도입된 let, const 키워드는 블록 레벨 스코프를 지원한다. 따라서 이를 이용할 것이 권장된다.

🍉 렉시컬 스코프

동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라고 부른다.

렉시컬 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되므로 정적 스코프라고 부른다. js를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

js는 렉시컬 스코프를 따르므로 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

함수 정의가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

var x = 1;

function foo() {
	var x = 10;
	bar();
}

function bar() {
	console.log(x);
}

foo(); // 1
bar(); // 1