javascript - function

자바스크립트에서의 function을 정리합니다😊

자바스크립트 함수 정리😊


// 함수 정의
// 함수 선언
function square(number) { // function 키워드, 함수 이름, 매개 변수
	// 함수 안에서 실행 되어야 되는 모든 로직을 담을 수 있음
	return number * number; // 함수의 return 값
}

// 함수의 매개변수로 객체나 배열을 넘겨준다면 그 객체가 가지는 변화는 함수의 스코프를 벗어나도
// 유지 됩니다.
function myFunc(theObject) {
	theObject.make = "hyundai";
}
let myCar = {make: "samsung", model: "sm6", year: 2021};
let x, y;
x = myCar.make; // "samsung"
myFunction(myCar);
y = myCar.make; // "hyundai


// 함수 표현식
// 함수 선언은 구문적인 문(statement)지만 표현식에 의해서 함수를 만들 수도 있습니다.
// 이같은 함수를 익명이라고 하는데, 굳이 모든 함수가 이름을 가질 필요가 없다는 걸 뜻합니다.

let square = function(number) { return number * number };
let x = square(4); // x의 값은 16

function map(fn, a) {    // map을 예로 들어 본다면
	let result = [];
	for( let i = 0; i!=a.length; i++ ) {
		result[i] = fn(a[i]);
	}
	return result;
}

let f = function(x) { // 표현식으로 익명함수를 변수값에 할당해줍니다.
	return x * x * x ;
}
let numbers = [0, 1, 2, 5, 10];
let cube = map(f, numbers);     // 첫번째 매개변수로 함수 표현식으로 선언한 함수를 넘겨받습니다.
console.log(cube); // [0, 1, 8, 125, 1000];


// 함수 호출
// 함수를 선언하는 것이 함수를 실행하는 건 아닙니다. 함수를 호출하고 싶다면, 함수를 ()를 이용해 호출할 수 있습습니다.
function justFn() {
   console.log('안녕! 나는 함수야. 호출 부탁할게~');
}
justFn(); // 함수 호출 "안녕! 나는 함수야. 호출 부탁할게~"


// 함수의 범위(클로저와 렉시컬의 개념)
// 함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 외부의 함수에서
// 액세스 할 수 없습니다. 그러나 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스
할 수 있습니다.
// 전역 함수 -> 전역 변수에 접근 가능, 함수 내에서 정의 된 nested 함수, 부모 함수의 변수에
// 접근 가능
let num1 = 20;
let num2 = 3;
let name = "yechan;
function multiply() {
	return num1 * num2;
}

multiply(); // 60. 전역함수가 전역변수에 접근

function getScore() {
	let num1 = 2;
	let num2 = 3;
	function add() {
		return name + " 점수: " + (num1 + num2);
	}
	return add();
}

getScore(); // "예찬 점수: 5" // 부모 함수의 변수(num1, num2)를 사용하는 걸 볼 수 있습니다.


// 범위와 함수 스택
// 재귀: 함수는 자신을 참조하고 호출할 수 있습니다.
// 1. 함수의 이름, 2. arguments.callee, 3. 함수를 참조하는 범위 내 변수
function loop(x) {
	if (x >= 10) return;    // 재귀의 베이스라고 할 수 있습니다. 또 다른 함수를 호출하지 않는 경우를 분기 해줍니다.
	loop(x + 1);   // 위의 조건에 일치 하지 않는 다면 자기 자신을 호출하고 실행합니다.
}
loop(0);


// 중첩된 함수와 클로저
// 함수 내에 선언된 중첩 함수는, 외부 함수와 별개이지만, 클로저를 형성합니다. 클로저는
// 자신이 선언된 함수 내부를 참조하는 숨긴 변수 [[Environment]]에 저장합니다. 이를 통해 
// 내부 중첩 함수는 자신이 선언된 환경에 접근 할 수 있고, 변수를 사용할 수 있습니다.
// 함수는 실행하면 렉시컬 환경이 새롭게 실행되어 스택에 쌓이게 되는데 이러한 렉시컬 환경을 기억하며, 변수를 사용하는 것이
// 클로저의 개념이라고 할 수 있습니다.
function addSquares(a, b) {
	function square(x) {
		return x * x;
	}
	return square(a) + square(b);
}
let a = addSquares(2, 3); // 13;
let b = addSquares(3, 4); // 25;

// 함수는 내부 함수 자체를 리턴할 수도 있습니다.
function outside(x) {
	function inside(y) {
		return x + y;
	}
	return inside;
}
let fn_inside = outside(3);
let result = fn_inside(5); // 외부 함수가 받은 매개변수는 클로저로 인해 유지되는 걸 알 수 있습니다.
// 환경을 기억하는 변수가 존재 한다면, 그 환경은 자바스크립트의 가비지 컬렉션의 정리 대상에서 제외 됩니다.


// new Function 문법