[JavaScript] 자바스크립트 함수

프로그래밍을 하다보면 똑같은 동작을 하는 코드들이 여기저기 존재 , 그런 코드들이 필요할 때가 꽤 많음
중복되는 동일한 동작의 코드들을 하나로 묶어서 함수라는 것으로 만들어서 사용 가능

직사각형의 면적을 계산하고, 계산된 값을 콘솔에 출력하는 프로그램👇

let width1 = 10; //너비
let height1 = 20; //높이
let area1 = width1 * height1; //면적
console.log(area1); //200

let width2 = 30; //너비
let height2 = 15; //높이
let area2 = width2 * height2; //면적
console.log(area2); //450

2개의 직사각형의 넓이를 구하고 콘솔에 출력하는 프로그램 -> 중복되는 부분 발생 (값만 달라지고 동작은 같음)

중복되는 코드들을 효율적으로 줄일 수 있는 방법 -> 함수!

function은 함수를 만드는 키워드
function 뒤에 함수 이름
소괄호는 매개변수를 전달하고 받는 과정을 하기 위한 역할
중괄호의 내부에 함수가 어떤 일을 할 것인지 적어주면 됨

직사각형 넓이를 구하는 함수

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

// 함수는 누군가 사용을 해줘야만 구현부가 실행됨 -> 함수호출하면됨

// 함수 호출
getArea(); //200 -> 함수를 호출하면 다음줄로 넘어가는것이 아니라 함수의 중괄호 안으로 제어가 넘어감
console.log("함수 실행 완료");

함수를 호출하면 함수의 중괄호 내부에 있는 동작이 끝나기 전까지는 다음 동작 실행 X (함수는 여러번 호출해도 O.K)

함수에 값을 전달하려면 매개변수 사용 (콤마와 함께 전달하고 싶은 값 작성)

함수에 값을 받을 때는 이름을 정해줘서 받아야함

10개의 직사각형 넓이 계산 함수

function getArea(width,height){
  let area = width*height; 
  console.log(area);
} 

getArea(1,200);
getArea(2,200);
getArea(3,200);
getArea(4,200);
getArea(5,200);
getArea(6,200);
getArea(7,200);
getArea(8,200);
getArea(9,200);
getArea(10,200);
console.log("함수 실행 완료");

함수의 결과값을 변수에 할당해서 받고 싶을때는 return을 써주면 됨
함수 내부에 return을 쓰고 어떤 값을 오른쪽에 써주면 함수가 호출되면 return 받는 값을 반환한다.
함수 내부에서 return 키워드를 이용해서 어떤 값을 반환하게 되면 반환한 값을 대입연산자를 활용해 변수에 할당해서 사용 가능

function getArea(width,height){
  let area = width*height; 
  return area;
} 

let area1 = getArea(100,200); //area1은 return 받은 값을 저장
console.log("area1 : ",area1);
console.log("함수 실행 완료");

자바스크립트 함수의 선언, 호출, 매개변수, 반환까지 살펴 보았다.

함수 내에 선언된 변수는 함수 외부에서 접근할 수 X -> 지역변수

function getArea(width,height){
  let area = width*height; 
  return area;
} 

let area1 = getArea(100,200); 
console.log(area); // 지연변수라 에러 뜸

함수 외부에서 선언된 변수는 함수 내부에서 접근할 수 O -> 전역변수

let count = 1;

function getArea(width,height){
  let area = width*height; 
  console.log(count); //전역변수라 접근 O , 결과 : 1
  return area;
} 

let area1 = getArea(100,200);