자바스크립트 함수

함수 선언문

function add (){}

함수 표현식

‘일급 객체’: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 의미함.

const sum = function sum (){}

const sum = function add (){}
add() // error

함수 선언식, 표현식의 차이

add() // good
function add () {} 

add() // error
var add = function(){} 

화살표 함수

• Constructor(생성자) 사용 불가능 즉, 생성자 함수로 화살표 함수를 사용할 수 없다.

const Car = () => {}
const myCar = new Car('asd') //error

• 화살표 함수는 arguments 가 존재하지 않는다.

function asd(){
	console.log(arguments);
}
asd(1,2,3) // [1,2,3, ...]

const asd = () = >{
	console.log(arguments);
}
asd(1,2,3) // error

• this 바인딩이 존재하지 않는다.

this

class Component extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			counter: 1,
		}
	}
	
	countUp () {
		console.log(this) // undefined
		this.setState((prev) => {counter: prev.counter + 1});
	}
	arrowCountUp = () => {
		console.log(this) // class Component
		this.setState((prev) => {counter: prev.counter + 1});
	}
	
	render () {
		return (
			<button onClick = {this.countUp}>일반 함수</button> // error
			<button onClick = {this.arrowCountUp}>화살표 함수</button> // 정상 작동
		)
	}
}

const hello = () => {
	console.log(this)
}

function hello () {
	console.log(this)
}
// -----

var _this = void 0
const hello = () => {
	console.log(_this) // 바벨에서 화살표 함수 내부의 _this 자체를 undefined로 바꿔버림
}

function hello () {
	console.log(this)
}

• 함수 종류에 따라 this가 가리키는 객체가 다름
• 생성자 : 새로운 객체
• strict 모드에서의 함수 : undefined
• 객체 메서드 : 베이스 객체
• callback 함수 : 전역 객체 window

• Arrow Function에서는 전역 컨텍스트에서 실행 될 때 this를 새로 정의하지 않음
• 코드에서 바로 바깥의 함수(혹은 class)의 this(Lexcial this) 값을 사용
• this를 클로저 값으로 처리하는 것과 같음

즉시 실행 함수

(function (a, b){
	return a + b
}(10, 20))

((a, b) => {
	return a + b
}(10, 20))

고차 함수

// 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map
const arry = [1, 2, 3].map((item) => item * 2)

함수를 만들 때 주의할점

함수의 부수 효과를 최대한 억제할 것

가능한 한 함수를 작게 만들 것

누구나 이해할 수 있는 이름