2-6. 함수

2022. 6. 9. 11:50React/한입 크기로 잘라 먹는 리액트(React.js)

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;
console.log(area1);

let width2 = 30;
let height2 = 40;
let area2 = width2 * height2;
console.log(area2);

이렇게 코드를 짤 수 있지만, 아래와 같이 함수를 만들어 코드를 더 간단하게 만들 수 있다.

function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;
  console.log(area);
} // 함수 선언식, 함수 선언 방식의 함수 생성
getArea();
console.log("함수 실행 완료");
getArea();
getArea();

이렇게 불러올 수 있지만, 계속 200인 답만 낼 수 있는 함수이다.

그래서 아래와 같이 매개변수를 사용하여 진행하면 된다.

function getArea(width, height) {
  let area = width * height;
  console.log(area);
} // 함수 선언식, 함수 선언 방식의 함수 생성
getArea(100, 200);
getArea(50, 400);
getArea(70, 500);
getArea(60, 2600);
console.log("함수 실행 완료");

근데 이걸 return 방식으로 값을 낼 수 있는데

function getArea(width, height) {
  let area = width * height;
  return area;
}
let area1 = getArea(100, 200);
console.log("area1 : " + area1);
console.log("함수 실행 완료");

함수 내에있는 area는 함수 밖에서는 호출 할 수 없다 -> 지역변수

함수 외부에서 선언한 변수는 함수 내부에서 접근할 수 있다. -> 전역변수

let count = 1; // 전역변수

function getArea(width, height) {
  let area = width * height; // 지역변수
  console.log(count);
  return area;
}
let area1 = getArea(100, 200);
console.log("area1 : " + area1);
console.log("함수 실행 완료");

'React > 한입 크기로 잘라 먹는 리액트(React.js)' 카테고리의 다른 글

2-8. 콜백함수  (0) 2022.06.17
2-7. 함수 표현식 & 화살표 함수  (0) 2022.06.09
2-5. 조건문  (0) 2022.06.08
2-4. 연산자  (0) 2022.06.08
2-3. 자료형과 형 변환  (0) 2022.06.07