[JavaScript] 자바스크립트의 기초_함수(function)

---

 

 

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

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

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

 

 

목차

함수 선언

매개변수 활용

함수의 결과값 반환

 

---

 

 

함수 선언

함수 선언: function 키워드를 사용하여 함수를 정의하고,  소괄호()와 중괄호{}를 통해 코드를 작성한다.

• 함수 호출: 함수는 선언만으로는 실행되지 않으며, 반드시 소괄호 ()와 함께 함수를 호출해야만 내부 코드가 실행된다.
• 자바스크립트 호이스팅 기능: 함수 선언보다 함수 호출이 코드 상단에 먼저 이루어져도 함수가 정상적으로 실행 가능하다.

// 함수선언: 중복으로 작성되는 코드들 -> 생산성이 낮아짐(리펙토링 문제 발생)
// 반드시 소괄호()와 함께 작성해야 한다 -> 함수 호출이 안됨
// 함수 호출이 위에서 함수 선어보다 먼저 이루어져도 실행된다 -> 자바스크립트의 호이스팅(끌어올린다) 기능
function greeting() {
  console.log("안녕하세요");
}

// 함수를 호출하는 경우에만 확인 가능
console.log("함수 호출 전");
greeting(); // 함수 내부의 코드 실행됨
console.log("함수 호출 후");

 

 

---

 

 

매개변수 활용

매개변수 활용
함수를 호출할 때 외부로부터 값을 받아 함수 내부에서 사용 가능하다.
아래의 getArea() 함수는 항상 고정된 값(10, 20)으로만 넓이를 계산하지만, 가로와 세로 값을 매개변수로 활용할 수 있다.

중첩함수:함수 안에 또 다른 함수를 선언하는 것이 가능하며, 특정 함수의 로직을 세분화하거나 접근을 조절하는 기능을 한다.

// 직사각형의 넓이를 구하는 함수
function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;

  console.log("직사각형 넓이 =", area);
}

getArea();

// 직접 가로 세로 입력 가능한 넓이 함수
// 매개변수(width, height) 활용
// 함수 안에 또 다른 함수 선언 가능
function getArea1(width, height) {
  let area = width * height;
  console.log("직사각형 넓이 =", area);

  function Name() {
    // 중첩 함수
    console.log("임의의 함수 선언 가능");
  }
  Name();
}

getArea1(30, 50);

 

 

---

 

 

함수의 결과값 반환

함수의 결과값 반환
return 사용하면 함수의 실행을 종료하고 지정된 값을 반환하며, return문 밑에 있는 코드는 실제로 수행되지 않는다.

// return: 반환값 = 결과값 -> 함수가 어떤 값을 반환하게 만드는 역할
// return 밑에 있는 코드는 실제로 수행되지 않는다
function getArea2(width, height) {
  let area = width * height;
  return area;
}

let area1 = getArea2(10, 60);
console.log(area1);