개발 기록 남기기✍️

자바스크립트 기초 (4) - 함수의 기초, 함수 표현식, 화살표 함수 본문

Front-End/JavaScript

자바스크립트 기초 (4) - 함수의 기초, 함수 표현식, 화살표 함수

너해동물원 2022. 12. 5. 13:05

이번 포스트는 코딩앙마님의 강의를 보고 작성되었습니다.

[자바스크립트 기초 강좌 : 100분 완성 - YouTube](https://www.youtube.com/watch?v=KF6t61yuPCY)


1. 함수의 기초

function sayHello (name){
    console.log(`Hello. ${name}`);
};
sayHello("Mike"); // Hello. Mike

function은 함수 선언, sayHello는 함수 이름, name은 매개변수로, 매개변수는 여러 개를 넣을 수 있으며 이름도 마음대로 설정 가능하다.

함수를 호출하려면 함수명(매개변수) 식으로 호출한다.

함수에 return이 선언되면, return을 만나는 즉시 함수를 중단하고 값을 반환한다.

✔️ 함수에서는 한 번에 한 작업에 집중하는게 좋고, 읽기 쉽고 어떤 동작인지 바로 알 수 있게 네이밍해줘야 한다.

  • 전역 변수 : 어디에서나 접근 가능한 변수
  • 지역 변수 : 함수나 블럭 내부에서만 사용 가능한 변수
  • 지역 변수는 전역 변수와 동일한 변수명으로 선언할 수 있고, 전역 변수에 영향을 미치지 않는다.

2. 함수 표현식, 화살표 함수

function sayHello(){console.log("hello")}; // 함수 선언문

let sayHello = function(){
    console.log("hello");
}; // 함수 표현식


let add = (num1, num2) => {return num1 + num2}; // 화살표 함수
let add2 = (num1, num2) => (num1, num2); // 화살표 함수 축약형
let add3 = (n1 + n2) => n1 + n2; // () 생략 가능
let add4 = (n1 + n2) => {
    const result = n1 + n2;
    return result;
} // 축약 불가
  • 함수 선언문은 어디서든 호출 가능하다.(호이스팅)
  • 함수 표현식은 익명 함수에 변수를 할당하는 식으로, 변수가 할당 후에만 호출 가능하다.
  • 화살표 함수는 함수 표현식을 축약형으로 표현하는 것이다.
  • return문이 있으면 return을 생략하고 { }( )로 바꿔서 표현 가능하다.
  • return문이 있다고 해도, return 전에 여러 줄의 코드가 있으면 return 생략 불가능하다.