🔥 학습목표

• 자바스크립트 DeepDive 12장, 18장, 26장 학습하기.

🟩 함수란?

• 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.
• 코드 중복을 억제하고 재사용성을 높여 유지보수의 편의성↑ 코드의 신뢰성↑
• 적절한 함수 이름을 사용하여 코드의 가독성 향상

🟣 함수 정의 방법

⬜ 함수 선언문

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

• 함수 이름 생략 불가.
• 표현식(값으로 평가될 수 있는 문)이 아닌 문이다. 변수에 할당할 수 없다.

⬜ 함수 표현식

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

// 함수는 함수 이름(add)으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자(f)로 호출한다.
let result = f(1, 3);

• 함수 이름 생략 가능.
• 변수에 할당할 수 있고, 프로퍼티 값이 될 수 있으며, 배열의 요소가 될 수 있다.
• └▶ 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다.

⬜ Fuction 생성자 함수

var add = new Fuction('x', 'y', 'return x+y');

Function 생성자 함수로 함수를 호출하는 방식은 일반적이지 않고 바람직하지 않다.

⬜ 화살표 함수

const add = (x, y) => { ... } // 매개변수 여러 개
const add = x => {...} // 매개변수 한 개
const add = () => {...} // 매개변수 없음

• 항상 익명 함수로 정의한다.
• 생성자 함수로 사용 불가능 하다.
• 기존 함수와 this 바인딩이 다르다.
• prototype 프로퍼티가 없다.
• arguments 객체를 생성하지 않는다.

⬜ 함수 호이스팅

• 함수 선언문이 선두로 끌어 올려진 것처럼 작동하는 것.
• 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.
• 함수 선언문과 함수 표현식은 각자 함수의 생성 시점이 다르기 때문이다.

함수 호이스팅 ≠ 변수 호이스팅

• var 키워드로 선언된 변수는 undefined로 초기화 된다.
• 함수 표현식으로 정의한 함수는 함수 호이스팅이 아닌 변수 호이스팅이 발생한다.
• 변수 호이스팅이 발생한다는 건, add()를 표현식 위에서 호출했을 때 함수를 호출한 게 아니라 변수를 호출한 게 되는 것이다. => 따라서 TypeError: add is not function 을 출력한다.
  • (let 으로 선언한 함수 표현식은 당연히 호이스팅 안 된다.)
• 함수 선언문을 통해 암묵적으로 생성 된 식별자는 함수 객체로 초기화된다.
• 함수 호이스팅은 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 당연한 규칙을 무시한다. => 🔴 그러므로 함수 표현식을 사용할 것을 권장.

🟣 함수 호출

⬜ 매개변수와 인수

• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다.
• 인수가 할당되지 않은 매개변수의 값은 undefined다.
• 인수가 더 많은 경우 초과된 인수는 무시한다.

⬜ 인수 확인

자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.

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

ES6에서 도입된 매개변수 기본값을 사용하면 초기화를 더 간소화할 수 있다.

function add(a=0, b=0, c=0) { }

🌠 #checkpoint.

• 함수는 한 가지 일만 해야 하며 가급적 적게 만들어야 한다.
• 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다.

🟣 다양한 함수의 형태

⬜ 즉시 실행 함수

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

익명 함수를 사용하는 것이 일반적이다.

즉시 실행 함수 내에 코드를 모아 두면 중복되는 변수나 함수의 충돌을 방지할 수 있다.

전역 변수 생성을 막아 라이브러리 등에 많이 사용 된다.

⬜ 재귀 함수

• 반복문을 사용하는 것보다 재귀 함수를 사용하는 편이 더 직관적으로 이해하기 쉬울 때만 한정적으로 사용한다.

⬜ 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

함수의 변하지 않는 공통 로직은 미리 정의해 두고,
경우에 따라 변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달한다.

var logAll = function (i) {
	console.log(i);
};

var logOdds = function(i) {
	if(i%2) console.log(i);
};

function repeat(n, func) {
	for( n번 동안 ) func(i);
}

• func : 경우에 따라 변경되는 일
• logAll : 전부 출력하는 함수
• logOdds : 홀수일 때만 출력하는 함수

⬜ 순수 함수와 비순수 함수

• 순수 함수 : 동일한 인수가 전달 되면 언제나 동일한 값을 반환한다.

  • 외부 상태에 의존하지 않는다.

  • 인수의 불변성 유지

  • 함수의 외부 상태를 변경하지 않는다.

    
    

🌠 #checkpoint.
함수형 프로그래밍 : 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화 해서 불변성(immutability)을 지향하는 프로그래밍 패러다임.

🟣 일급 객체(first-class-citizen)

다음 세 가지 조건을 가지면 일급 객체다.

• 변수에 할당(assignment)할 수 있다.
• 다른 함수의 전달인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

즉 객체를 일반 데이터(string, number, boolean, array, object)처럼 다룰 수 있다는 것이다.

자바스크립트에서 함수는 일급 객체다.

함수가 일급 객체라는 것은, 함수를 객체와 동일하게 사용할 수 있다는 뜻이다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다.

⬜ 함수 객체의 프로퍼티

함수는 객체다. 그러므로 프로퍼티를 가질 수 있다.

console.dir()

을 통해 브라우저 콘솔에서 함수 객체의 내부를 들여다 볼 수 있다.

노란색 표시한 arguments, caller, length, name, prototype 프로퍼티는 모두 일반 객체에는 없는 함수 고유의 프로퍼티다.

⬜ arguments 프로퍼티

arguments 프로퍼티의 값은 arguments 객체다.
arguments 객체는 함수 호출 시 전달된 인수(argument)들의 정보를 담고있는 순회 가능한 유사 배열 객체다.

유사 배열 객체란?

length 프로퍼티를 가진 객체. for 문으로 순회할 수 있는 객체를 말한다.

• 인수를 적게 전달한 경우: 인수가 전달되지 않은 매개변수는 undefined로 초기화된 상태 유지.
• 인수를 많이 전달한 경우: 초과된 인수는 무시. 그냥 버려지지 않고 arguments 객체의 프로퍼티로 저장.

⬜ callee / length 프로퍼티

• callee : arguments 객체를 생성한 함수, 즉 함수 자기 자신을 가리킨다.
• length : 인수의 개수를 가리킨다.

🟣 ES6 함수의 추가 기능

⬜ 함수의 구분

• foo() : 일반적인 함수로서 호출
• new foo(); : 생성자 함수로서 호출
• var obj = {foo: foo}; obj.foo(); : 메서드로서 호출

⬜ 메서드

• 객체 안에 존재하여, 객체의 '동작'을 수행하는 함수.
• ES6 사양에서는 메서드 축약 표현으로 정의된 함수만을 의미한다.

const obj = {
	x:1,
    foo() { return this.x;} // 메서드
    bar: function() {return this.x;} // 바인딩 된 일반 함수

⬜ 화살표 함수

• 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호()로 감싸 주어야 한다.

const create = (id, content) => ({id, content}); // 객체 리터럴 반환
const create = (id, content) => {return {id, content};}; // 위와 같은 내용, 다른 표기

• 화살표 함수도 일급 객체다. 즉 고차 함수에 인수로 전달할 수 있다.

[1,2,3].map(v=>v*2); // [2, 4, 6]

• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.

  • 따라서 화살표 함수 내에서 this를 참조 시 상위 스코프의 this를 참조한다.
  • 이를 lexical this 라 한다.

• 화살표 함수가 중첩되어 있다면?

  • 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.

• 프로퍼티에 할당한 화살표 함수는?

  • 스코프 체인 상에서 가장 가까운 상위 함수 중 화살표 함수가 아닌 함수의 this를 참조한다. 따라서 메서드를 화살표 함수로 정의하는 것은 피해야 한다.

⬜ Rest 파라미터

• 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수.
• 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(param, ...rest){
	console.log(param); // 1
    console.log(rest); // [2, 3, 4, 5]
}

foo(1, 2, 3, 4, 5);

🟩 예외 처리

javaScript200제 교재 참고 - 35번 예제

자바스크립트 코드를 실행하다가 에러가 발생하면 그 즉시 중단 된다.

이를 대비해서 예외 처리는 반드시 필요하다.

🟣 throw 문

개발자가 의도한 에러에 대한 예외 처리. 고의로 에러를 발생시켜 예외 상황을 알리는 역할을 한다. throw 문이 실행되면 실행되고 있던 블록을 빠져나간다.

function checkNumber(val) {
	if(typeof val !== 'number') throw '유효햐지 않은 값입니다.';
    console.log('확인되었습니다.');
}

이는 결국 에러를 발생시키것이므로, 프로그램이 중단되는 것은 막을 수 없다. 이 에러 발생에 대한 대응책이 바로 아래 try-catch-finally 문이다.

🟣 try-catch-finally 문

예상치 못한 에러와 개발자가 의도한 에러 모두 대응 가능하다.

• try : 해당 블록 안에서 발생된 에러를 잡아낸다.
• catch : try 블록에서 발생된 에러 정보가 변수로 전달 된다. 제어권을 넘긴다.
• finally : 에러 발생 여부와 상관 없이 실행되는 블록

try {
	checkNumber(100);
    checkNumber('Wrong type');
    } catch (e) {
    	console.log(`에러 발생 >> ${e}`);
    } finally {
    	console.log('완료');
    }

---

📔 오늘의 후기

• 개념적인 이해는 완료 되었다. 일단 처음 보거나 생소한 개념을 정리했는데, 정리 하면 할수록 이건 그냥 실습으로 적용하지 않는 이상 딱히 의미가 없다는 생각이 든다.
• 다음 수업 끝나고 직접 실습 해봐야겠다.
• 그럼에도 대충 기본적으로 알고는 있어야 하는 제어문/함수 개념과 그 활용법, 자세히 알고있지 못한 이론적 개념을 익히게 되어서 충분히 가치있었다.