함수 ( function )

쵸리·2021년 11월 18일
1

JavaScript

목록 보기
6/7
post-thumbnail

함수 ( function ) 란?

함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여주고 유지보수에 용이하고 가독성이 좋다. JS에서는 함수도 하나의 자료형이다. 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하고 함수 내에 중첩되어 정의되는 것도 가능하다. 함수는 프로그램을 구성하는 주요 구성요소 이다. 나중에 함수들을 모아놓은 모듈이 있는데 js 파일끼리 내보내고 가져올 수 있다.

함수 선언문

앞에 function을 써주고 용도에 맞는 함수명을 지어주고 매개변수는 필요하면 쓰고 필요하지 않으면 안써도 된다. js의 매개변수는 따로 앞에 데이터 타입을 적어주지 않아도 된다. return은 반환할 값이 있으면 적어주고 반환할 값이 없으면 안적어줘도 된다. 그냥 return; 만 하게되면 함수를 즉시 종료한다.

function 함수명 (매개변수1, 매개변수2) {
	함수 내용
    return 반환값;
}

함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 앞에 변수선언 키워드를 써주고 함수명을 쓰고 뒤에 function ()을 해주고 나머지는 선언문과 동일하다.

let 함수명 = function () {
	함수 내용
    return 반환값;
}

함수 선언문과 함수 표현식의 차이

함수 선언문은 어디서든 호출 할 수 있다. 예를 들어 함수를 선언한 위에다가 써도 동작을 한다. ( 호이스팅 때문 ) 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하고 함수 선언문은 스크립트를 실행하기 전 준비단계에서 전역에 선언된 함수 선언문을 찾는다.

화살표 함수 ( arrow function )

화살표 함수는 JS ES6에서 새로 생긴 함수 표기법이다. 함수 표현식과 문법이 비슷하지만 function 키워드가 빠지고 대신 화살표를 넣어준다. 매개변수가 하나밖에 없다면 매개변수 소괄호를 생략할 수 있다. 매개변수가 없거나 2개 이상인 경우에는 소괄호를 생략할 수 없다. 화살표 함수는 return을 생략 가능하다. return 전에 여러줄의 코드가 있을경우는 중괄호 생략 불가능하다.

let 함수명 = (함수에서 쓰일 매개변수) => {
	함수내용
    return 반환값;
}
// return 생략
let 함수명 = (함수에서 쓰일 매개변수) => (
  반환값;
)
//  return이 한줄이라면 소괄호도 생략가능
let 함수명 = (함수에서 쓰일 매개변수) => 반환값;

함수 호출

함수호출은 아주 간단하다.

let fnc = (a,b) => a+b; // 라는 함수가 있을때
fnc(인자1,인자2); // 함수호출이 된다. 그리고 호출할때 소괄호안에 인자가 있는데
       // 인자에 뭘 넣게되면 매개변수로 전달 된다.
console.log(fnc(1,2)); // 3

0개의 댓글