Javascript 함수

함수

• 코드의 집합을 나타내는 자료형

• 작업을 수행하거나 값을 계산하는 문장의 집합으로 구성된 블록 중 하나임

왜쓸까?

재사용

• 유사한 로직에 대한 처리를 반복하여 수행하지 않고 함수로 한 번 정의해두고 재사용한다.

가독성

• 복잡한 로직들을 하나의 역할만 수행하게끔 기능별로 나눠 작성해 모듈화 하면 가독성이 좋아짐

유지보수

• 전체 흐름과 상관 없이 수정,추가 해야하는 함수에만 관심을 가지고 작업할 수 있어 생산성이 향상됨

1급객체

자바의 일반적인 메소드와는 달리 자바스크립트 함수는 1급객체이다.

1급객체?

변수 또는 데이터에 할당할 수 있다.

function print() {
	console.log("hell world!");
}
const a = print;
console.log(typeof a); // function
a(); // hell world!

객체의 인자로 넘길 수 있다.

function print() {
	console.log("hell world!");	
}
const obj = {a: print};
function prt(func) {
	func();
}
obj.a(); // hell world!
prt(() => console.log("kkk")); // kkk;
prt(console.log("kkk")); // func is not a function

객체의 리턴값으로 리턴할 수 있다.

function hello() {
	return () => console.log("HELL LO");
}
hello()(); // HELL LO;

const arr = [() => console.log("11"), () => console.log("22")];
arr[0](); // 11

장점?

객체나 함수에 함수 자체를 넘겨 원하는 필요한 시점에 호출할 수도 있고 함수를 반환할 수 있어 프로그래밍이 유연해질 수 있는 것 같다

선언적 함수, 익명 함수

이게 왜 그런지 원리를 알아야 한다.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

console.log(a); // Uncaught ReferenceError: a is not defined
let a = 5;
console.log(a); // 5

간단하게 설명하면 호이스팅이라고 메모리 공간 확보를 위해 변수,함수 선언을 프로그램 시작 시 맨 위로 올리는 동작 때문인데

let 과 const도 올려지긴 하나 실제 값이 할당되는 시점 전 까지는 사용할 수 없게 해주는 공간에 머물러 있어서 할당 전에 사용하면 오류가 난다.

console.log(a); //ƒ a() { console.log("HI"); }
a(); // "HI"
// 함수 선언문
function a() {
	console.log("HI");
}

console.log(a); // undefined
a(); // Uncaught TypeError: a is not a function
// 함수 선언문
var a = function() {
	console.log("HI");
}

console.log(a); // undefined
a(); // Uncaught TypeError: a is not a function
var a = () => {
	console.log("HI");
}

console.log(a); // Uncaught ReferenceError: a is not defined
const a = () => {
	console.log("HI");
}

함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다!!

표현이나 할당이 아니라 선언만 위로 올려진다고 생각하자

익명함수 쓸 때 const 타입으로 선언하고 할당하게 되는데

그래서 한 모듈에 함수 여러개 쓸 때 이름 중복을 방지할 수 있기도 하고

코드 읽는 순서대로 생각하면 되기 때문에 좀 안전하게 사용할 수 있지 않나 싶다.

그 외의 비교는 여기를 나중에 참고해보도록 해야겠다.

Reference

• 1급객체

• 한빛미디어 - 혼자 공부하는 자바스크립트

• MDN - function