JavaScript 함수

Angela_Hong·2023년 1월 30일
JavaScript
3
post-thumbnail

🗂 함수란?

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
함수는 입력을 받아 코드블록 내부의 코드를 실행한 후 함수의 샐행결과를 반환하는 과정의 묶음이다.
함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

🗂 함수를 사용하는 이유는?

코드가 길어지거나 처리해야할 기능들이 많아진다면 기능별로 나누는 것이 편리하다.
동일한 코드를 여러번 작성하는 방식보다 코드를 블록으로 그룹화하여 하나의 작업과 연결해 재사용을 하는 방식이 효율적이다.

1) 코드의 재사용성 : 미리 정의된 함수를 여러번 호출할 수 있어 유용함
2) 유지보수의 편의성 : 코드 중복을 억제하고 재사용성을 높임
3) 코드의 신뢰성 : 개발자의 실수를 줄일 수 있음
4) 코드의 가독성 : 각 함수의 역할 파악이 빠름

예) 함수를 사용하지 않았을 경우

console.log(`Hello, 철수!`);
console.log(`Hello, 짱구!`);
console.log(`Hello, 훈이!`);

예) 함수 사용할 경우

function sayHello(name){
	console.log(`Hello,` + name + `!`);
}
sayHello('철수')		//"Hello, 철수!"
sayHello('짱구')		//"Hello, 짱구!"
sayHello('훈이')		//"Hello, 훈이!"

🗂 함수선언식과 함수표현식

📂 함수선언식 Function Declarations

함수선언식은 함수명이 정의되어있고, 별도의 할당 명령이 없음
함수선언식은 hoisting에 영향을 받는다.

function addNumbers(num1, num2){
	return num1 + num2;
}
addNumbers(1,2); //함수호출

📂 함수표현식 Function Expressions

함수표현식은 정의한 function을 별도의 변수에 할당함
함수표현식은 hoisting에 영향을 받지 않는다.

const addNumbers = function(num1, num2){
	return num1 + num2;
}
addNumbers(1,2); //함수호출

📌 hoisting이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것을 의미한다.
hoisting 대상 : var 변수 선언, 함수선언문
hoisting 대상 X : let, const 변수 선언, 함수표현식

console.log("hello");
var myname = "Hi";
let myname2 = "Hi2"
//Hoisting 결과
var myname;	// Hoisting O
console.log("hello");
var myname = "Hi";
let myname2 = "Hi2"	// Hoisting X

🗂 매개변수와 인수

📂 매개변수란?

함수를 선언할 때 외부에서 값을 받는 변수를 의미한다.

📂 인수란?

매개변수가 있는 함수를 호출할 때 실제로 값을 넣어 넘겨주는 것을 의미한다.

function sum(a,b){	// a,b는 매개변수
	return a + b;
}
sum(1,2);			// 1,2는 인수

🗂 변수의 유효범위

📂 스코프란?

선언한 변수의 적용 범위를 의미한다.
어느 위치에서 변수를 접근할 수 있는지를 가리킴

📂 지역 변수란?

함수 내에서 선언된 변수를 의미한다.
지역변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.
함수의 매개변수 또한 함수 내에서 정의되는 지역변수처럼 동작한다.

📂 전역 변수란?

함수의 외부에서 선언된 변수를 의미한다.
전역변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹페이지가 닫혀야만 메모리에서 사라진다.
전역변수는 함수 외부뿐만아니라 내부에서도 접근하여 변경 가능함

📂 블록스코프란?

자바스크립트에서 의미하는 블록이란 {}로 둘러싸인 영역을 의미한다.
블록별로 변수의 유효 범위가 결정되는 것을 블록 스코프라고 한다.

📌 자바스크립트 변수 사용

1) var 변수보다 let, const 변수를 사용한다

  • var변수는 다시 선언을 할 수 있어서 실수로 같은 변수를 다시 선언해도 오류가 발생하지 않기 때문에 여러 사람이 함께 진행하는 프로젝트라면 호이스팅이 없는 let 이나 const 변수를 사용하는 것이 안전하다.

2) 전역 변수는 최소한으로 사용한다

  • 전역 변수는 프로그램의 모든 곳에서 접근할 수 있어서 편하지만, 어디서든 변경이 가능하기 때문에 예상치 못한 오류가 발생할 수 있다.

3) 객체 선언은 const를 사용한다

  • 객체를 선언할 때 객체가 바뀌지 않도록 const를 사용해서 선언한다. const로 선언해도 객체 안에 있는 프로퍼티는 얼마든지 수정이 가능하다.

🗂 다양한 함수들

📂 익명함수란?

함수 이름이 없는 함수, 즉 변수에 할당해서 사용하는 함수를 의미한다.
함수를 익명 함수를 선언하는 이유는 변수처럼 사용하기 위해서이다.

let sum = function(a,b){
	return a + b;
}

📌 1급 함수 / 1급 시민 first-class

자바스크립트에서는 함수를 마치 하나의 값처럼 사용할 수 있다.
그래서 함수를 변수에 할당할 수 있고, 함수를 다른 함수의 매개변수로 넘길 수도 있다.
이러한 점으로 인해 1급 함수라고 한다.

1) 변수에 할당할 수 있어야 한다

let sum = (a,b) => a + b;

2) 다른 함수의 인자로 사용할 수 있어야 한다

function hello(){
	return "안녕하세요?";
}
function bye(){
	return "안녕히 가세요.";
}
function userCheck(name, fn){
	console.log(`${name}님`, fn());
}
userCheck("홍길동", hello) // 홍길동님, 안녕하세요?
userCheck("도레미", bye) // 도레미님, 안녕히 가세요.

3) 다른 함수에서 반환값으로 반환할 수 있어야 한다

let init = () => {
	return function(a,b){
	return a-b > 0 ? a-b : b-a;
	}
}
console.log(${init()(10,20)}) // 10
		// init() 중요! init을 쓰면 function(a,b) 부분이 출력된다

📂 즉시 실행 함수란?

한 번만 실행하는 함수일 경우 함수를 정의하면서 동시에 실행할 수 있게 만드는데 이런 함수를 즉시 실행 함수라고 한다.

//즉시 실행 함수의 기본 형식
(function(){
  ...
}();)
(function(매개변수){
  ...
}(인수);)

📂 화살표 함수란? arrow function

화살표 함수는 표현식을 사용해 함수를 정의할 경우에만 사용할 수 있다.

(매개변수) => {함수 내용}
let hi = function {return `안녕하세요?`};
let hi = () => {return `안녕하세요?`};
let hi = () => `안녕하세요?`;

📂 콜백 함수란? callback function

다른 함수의 인수로 사용하는 함수를 의미한다.
콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정 시점에 실행된다.
함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말한다.
콜백 함수는 비동기식 처리 모델(처리가 종료하면 호출될 함수를 미리 매개변수에 전달하고 처리가 종료하면 콜백함수를 호출하는 것)에 사용된다.
가장 자주 사용되는 대표적인 예는 이벤트 핸들러 처리이다.

const bttn = document.querySelector("button");
function display(){
	alert("클릭했습니다")
}
bttn.addEventListener("click", display);

📂 재귀 함수란? Recusive function

재귀함수는 자기 자신을 호출하는 함수를 말한다.
재귀 함수는 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다. 탈출 조건이 없는 경우, 함수가 무한 호출되어 에러가 발생한다.

🗂 전개 구문

📂 전개구문이란?

값을 펼쳐주는 구문을 의미한다.
배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나, 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야 할 때 유용하다.

fruits = ["apple","banana","grape"]
console.log(fruits) // ["apple","banana","grape"]
console.log(...fruits) // apple banana grape

📂 나머지 매개변수란?

함수를 실행하면서 넘겨주는 인수의 일부분은 변수로 받고, 그 외에는 나머지 매개변수로 받아올 수 있다.

function displayFavorites(first, ...favs){
	let str = `가장 좋아하는 과일은 ${first}이다.`
	return str;
}
console.log(displayFavorites("사과","포도","토마토")); // 가장 좋아하는 과일은 사과이다.
const user = ["His","name","is","Hong"];
console.log(user);	//["His","name","is","Hong"]
console.log(...user); // His name is Hong

디폴트 매개변수

디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값을 의미한다.
자바스크립트에서 매개변수의 기본값은 undefined값으로 설정되어있다.
하지만 디폴트 매개변수를 이용하면 매개변수의 기본값을 바꿀 수 있다.

function mul(a, b=1){
	return a * b;
}
mul(3,4) // 12
mul(3) 	  // 3

🗂 타이머 함수

📂 setInterval()이란?

일정한 시간마다 함수를 반복해서 실행하는 함수로, 시간은 밀리초 단위로 사용한다.

📂 clearInterval()이란?

setInterval()함수는 한번 실행하면 웹 브라우저를 종료하기 전까지는 문서를 새로고침하거나 다른 페이지를 이동해도 계속 실행된다.
함수를 계속 반복하는 것이 아니라 특정 조건이 되었을 경우 반복을 종료하려면 clearInterval()함수를 사용해야 한다.

let timer = setInterval(() => {
	console.log("안녕하세요")
}, 2000);
clearInterval(timer)

📂 setTimeout()이란?

setInterval()은 일정한 시간마다 콜백함수를 반복하지만,
setTimeout() 함수는 지정한 시간이 지난 후에 콜백 함수를 실행한다.

setTimeout(() => {
	console.log("안녕하세요")
}, 3000)		// 3초 후에 안녕하세요라는 인사말을 표시한다
profile
Angela_Hong
다음 포스트

JavaScript DOM

0개의 댓글

관련 채용 정보