[2주차]JavaScript - 함수와 함수객체

함수(function)란 작업을 수행하거나 값을 계산하는 명령문의 집합입니다.

함수 선언식

// 함수 정의
function area(width, height) {
	return width * height; // 함수 본문
}
area(10, 20); // 함수 호출

• function 키워드로 시작
• 함수 이름 : area 보통 동사 형태
• 매개변수 : width, height 인자로부터 전달받은 값이 들어가는 통로
• return : 함수 안에 데이터를 저장할 때 사용
• 반환값 : width * height 함수의 출력값
• 인자 : 10, 20 함수에게 전달하는 데이터

함수 표현식

// 함수 정의
let area = function (width, height) {
	return width * height; // 함수 본문
}
area(10, 20); // 함수 호출

• let 또는 const 키워드로 변수 선언 후 그 변수에 함수 할당
• 변수에 할당되므로 값으로 취급

📍들어올 인자가 몇 개인지 모를 때 - rest 연산자

// 방법 1. 반복문
const add = function (...arr) { // 들어오는 모든 인자를 arr로 만들겠다.
	let sum = 0;
	for (var x of arr) {
		sum += x;
	}
	return sum;
};
console.log(add(1, 3, 10, 12)); // 26

// 방법 2. 누적 값 갱신
const add = function (...arr) {
	return arr.reduce((acc, x) => acc + x, 0);
};

✨Hoisting - 함수 선언식과 표현식의 차이

자바스크립트 엔진이 코드를 해석할 때 선언된 변수나 함수를 코드 상단으로 끌어올리는 현상입니다.

- 함수 선언식은 전체가 호이스팅 되기 때문에 정의하기 전에 호출할 수 있습니다.

- 함수 표현식은 변수의 값이 호이스팅 되지 않기 때문에 정의하기 전에 호출할 수 없습니다.

함수와 객체

JavaScript에서 함수는 일급 객체입니다.

// 익명 함수
const add = function(a, b) {
	return a + b;
};

// 배열의 요소로 사용
const arr = [add, function(c) {return c * c; }];

// 함수의 인자로 전달
function apply(func, x) {
	return func(x);
}

// 함수의 반환값으로 사용
function makeFunc(n) {
	return funtion(x) {
		return x + n;
}

const plusOne = makeFunc(1);
const plusTwo = makeFunc(2);

console.log(plusOne(10)); // 11
console.log(plusTwo(10)); // 12

Scope

변수에 접근할 수 있는 범위를 말합니다.

함수 스코프

함수 내에서 정의된 변수는 해당 함수 내에서만 사용할 수 있고 유효하다는 것을 의미합니다. 함수 밖에서 정의된 변수는 전역 변수로서 어디든 접근할 수 있습니다.

var x = "global"; // 전역 변수

function foo() {
	var x = "local"; // 지역 변수
	console.log(x); // local
}

foo(); // local
console.log(x); // global

블록 스코프

중괄호({})로 둘러싸인 영역 내에서 정의된 변수는 해당 영역 내에서만 사용할 수 있고 유효하다는 것을 의미합니다.

let x = "global"; // 전역 변수

if (true) {
	let x = "local"; // 지역변수
	console.log(x); // local
}

console.log(x); // global

closure

함수와 함수가 선언된 어휘적 환경의 조합입니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다.

function makeCounter() {
	let count = 0; // 지역 변수
	
	return function() { // 클로저(count를 기억함)
		return ++count;
	};
}

const counter1 = makeCounter(); // 카운터 생성
const counter2 = makeCounter(); // 다른 카운터 생성

console.log(counter1()); // 1 (counter1의 count 값)
console.log(counter1()); // 2 (counter1의 count 값 증가)
console.log(counter2()); // 1 (counter2의 count 값)
console.log(counter2()); // 2 (counter2의 count 값 증가)

고차함수

함수를 인자로 받거나 반환하는 함수입니다.

// 배열을 받아 각 요소에 적용할 콜백함수와 초기값을 인자로 받아 배열을 축약하는 고차함수 reduce 정의
function reduce(array, callback, initialValue) {
	
	let accumulator = initialValue; // 누적값 초기화
	
	for (let i = 0; i < array.length; i++) {
		accumulator = callback(accumulator, array[i]); // 콜백함수 실행하여 누적값 갱신
	}
return accumulator; // 최종 누적값 반환
}

// reduce 고차함수 사용 예시

// 배열 요소들을 모두 더하는 콜백함수 정의
function sum(a, b) {
	return a + b;
}

// 배열 요소들을 모두 곱하는 콜백함수 정의
function product(a, b) {
	return a * b;
}

const numbers = [1, 2, 3, 4]; 

console.log(reduce(numbers, sum, 0); // 10
console.log(reduce(numbers, product, 1); // 24