함수는 자바스크립트에서 가장 중요한 핵심 개념이며, 함수는 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성 메서드, this, 프로토타입, 모듈화등과 관련이 있다.
프로그래밍에서의 함수는 일련의 과정을 문으로 구현하고 코드 블록을 하나로 감싸서 하나의 실행단위로 정의한 것을 말한다. 여기서는 JavaScript에서의 함수에 대해 알아보고자 한다.
✨ Function
Javascript에서 마찬가지로 함수는 유사한 동작을 하는 코드를 한 곳에 묶어놓아 여러 번 호출할 수 있도록 만들기 위해 사용된다.
즉, 재사용 가능한 영역을 정의하고 정보 영역을 캡슐화하는 데 사용되는 구문이다.
일반적으로는 입력 👉 함수 👉 return 👉 출력의 형태로 이루어진다.
특징
- 함수는 function 키워드를 가지고, 객체이다.
- 함수는 정의 / 생성 / 출력이 가능하다.
- 함수 호출하는 방식은 선언과 전달 인자로 가능하다.
사용 방법
- 함수 선언식
- 객체 혹은 리터럴(=함수 표현식)
- new 연산자를 사용한 익명함수 및 동적 함수 선어
✨ 함수 선언식
function 키워드를 사용하고, 함수의 이름과 매개변수를 선언할 수 있다.
function 함수명( 매개변수 ){ // 구현 로직 }
👇 예제 코드를 보자.
let age = 12;
function printPerson(){
let name = "seohee";
console.log(name);
console.log(age);
}
printPerson(); // "seohee"
// 12함수 선언식으로 나타낸 printName( )함수 안에는 함수 내 지역 변수 name이 존재한다. name은 함수 안에서만 접근할 수 있다. 하지만, age는 함수 외부 변수(전역 변수)이며 함수 내부에서는 외부 변수에 접근 및 수정이 가능하다.
🤔 만약에 같은 이름을 가진 변수가 함수 외부 / 내부에 모두 존재한다면 어떻게 될까?
let age = 12;
function printPerson(){
let age = 24;
let name = "seohee";
console.log(name , age);
}
printPerson(); // seohee , 24외부에 선언된 변수는 내부 지역 변수에 의해 가려지게 되는 결과를 확인할 수 있다.
이러한 특성 때문에 외부 변수의 사용은 최대한 지양하는 것이 좋다.
👇 따라서 원하는 값을 전달하여 지역 변수를 변경하고 싶을 때는 매개변수를 사용해야 한다.
function printPerson(age){
let name = "seohee";
console.log(name , age);
}
printPerson(24); // seohee , 24또한 함수를 호출했을 때, 특정 값을 반환하게 할 수도 있다.
function getAge(age){
return age;
}
console.log(getAge(24)); // 24return문을 만나게 되면 함수 실행이 종료된다.
✨ 함수 표현식
함수 리터럴이라고 불리기도 하고, 식의 일부분으로 함수가 생성되며 변수로 저장될 수 있다.
let 함수명 = function( ){ // 구현 로직 }
함수 표현식이 변수에 저장될 경우, 변수는 함수처럼 사용될 수 있다. 변수에 저장된 함수는 함수명이 필요하지 않고, 변수 이름으로 호출된다.
👇 예제 코드를 보자.
let sum = function(a,b){
return a + b;
};
console.log(sum(1,2)); // 3함수 표현식은 변수에 저장되기 때문에, 표현식 끝에 ;세미콜론을 찍어주어야 한다.
Hoisting - 함수선언문 / 함수표현식 호이스팅에서 함수 선언문과 함수 표현식의 차이를 다루고 있으니 참고하길 바란다.
✨ 화살표 함수
화살표 함수는 ES6문법이다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있으며, 화살표 함수는 항상 익명이다.
// 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략 (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략 // 함수 몸체 지정 방법 x => { return x * x } x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략, 암묵적으로 return () => { return { a: 1 }; } () => ({ a: 1 }) // 객체 반환시 소괄호를 사용한다. () => { const x = 10; return x * x; };
👇 함수 표현식으로 작성된 sum( )를 화살표 함수로 바꿔보자.
let sum =(a,b) => { return a + b; };
sum(1,3); // 4JavaScript에서 화살표 함수는 콜백 함수로 사용할 수 있다.
// ES6
let numbers = [1, 4, 9];
let oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]이 경우에는 일반적인 함수 표현식보다 표현이 간결함을 알 수 있다.
❗️ function 키워드로 생성한 일반 함수와의 차이점은 this이다 ❗️
JavaScript에서는
함수 호출 방식에 의해서this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 선언할 때 바인딩의 객체가 정적으로 결정되는 것이 아니라 함수를 호출할 때, 어떻게 호출되었는지에 따라 this에 바인딩할 객체가동적으로 생성된다.
함수의 내부 함수, 콜백함수에 사용되는 this는 window이다.
let person = {
name: "seohee",
getName: function () {
console.log(this) // 가.
setTimeout(function () {
console.log(this) // 나.
console.log(this.name); // 다.
}, 1000);
}
}
person.getName();
// 가. {name: 'seohee', getName: ƒ}
// 나. window
// 다. undefined -----> undefined인 이유는 window에 name이 없다.일반함수에서의 적절한 this를 전달받을 수도 있다.
// 함수안에 that 변수를 선언하기
let person = {
name: "seohee",
getName: function () {
let that = this;
setTimeout(function () {
console.log(that.name);
}, 1000);
}
}
person.getName();
// 1초 후에 ... "seohee"bind를 사용하여 콜백함수에 this 바인딩을 원하는 대로 결정할 수 있다.
// bind 사용하기
let person = {
name: "seohee",
getName: function () {
setTimeout(function () {
console.log(this.name);
}.bind(this), 1000); // bind 사용
}
}
person.getName();
// 1초 후에 ... "seohee"화살표 함수를 사용해보자.
let person = {
name: "seohee",
getName: function () {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
}
person.getName();
// 1초 후에 ... "seohee"클로저 함수처럼 바깥의 함수에 접근해서 this를 사용하기 때문에 "seohee"가 정상적으로 출력된다.
💜 JavaScript 💜 : this를 참고하길 바란다.
🌈 결론
함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 사용하는 것이 좋다. 그러나 함수 선언문을 사용하는게 부적절할 때에는 함수 표현식을 사용하고, 화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용하다. 상황에 맞게 함수를 작성하는 것이 중요할 것이다.
📚 학습할 때, 참고한 자료 📚
