[자바스크립트 기초 강좌: 100분 완성] 함수

함수(Function)

1. 하나의 한 작업에 집중
2. 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

정의

function sayHello(name){
	console.log(`Hello, ${name}`);
}

sayHello('Mike');

function: 함수 선언

sayHello: 함수명

name: 매개변수. 없을 수도 있음. 2개 이상이면 , 로 구분 (ex. console.log(name1, name2, name3))

{ } 내부: 함수의 실행 코드

function sayHello(name){
	let newName = name || 'friend'
	let msg = `Hello, ${newName}`;
	console.log(msg);
}
sayHello();         //"Hello, friend"  -> let newName=name이 실행 안 되므로 or인 friend값 실행
sayHello('Jane');

default값 설정

function sayHello(name = 'friend'){     //default값 설정. name이 없을 때만 실행
	let msg = `Hello, ${newName}`;
	console.log(msg);
}
sayHello();        
sayHello('Jane');

return으로 반환

function add(num1, num2){
	return num1 + num2;
}

const result = add(2,3);
console.log(result);

return문이 있으면 그 즉시 return문 오른쪽에 있는 값을 반환하고 종료함.

따라서 함수를 종료하는 목적으로도 사용

function showError(){
	alert("에러 발생");
	return;
	alert("절대 실행 안 되는 코드");
}
const result = showError();
console.log(result);

---

함수 표현식

let sayHello = function(){
	console.log('Hello');
}

sayHello();

함수 선언문과 작성하는 문법 외에 어떤 차이가 있는가?

• 함수 선언문: 어디서든 호출 가능 (호이스팅 hoisting에 의해 js 내부에서 함수 선언이 먼저 이루어지고 그 후에 실행되기 때문에 먼저 선언하고 나중에 정의했더라도 실행이 된다)
• 함수 표현식: 코드에 도달하면 생성

---

화살표 함수

let add =(num1, num2) =>
return num1 + num2

/*let add = function(num1, num2){
	return num1 + num2
}*/

1. function 대신 매개변수 뒤 => 로 교체 가능
2. return 문은 중괄호를 소괄호로 바꿀 수 있음
3. return문이 한 줄이라면 괄호 생략 가능
4. 인수(매개변수)가 하나일 때도 괄호 생략 가능
5. 인수가 없는 함수라면 괄호 생략 불가능
6. return 전에 여러 줄의 코드가 있으면 소괄호 사용 불가

 

 

 

강의 출처. 코딩앙마(Youtube)

https://www.youtube.com/watch?v=KF6t61yuPCY&t=229s