[JavaScript] 자바스크립트의 기초_함수의 활용

 

 

---

 

 

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

 

목차

함수 표현식

화살표 함수

 

---

 

 

함수 표현식

함수 표현식
함수를 값처럼 취급하여 변수에 할당하며, 함수에 이름이 있을 수도 있고 없을 수도 있다.

• 함수 자체를 변수에 할당하여, 그 변수를 통해 함수 호출이 가능하다.
• 함수 선언과 다르게, 함수 이름으로는 직접 호출이 불가능하고 변수 이름으로만 호출해야 한다.

// 1. 함수 표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA;
// console.log(varA); // 함수 실행 코드 자체가 출력
varA(); // 함수 할당된 변수 자체를 함수처럼 활용 가능

// 선언식이 아니다 -> 함수 이름으로는 출력이 안되고 변수 이름으로 출력 가능
// 콜백 함수 같은 등등의 개념에서 유용하게 활용된다
let varB = function funcB() {
  //익명 함수
  console.log("funcB");
};

varB();
// funcB(); // 오류 발생

 

 

---

 

 

화살표 함수

화살표 함수
기존 함수 표현식보다 더 간결하게 함수를 정의할 수 있으며, function 키워드를 사용하지 않는다.

• return문이 하나인 경우:  함수에 return문만 존재한다면, 중괄호{} 와 return 키워드를 생략 가능하다.
• 매개변수가 하나이고 return문이 하나일 경우: 매개변수를 감싸는 소괄호()도 생략 가능하다.
• 여러 줄의 코드나 console.log 등이 포함될 경우: 중괄호{}를 생략할 수 없고 return도 표시 해야한다.

// 2. 화살표 함수: function을 없애고 화살표로 함수 선언
let varC = () => {
  return 1;
};

// console.log(varC());

// 중괄호도 지우고 작성 가능
let varD = (value) => value + 1;
// console.log(varD(10));

let varE = (value) => {
  console.log(value);
  return value + 1;
};
console.log(varE(10));