JavaScript Functions
자바스크립트에서 함수는, 코드를 그룹핑하고 묶어서 정리해주는 역할을 갖고 있다.
코더는 이 정리된 코드를 나중에 언제든지 꺼내서 재사용할 수 있다.
함수 선언
우선, 자바스크립트에서 함수를 정의하는 방법은 여러가지이다.
그 중 대표적으로 사용되는 방법은 함수 선언이다.
function functionName() {
console.log('Hello World!');
};function은 함수 생성을 알리는 말이다.
functionName은 함수의 이름이자, 해당 함수의 성격을 요약한다. (*꼭 뒤에 괄호가 붙어야 한다.)
중괄호 내의 명령어는 함수를 불러왔을 때 함께 실행된다.
함수 불러오기
함수는 아래의 방법을 통해 불러올 수 있다.
console.log(functionName()); // Output: Hello, World!console.log를 실행시켜 그 안에 함수를 담으면, 함수가 실행된다.
Parameter(매개변수) and Argument(인자)
어떤 함수는 매개변수를 갖고, 그 매개변수를 함수 실행에 사용하기도 한다.
function calculateArea(width, height) {
console.log(width * height);
};함수를 정의하는 괄호 내의 (width, height)가 매개변수이다.
매개변수는 함수 안에서 변수처럼 이용되고 있다.
코드를 불러와 실행할 때는, 이 매개변수가 인자의 성격을 갖는다.
보다 정확하게 '값으로서의 인자'의 성격을 갖는다.
Default Parameter (기본값 매개변수)
Default Parameter는 매개변수의 기본값을 미리 정해놓는 것이다.
function greeting (name = 'stranger') {
console.log(`Hello, ${name}!`)
}위 함수처럼 name이라는 매개변수의 값이 'stranger'라고 미리 지정했을 때,
함수 내에서 그레이브 악센트 내에 ${}를 이용함으로서 Default Parameter를 이용할 수 있다.
이 Default Parameter를 일시적으로 변경해서 사용하고 싶을 경우,
아래와 같이 소괄호 내에 다른 문자를 넣어주면 된다.
greeting('Jean') // Output: Hello, Jean!함수 표현
함수 표현은 자바스크립트의 유연성을 활용한 함수 선언 방식이다.
const calculateArea = function(width, height) {
const area = width * height;
return area;
}위의 함수와 마찬가지로 함수의 이름은 대게 생략된다. 대신 변수의 이름을 통해 대신 함수를 특징지을 수 있다. 이처럼 이름이 없는 함수를 무명 함수라고 한다.
이 함수를 불러올 때는 변수이름과 함수의 인자를 입력하면 된다.
calculateArea(width, height)Arrow Functions (화살표 함수)
Arrow Functions는 2015년에 업데이트된 자바스크립트(ES6)의 기능 중 하나이다. ES6는 2016년부터 브라우저에 적용되기 시작했다.
Arrow Functions는 간단한 기호로서 함수를 표현하기 때문에 함수를 선언할 때 'function'이라는 글자를 쓰지 않아도 된다.
const rectangleArea = (width, height) => {
let area = width * height;
return area;
};Arrow Functions를 활용해 함수를 선언하는 방식이 널리 퍼졌고, 이 방법이 다른 것보다 간편하기 때문에 잘 익히는 것이 중요하다.
함수 바디 내의 명령문이 한 줄일 경우, 더욱 간단하게 바꿀 수 있다.
const squareNum = (num) => {
return num * num;
};
// 위의 함수를 아래와 같이 변경할 수 있다. (소괄호와 중괄호, return 명령어가 없어졌다.)
const squareNum = num => num * num;JavaScript syntax fatterns
Callback Function
콜백 함수를 검색하면 대게의 경우 '비동기 처리'에 대한 말이 함께 나타난다.
콜백 함수가 비동기 처리를 위해서 사용되기 때문에 그렇다.
콜백 함수는 다른 함수 안에서 인자로서 실행되는 함수이다.
이 콜백 함수는 어떤 이벤트가 발생하는 특정한 시점에 실행된다.
콜백은 함수 내에 매개변수로서 들어갈 수 있다.
매개변수인 콜백은 함수 형태로 실행될 수 있다.
// 콜백 함수가 되는 매개변수를 지정한다.
function multifly(a, b, callback) {
var sum = a * b;
callback(sum)
}위의 콜백 함수는 아래와 같이 이용될 수 있다.
// mutifly 함수에 무명 함수를 인자로 전달한다.
multifly(2, 3, function(result) {
console.log(result);
});multifly 함수의 인자에 2, 3, 함수 result를 매개변수 값으로 입력했다.
따라서 multifly 함수가 순서대로 진행되면서,
sum = 2 * 3 = 6 을 계산하고,
그 sum 값을 콜백함수로서 받고(호출하고),
console.log(result)를 통해 화면에 출력한다.
