2022/08/11 - TIL

딥다이브 공부

---

12장 함수

12.1 함수란?

함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

function functionName(var){
//함수 정의
	return outputV
}

functionName(inpntV)//함수 호출
var(전달받은 변수) : 매개 변수
inputV(입력) : 인수
outputV(출력) : 반환 값

12.2 함수를 사용하는 이유

• 코드의 재사용성
• 유지보수성의 편의성 상승
• 실수를 줄여 코드의 신뢰성 상승
• 코드의 가독성을 높인다

12.3 함수 리터럴

리터럴은 값을 생성하기 위한 표기법이다. 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉 함수는 객체다. 함수는 객체지만, 일반객체와는 다르다. 일반 객체는 호출 할 수 없지만, 함수는 호출할 수 있다.

12.4 함수 정의

모두 함수 정의를 하는 방식이지만, 미묘하지만 중요한 차이가 있다.

12.4.1 함수선언문

함수 리터럴(함수 표현식)은 함수 이름을 생략할 수 있으나, 함수 선언문은 생략할 수 없다.

함수 선언문은 표현식이 아닌 문이다. 때문에 크롬 개발자 도구의 콘솔에서 함수 선언문을 실행하면 완료값 undefined가 출력된다. 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당한다.

12.4.2 함수표현식

자바스크립트의 함수는 객체 타입의 값이다. 자바스크립트의 함수는 값처럼 변수에 할당 할 수도 있고 프로퍼티 값이 될 수도 있으며, 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다

함수표현식은 이름을 생략할 수 있다. 이러한 함수를 익명 함수라고 한다.

//기명식(익명은 foo가 없다)
var add = function foo(x,y){
	return x+y;
}
console.log(add(1,2))//3
console.log(foo(1,2))//referneceError:foo is not defined

함수 선언문은 표현식이 아닌문이고, 함수 표현식은 표현식인 문이다.

12.4.3 함수 생성 지점과 함수 호이스팅

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 떄문이다. 모든 선언문처럼 함수 선언문도 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임 이전에 자바 스크립트 엔진에 의해 먼저 실행된다.

변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

함수 선언문 대신 함수 표현식을 사용할 것 권장한다.

12.4.4 Function 생성자 함수

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

console.log(add(2,5));

사실 new 연산자 없이 호출해도 결과는 동일하다. Function 생성자 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않다. Function 생성자 함수는 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

12.4.5 화살표 함수

const add = (x, y) => x+y;
console.log(add(2,5));

• 화살표 함수는 기존의 함수보다 표현만 간략한 것이 아니라 내부 동작 또한 간략화되어 있다.
• 화살표 함수는 생성자 함수로 사용할 수 없으며, this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

12.5 함수 호출

12.5.1 매개변수와 인수

//함수가 외부에서 내부로 값을 전달할 필요가 있는경우
example : functionName(value)

const functionName = function(){
	return x+y;
}
//매개 변수를 통해 인수를 전달한다.
//암묵적으로 매개변수

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

인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined이다

function add(x,y){
	return x+y
}
console.log(add(2));//2+undefined => NaN

12.5.2 인수 확인

function add(x, y){
	return x + y;
}
console.log(add(2)); //NaN
console.log(add('a', 'b')); //'ab'

인수에

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 : 인수는 모두 숫자 값이어야 한다.

단축평가를 이용하여 값의 타입을 확인하는 방법이 있다.

function add(a,b,c){
	a = a||0;
	b = b||0;
	c = c||0;
	return a + b + c;
}
console.log(add(1,2,3)); //6
console.log(add(1,2)); //3

아니면, 단축평가를 이용하여 기본 값을 대입하는 방법이 있다.

12.5.3 매개변수의 최대 개수

ECMAScript에서 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지는 않다. 하지만, 매개변수 코드는 코드를 이해하는데 방해되는 요소이므로 이상적인 매개변수 개수는 0개이며, 이상적인 함수는 한가지 일만 해야 하며 가급적 작게 만들어야 한다.

매개 변수는 최대 3개 이상을 넘지 않을 것을 권장한다

주의 해야할 것 : 객체를 인수로 사용하면, 매개변수의 순서를 신경쓰지 않아도 된다. 하지만 ,함수 외부에서 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경되는 부수 효과가 발생한다.

12.5.4 반환문

함수 호출은 표현식이다.

반환문은 두 가지 역활을 한다.

1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.(반환문 이후의 문은 모두 무시된다)
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. 만일, return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

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

함수에서 받은 객체는, 참조 값이기 때문에, 함수가 변경한 참조 값이 변경된다.

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 단, 한번만 실행 될 수 있다

(function(){
	var a = 3;
	var b= 5;
	return a*b;
})
console.log(foo());; //ReferneceError foo is not defined

주의 할 것: 즉시 실행함수는 그룹 연산자로 싸야한다.

function(){}();//SyntaxError Function statesments require a function name

12.7.3 중첩함수

함수 내부에 정의된 함수를 중첩 합수 또는 내부 함수라 한다.

단, 호이스팅으로 인해 혼란이 발생할 수 있으므로 if 문이나 for 문 등의 코드 블록에서, 코드 블록에서 함수 선언문을 통해 함수를 정의하는 것은 바람직하지 않다.

12.7.4 콜백함수

어떤 일을 반복 수행하는 repeat 함수를 정의해 보자.

function repeat(n){
	for(var i =0; i<n;i++) console.log(i);
}

function higherOrderFunction(n, higher){
	for (var i=0; i<n;i++){
		callbackFunction(i);
	}
}

var logOdds = function(i){
	if(i%2) console.log(i);
}//logOdds 함수는 단 한번만 생성된다.
//만일 익명함수로 사용하면, 호출할 때마다 콜백 함수가 생성된다
repeat(5, logOdds); 

repeat(5, function(i){
	if(i%2) console.log(i);
})

12.7.5 순수 함수와 비순수함수

외부 상태에 의존하거나 외부 상태를 변경하는 부수 효과가 있는 함수를 비순수 함수라고한다

내부 상태가 호출될 때마다 변화하는 값이라면 순수함수가 아니다.

순수 함수는 일반적으로 최소 하나 이상의 인수를 전달받는다.

인수를 전달받지 않는 순수 함수는 언제나 동일 한 값을 반환하므로 결국 상수와 마찬가지다.

함수형 프로그래밍은, 순수 함수와 보조 함수의 조합을 통해, 외부 상태를 변경하는 부수 효과를최소해서 불변성을 지향하는 프로그래밍 패러다임이다.

수업시간에 메모한 내용

---

1. 함수, 컴포넌트, 변수를 사용하는 이유

함수 : 로직을 재사용

컴포넌트 : 뷰재사용

변수 : 값을 재사용하기 위해서

⇒ 유지보수를 위한 생산성을 위해서 재사용을 고려해야한다

1. var를 사용하여 변수가 겹치지 않기위해 사용하는방법

<script type=”module” src=’”app.js”> </script>

→파일 변수 var가 중복을피하기위해서 모듈을 사용하면 변수가 분리된다

1. 식별자에 관해서

파일을 쪼개서 사용하대, webpack을 통해서 다시 뭉치는 작업을 사용할 것 같다.

URL은 식별자다.

파일이름은 주소가 있다면 식별자이다.

undefined는 몇 바이트인지 알 수 없다(브라우저마다 상이하다)

메모리셀은 1바이트이다. 이유는, 어떤 데이터에서 유의미한 데이터는 1바이트이다.

변수는 메모리셀을 가르키는 심볼릭한 네임이다

값은 값인 것이다. 식별자는 주소를 알아야 한다.

초기화는 값을 처음으로 넣는 것을 말한다

1. 참조 값

메모리 셀에 참조 값이 저장되어있으면 참조값.

push 외부상태를 바꾸는 친구다.

제어문은 : 코드의 실행을 인위적으로 하기때문에 글을 읽는 순서를 바꾸기 때문에, 가독성을 떨어뜨린다.

1. 얕은 복사, 깊은 복사

const b = [1,2,3]

c = b.slice();는 얕은 복사이다 , c = […b]와 같다.

→JSON.parse(JSON.stringify(arr))를 사용하면 함수를 카피할 수없다

1. 함수 정의 방식

함수 선언문을 선언하면, console창에서 나오는 undefined는 실행 완료에 대한 undefined가 실행된다.

1. 즉시 실행 함수

즉시 실행함수는 클로저를 만들 때 쓴다.

(for문에 실행함수는 bad하다)

1. 프로퍼티에 관해서

객체의 정의 : 프로퍼티의 집합체

프로퍼티는 식별자가 아니다. 식별자는 linklist처럼 이용한다

내용

---

12장 함수

12.1 함수란?

함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

function functionName(var){
//함수 정의
	return outputV
}

functionName(inpntV)//함수 호출
var(전달받은 변수) : 매개 변수
inputV(입력) : 인수
outputV(출력) : 반환 값

12.2 함수를 사용하는 이유

• 코드의 재사용성
• 유지보수성의 편의성 상승
• 실수를 줄여 코드의 신뢰성 상승
• 코드의 가독성을 높인다

12.3 함수 리터럴

리터럴은 값을 생성하기 위한 표기법이다. 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉 함수는 객체다. 함수는 객체지만, 일반객체와는 다르다. 일반 객체는 호출 할 수 없지만, 함수는 호출할 수 있다.

12.4 함수 정의

모두 함수 정의를 하는 방식이지만, 미묘하지만 중요한 차이가 있다.

12.4.1 함수선언문

함수 리터럴(함수 표현식)은 함수 이름을 생략할 수 있으나, 함수 선언문은 생략할 수 없다.

함수 선언문은 표현식이 아닌 문이다. 때문에 크롬 개발자 도구의 콘솔에서 함수 선언문을 실행하면 완료값 undefined가 출력된다. 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당한다.

12.4.2 함수표현식

자바스크립트의 함수는 객체 타입의 값이다. 자바스크립트의 함수는 값처럼 변수에 할당 할 수도 있고 프로퍼티 값이 될 수도 있으며, 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다

함수표현식은 이름을 생략할 수 있다. 이러한 함수를 익명 함수라고 한다.

//기명식(익명은 foo가 없다)
var add = function foo(x,y){
	return x+y;
}
console.log(add(1,2))//3
console.log(foo(1,2))//referneceError:foo is not defined

함수 선언문은 표현식이 아닌문이고, 함수 표현식은 표현식인 문이다.

12.4.3 함수 생성 지점과 함수 호이스팅

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 떄문이다. 모든 선언문처럼 함수 선언문도 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임 이전에 자바 스크립트 엔진에 의해 먼저 실행된다.

변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

함수 선언문 대신 함수 표현식을 사용할 것 권장한다.

12.4.4 Function 생성자 함수

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

console.log(add(2,5));

사실 new 연산자 없이 호출해도 결과는 동일하다. Function 생성자 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않다. Function 생성자 함수는 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

12.4.5 화살표 함수

const add = (x, y) => x+y;
console.log(add(2,5));

• 화살표 함수는 기존의 함수보다 표현만 간략한 것이 아니라 내부 동작 또한 간략화되어 있다.
• 화살표 함수는 생성자 함수로 사용할 수 없으며, this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

12.5 함수 호출

12.5.1 매개변수와 인수

//함수가 외부에서 내부로 값을 전달할 필요가 있는경우
example : functionName(value)

const functionName = function(){
	return x+y;
}
//매개 변수를 통해 인수를 전달한다.
//암묵적으로 매개변수

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

인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined이다

function add(x,y){
	return x+y
}
console.log(add(2));//2+undefined => NaN

12.5.2 인수 확인

function add(x, y){
	return x + y;
}
console.log(add(2)); //NaN
console.log(add('a', 'b')); //'ab'

인수에

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 : 인수는 모두 숫자 값이어야 한다.

단축평가를 이용하여 값의 타입을 확인하는 방법이 있다.

function add(a,b,c){
	a = a||0;
	b = b||0;
	c = c||0;
	return a + b + c;
}
console.log(add(1,2,3)); //6
console.log(add(1,2)); //3

아니면, 단축평가를 이용하여 기본 값을 대입하는 방법이 있다.

12.5.3 매개변수의 최대 개수

ECMAScript에서 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지는 않다. 하지만, 매개변수 코드는 코드를 이해하는데 방해되는 요소이므로 이상적인 매개변수 개수는 0개이며, 이상적인 함수는 한가지 일만 해야 하며 가급적 작게 만들어야 한다.

매개 변수는 최대 3개 이상을 넘지 않을 것을 권장한다

주의 해야할 것 : 객체를 인수로 사용하면, 매개변수의 순서를 신경쓰지 않아도 된다. 하지만 ,함수 외부에서 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경되는 부수 효과가 발생한다.

12.5.4 반환문

함수 호출은 표현식이다.

반환문은 두 가지 역활을 한다.

1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.(반환문 이후의 문은 모두 무시된다)
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. 만일, return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

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

함수에서 받은 객체는, 참조 값이기 때문에, 함수가 변경한 참조 값이 변경된다.

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 단, 한번만 실행 될 수 있다

(function(){
	var a = 3;
	var b= 5;
	return a*b;
})
console.log(foo());; //ReferneceError foo is not defined

주의 할 것: 즉시 실행함수는 그룹 연산자로 싸야한다.

function(){}();//SyntaxError Function statesments require a function name

12.7.3 중첩함수

함수 내부에 정의된 함수를 중첩 합수 또는 내부 함수라 한다.

단, 호이스팅으로 인해 혼란이 발생할 수 있으므로 if 문이나 for 문 등의 코드 블록에서, 코드 블록에서 함수 선언문을 통해 함수를 정의하는 것은 바람직하지 않다.

12.7.4 콜백함수

어떤 일을 반복 수행하는 repeat 함수를 정의해 보자.

function repeat(n){
	for(var i =0; i<n;i++) console.log(i);
}

function higherOrderFunction(n, higher){
	for (var i=0; i<n;i++){
		callbackFunction(i);
	}
}

var logOdds = function(i){
	if(i%2) console.log(i);
}//logOdds 함수는 단 한번만 생성된다.
//만일 익명함수로 사용하면, 호출할 때마다 콜백 함수가 생성된다
repeat(5, logOdds); 

repeat(5, function(i){
	if(i%2) console.log(i);
})

12.7.5 순수 함수와 비순수함수

외부 상태에 의존하거나 외부 상태를 변경하는 부수 효과가 있는 함수를 비순수 함수라고한다

내부 상태가 호출될 때마다 변화하는 값이라면 순수함수가 아니다.

순수 함수는 일반적으로 최소 하나 이상의 인수를 전달받는다.

인수를 전달받지 않는 순수 함수는 언제나 동일 한 값을 반환하므로 결국 상수와 마찬가지다.

함수형 프로그래밍은, 순수 함수와 보조 함수의 조합을 통해, 외부 상태를 변경하는 부수 효과를최소해서 불변성을 지향하는 프로그래밍 패러다임이다.

수업시간에 메모한 내용

---

1. 함수, 컴포넌트, 변수를 사용하는 이유

함수 : 로직을 재사용

컴포넌트 : 뷰재사용

변수 : 값을 재사용하기 위해서

⇒ 유지보수를 위한 생산성을 위해서 재사용을 고려해야한다

1. var를 사용하여 변수가 겹치지 않기위해 사용하는방법

<script type=”module” src=’”app.js”> </script>

→파일 변수 var가 중복을피하기위해서 모듈을 사용하면 변수가 분리된다

1. 식별자에 관해서

파일을 쪼개서 사용하대, webpack을 통해서 다시 뭉치는 작업을 사용할 것 같다.

URL은 식별자다.

파일이름은 주소가 있다면 식별자이다.

undefined는 몇 바이트인지 알 수 없다(브라우저마다 상이하다)

메모리셀은 1바이트이다. 이유는, 어떤 데이터에서 유의미한 데이터는 1바이트이다.

변수는 메모리셀을 가르키는 심볼릭한 네임이다

값은 값인 것이다. 식별자는 주소를 알아야 한다.

초기화는 값을 처음으로 넣는 것을 말한다

1. 참조 값

메모리 셀에 참조 값이 저장되어있으면 참조값.

push 외부상태를 바꾸는 친구다.

제어문은 : 코드의 실행을 인위적으로 하기때문에 글을 읽는 순서를 바꾸기 때문에, 가독성을 떨어뜨린다.

1. 얕은 복사, 깊은 복사

const b = [1,2,3]

c = b.slice();는 얕은 복사이다 , c = […b]와 같다.

→JSON.parse(JSON.stringify(arr))를 사용하면 함수를 카피할 수없다

1. 함수 정의 방식

함수 선언문을 선언하면, console창에서 나오는 undefined는 실행 완료에 대한 undefined가 실행된다.

1. 즉시 실행 함수

즉시 실행함수는 클로저를 만들 때 쓴다.

(for문에 실행함수는 bad하다)

1. 프로퍼티에 관해서

객체의 정의 : 프로퍼티의 집합체

프로퍼티는 식별자가 아니다. 식별자는 linklist처럼 이용한다