Part 1. JavaScript 기초 Ch 2. 함수

HanSungUk·2022년 4월 26일

JavaScript TIL

Javascript

목록 보기

2/16

Part 1. JavaScript 기초 Ch 2. 함수 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

1. 함수의 이해

함수는 입력에 따라 논리적인 일련의 작업을 하는 하나의 단위입니다.

function mulTablePrinter(num){
	console.log(num*2);
    consoel.log(num*3);
}

여기서 함수 선언을 위해 필요한 것들에 대해서 살펴보겠습니다.
1. keyword :function
2. name : mulTablePrinter
3. parameter : (num)
4. body : {console.log(num*2; console.log(num*3);)}

함수의 의미

함수는 코드의 묶음입니다.
함수는 기능(function)의 단위입니다.
함수는 입력과 출력간의 매핑(mapping)입니다.
함수는 호출 후에는 반드시 돌아옵니다(return).

함수의 사용법
함수는 일련의 코드를 묶어서 필요할 때마다 호출할 수 있으므로, '즐겨찾기'라고 할 수 있습니다.
1. 함수 선언(declaration) : 함수는 메모리의 코드 영역에 보관됩니다.
  메모리 구조에 대한 내용은 추후 설명하겠습니다.

function cal(param1, param2){
	console.log(param1 + param2);
	return prarm1 * 10;
}

함수 호출(call, invocation) cal(10, 20)

2. 함수 다루기

함수는 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록입니다.
조금 더 좁게 이야기 하자면, 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위입니다.

함수의 입력값과 출력값

function getTriangleArea(base, height){
	let triangleArea = (base*height)/2;
    return triangleArea
}
console.log(getTriangleArea(2,4)) // 4
// 함수 내부에서 return을 한 경우 -> 출력값이 return 문의 값

function getTriangleArea(base, height){
	let triangleArea = (base*height)/2;
   }
console.log(getTriangleArea(2,4)) // undefined
// 함수 내부에서 return을 하지 않은 경우 -> 출력값이 undefined

함수 선언 방법

함수 선언식

function getTriangleArea(base, height){
	let triangleArea = (base*height)/2;
    return triangleArea
}

함수 표현식

const getTriangleArea = function (base, height) {
	let triangleArea = (base*height)/2;
    return triangleArea
}

화살표 함수

const getTriangleArea = (base, height) => {
	let triangleArea = (base*height)/2;
    return triangleArea
}

화살표 함수는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.

만약 함수의 본문(body)에 return문만 있는 경우,
return과 { }중괄호(curly bracket)를 생략할 수 있습니다.
또한 return문에서 소괄호를 사용할 수 있습니다.

const getTriangleArea = (base, height) => base*height /2;
// O, 정상 작동
const getTriangleArea = (base, height) => {base*height /2}; // X, undefined 리턴
const getTriangleArea = (base, height) => (base*height /2); // O, 정상 작동

만약 함수 내의 표현식이 2줄 이상인 경우, return과 { }중괄호(curly brace)를 명시적으로 쓰는 것이 좋습니다.

함수 선언

  const getTriangleArea = (base, height) => {
	let triangleArea = (base*height)/2;
    return triangleArea
}

함수 호출
getTriangleArea(3,4)

이때, 함수 선언문의 (base, height) 부분을 매개변수 혹은 인자(parameter)라고 합니다. parameter는 함수를 실행할때 입력에 따라서 바뀔 수 있는 변수지만 let등의 키워드를 쓰지 않고 사용할 수 있습니다.
또한 함수 호출문의 (3, 4) 부분을 전달인자 혹은 인수(argument)라고 합니다. argument는 함수를 호출할때 매개변수에 할당되는 값을 말합니다.