MJS - function
ES6 이전에는 함수를 여러가지 형태로 사용했습니다.
일반 함수, 생성자 함수, 메서드 등의 방식으로
활용할 수 있었지만
메모리 낭비나 실수 유발 등의 문제가 조금씩 있어왔습니다.
JS에서는 함수를 '일급 객체'로 분류합니다.
일급 객체 (First Class Object)란 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.
함수를 변수에 저장해서 사용할 수 있으며
결과를 리턴받을 수 있고
일반적인 연산을 다 수행가능하다는 뜻입니다.
아래와 같이 함수를 변수 foo에 저장해서 사용할 수 있다는 뜻 입니다.
<script>
let foo =
function() {
return 1;
}
console.log(foo);
// 일반적인 함수로서 저장된 함수 호출
// 변수명();
foo();
// 생성자 함수로서 호출
new foo(); // => foo {}
// 메서드로서 호출하기
var obj = {ddd:foo};
// ddd라는 키값에다가 함수 foo를 매칭시킴
obj.ddd(); // -> return 1 실행
console.log(obj);
</script>화살표 함수 allow function
화살표 함수(allow function)은
기존의 function키워드 대신 => 화살표를 사용해
간략하게 함수를 정의하는 문법입니다.
화살표함수는 표현만 간략한 것이 아니라
내부 동작도 기존 함수보다 간략한데
이것은 this 등의 키워드를 배제했기 때문입니다.
화살표 함수는 이름을 부여할 수 없고
오로지 변수에 저장해야만 이름이 부여되는
익명 함수입니다.
한 번 multiply 변수에 x, y 두 개를 받아
곱해서 리턴하는 간단한 함수를
화살표 함수로 저장해보겠습니다,
// => 뒤에 바로 리턴문이 오는 경우는
// 중괄호나 return을 쓰지 않아도 됩니다.
const multiply = (x, y) => x * y;
// 위의 식은
// const multiply = function(x,y) {
// return x * y;
// } 와 같은 식입니다.
let result = multiply(2, 3);
console.log(result); // => 6 출력
선언 문법
-
파라미터가 여럿인 경우는 소괄호 안에 나열한 후
-
화살표 중괄호 여닫고 실행문을 작성하면 됩니다.
-
(파라미터 1, 파라미터 2, ...) => {실행구문};
참 간단합니다.
// x와 y 2개를 입력받아 x + y 를 리턴하는 함수를
// 화살표 함수로 만들어 상수 plus에 저장하신 다음
// 1, 2를 넣어 실행한 결과를 result 변수에 저장해
// 콘솔에 찍어보겠습니다.
const plus = (x, y) => x + y;
let result2 = plus(1, 2);
console.log(result2);
// 일반 자바 문법으로는 어떻게 할까요.
const plus2 = function(x, y) {
return x + y;
}
화살표 함수에서는
매개변수가 하나뿐이라면 하나만 있다면 소괄호는 생략 가능합니다.
let result3 = plus2(1, 2);
console.log(result3);
// 파라미터1 => {실행구문};
const minus = x => {
return x - 10;
}
// 20을 넣고 10을 리턴받아 result에 저장 후 콘솔에 찍어보겠습니다.
let result4 = minus(20);
console.log(result4);
</script>매개변수가 없는 경우
소괄호를 생략할 수 없습니다.
() => {실행구문}
// 상수 hello에 익명함수를 저장하고 이 함수를 호출하면
// "hello"를 리턴하도록 해보겠습니다.
const hello = () => {
return "hello"
}
let result5 = hello();
console.log(result5);
const hello2 = function() {
return "hello"
}
result = hello2();
console.log(result);
일단은 여기까지 입니다.