[JavaScript] 기초 #10 - 함수(function)의 기초

 

브라우저 내장함수

-         console

-         alert

-         confirm

 

함수(function)

function sayHello(name) {
	let msg = ‘Hello’;

	if(name) {
		msg += `, ${name}`;
	}
	
    console.log(msg);
}

sayHello(‘Angel’); //“Hello, Angel” 출력
console.log(msg); //error 메시지 출력

 

-         sayHello: 함수명

-         name: 매개변수 (없을 수도 있음)

-         msg: 지역변수, 함수 밖에서 접근할 수 없음

-         sayHello(‘Angel’): 함수 호출

 

→  msg를 함수 밖에서 선언하면 전역변수가 되어 함수 내부에서 수정한 값이 밖에도 반영이 되고 접근 가능

 

 

ex)

let msg = “welcome”; //전역변수
console.log(msg); → “welcome” 출력

function sayHello(name) {
	let msg = “Hello”; //지역변수
	console.log(msg + ‘, ‘ + name);
}

sayHello(‘Angel’); → “Hello, Angel” 출력
console.log(msg); → “welcome” 출력

 

ex)         

let name = “Angel”;

function sayHello(name) {
	console.log(name);
}

sayHello(); //undefined 출력
sayHello(‘Noonsong’); //“Noonsong” 출력

 

→  매개변수로 받은 값은 복사된 후 함수의 지역변수가 됨

 

 

OR 사용하기

function sayHello(name) {
	let newName = name || ‘friend’;
	let msg = `Hello, ${newName}`;

	console.log(msg);
}

sayHello(); //“Hello, friend” 출력
sayHello(‘Angel’); //“Hello, Angel” 출력

 

 

Default 값 사용하기

function sayHello(name = ‘friend’) {
	let msg = `Hello, ${newName}`;

	console.log(msg);
}

sayHello(); //“Hello, friend” 출력
sayHello(‘Angel’); //“Hello, Angel” 출력

 

return

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

const result = add(2, 3);
console.log(result); //5 출력

 

-         값을 반환할 때 사용

-         함수를 종료할 때 사용

 

 

함수 정리

-         한 번에 한 작업에 집중

-         읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 ex) showError(), getName(), …

-         재사용성이 뛰어남

-         유지보수가 용이함

 

 

 

↓[코딩앙마] 자바스크립트 기초 강좌 링크

https://www.youtube.com/watch?v=HQGkiD-dXFI