[Javascript] 함수(1)

함수선언

 

 function 함수이름 () {

실행하는 코드

 };

 

function music() {

console.log("Lemon");

}

 

실제로 console 확인해 보면 아무런 변화 X

 

WHY? 함수는 선언했다고 바로 실행 X → 함수 호출 필요

 

 

함수호출

 

함수이름 ();

 

→ 소괄호 꼭 같이 써야 함, 안 쓰면 오류

 

함수가 호출하면 프로그램 실행 순서가 함수내부로 이동

 

a;

함수(){

};

b;

 

일 때 실행 순서는 a → 함수 → b

 

ex 삼각형의 넓이를 구하는 함수

 

function getArea() {

 let width = 10;

 let height = 20;

 let area = (witdh * height) / 2;

 

 console.log(area);

}

 getArea();

 

 

 

인수, 매개변수

 

위의 함수는 고정값을 사용

우리가 그 때마다 바뀌게 넣고 싶으면 인수와 매개변수 사용

 

function getArea(width, height) {

 

 let area = (witdh * height) / 2;

 

 console.log(area);

}

 getArea(10,20);

getArea(30, 20);

getArea(120, 200);

 

인수 : 함수를 호출하면서 전달하는 값

 ex) getArea(10,20);

 

매개변수 : 전달된 인수를 순서대로 저장하는 함수의 특수한 변수

ex) function getArea(width, height ) 

 

 

 

인수와 매개변수를 이용하면 동적으로 함수 이용 가능

 

 

 

 

return

 

함수내에서 return을 사용하면 작성된 값을 반환 → 반환 값(함수 호출의 결괏값))

함수가 리턴을 만나면 그대로 함수 종료

 

function getArea2(width, height) {

let area = width * height;

 

return area;

}

let area1 = getArea2(10, 20);

let area2 = getArea2(20, 30);

console.log(area1);

 

 

중첩함수

 

자바스크립트는 함수 내에 다른 함수 선언 가능

 

function getArea3(width, height) {

 

   function another() {

   console.log("another");

    }

 

another();

let area3 = width * height;

 

return area3;

}

getArea3(10, 20);

 

 

 

return

 

함수 내에서return을 사용하면 작성된 값을 반환 → 반환 값(함수 호출의 결괏값))

함수가 리턴을 만나면 그대로 함수 종료

 

function getArea2(width, height) {

let area = width * height;

 

return area;

}

let area1 = getArea2(10, 20);

let area2 = getArea2(20, 30);

console.log(area1);

 

 

호이스팅

 

뜻 : 끌어올리다

 

자바스크립트의 독특한 기능

 

함수를 미리 호출하고 함수의 식을 뒤에 있어도 오류 없이 잘 실행

 → 유연하게 프로그램 작성 가능

 

let area1 = getArea2(10, 20);

let area2 = getArea2(20, 30);

console.log(area1);

 

 

function getArea2(width, height) {

let area = width * height;

 

return area;

}

 

함수표현식

 

함수를 변수에 저장하는 것 → 함수를 따로 호출 안 해도 됨

 

let lemon = function muisc() {

console.log(" lemon");

};

 

lemon();

 

선언문이 아니기 때문에 함수이름으로는 부를 수 없음 → 익명함수

또한 호이스팅 불가

 

 

 

 

화살표 함수

 

 기존의 함수식보다 더 간결하게 표현

 

let 변수 = () =>{

  실행할 코드

};

 

화살표 함수가 단순하게 값을 반환할 때는

 

let 변수 = () => 값;

 

으로 축약 가능

 

 

매개변수도 사용 가능

 

let 변수 = ( 매개변수) =>  매개변수 + 값;

console.log(변수 (인수)); 처럼 작성