[Javascript 기초] 함수(function) - 가온 코딩

함수(function)

 

 

목차

0. 사용 이유

1. 함수의 기본 생김새

2. 지역변수 전역 변수

3. return으로 값 반환

4. 함수(function) TIP

 

 

 

0. 사용 이유

 

중복되는 코드를 함수로 지정해주면 중복작성을 하지 않고 간단하게 표현할 수 있다.

 

지금까지 썼던 console, alert, confirm 은 모두 내장 함수이다. 자바스크립트에서 기본적으로 함수로 정해놓은 것이다.

 

함수의 기본 생김새

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

sayHello(name); // Hello, name 출력

function: 함수라는 뜻

sayHello: 함수명(아무거나 가능)

name: 매개변수(없을 수도 있고, 한 개, 두 개 이상일 수도 있음) - 여러 개일 경우 쉼표(name1, name2, name3)로 구분

 

예시 1) 에러 메시지 호출

// 함수 작성

function showError(){
	alert('에러가 발생했습니다. 다시 시도해주세요.');
}

showError();	// alert 창 호출

 

예시 2) 이름 호출

// 함수 작성
// 매개변수가 있는 함수

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

sayHello('Mike');	// Hello, Mike
sayHello('Tom');	// Hello, Tom
sayHello('Jane');	// Hello, Jane

 

만약 아무 값도 입력하지 않는 상황에 대비한다면?

name이 true인 경우에만 Hello, name을 출력하고, 이외에는 Hello만 출력하게 한다.

이때, msg는 변해야 하는 변수이므로 let으로 선언한다.

function sayHello(name){
	let msg = `Hello`;
    if(name){
    mag = `Hello, ${name}`;
    }
    console.log(msg);
}

sayHello();	// Hello

위 코드는 아래와 같이 나타낼 수 있다.

function sayHello(name){
	let msg = `Hello`;
    if(name){
    mag += ', &{name}';	// 혹은 ', ' + name 으로 가능
    }
    console.log(msg);
}

sayHello();	// Hello
sayHello('Mike');	// Hello, Mike

또는 이전에 배운 논리 연산자로 나타낼 수 있다.

function sayHello(name){
	let newName = name || 'friend';
    let msg = `Hello, ${newName}`
    console.log(msg);
}

sayHello();	// Hello, friend
sayHello('Mike');	// Hello, Mike

또는 name의 디폴트 값을 설정해서 나타낼 수도 있다. 결과는 같다.(name이 기존에 없을 때만 가능)

function sayHello(name = 'friend'){
    let msg = `Hello, ${name}`
    console.log(msg);
}

sayHello();	// Hello, friend
sayHello('Mike');	// Hello, Mike

 

 

2. 지역변수 전역 변수

 

전역 변수 (global varable): 어디에서나 접근할 수 있는 변수

지역 변수 (local varable): 함수 내부에서만 접근할 수 있는 변수

 

 함수 내부에서 쓴 변수는 밖에서 호출할 수 없다.

 

function sayHello(name){
	let msg = `Hello`;
    if(name){
    mag += ', &{name}';
    }
    console.log(msg);
}

console.log(msg) // 오류

 

만약 밖에서도 쓰고 싶다면, 함수 밖에서 선언해줘야 한다.

 

let msg = `Hello`;

function sayHello(name){
    if(name){
    mag += ', &{name}';
    }
    console.log(msg);
}

console.log(msg) // Hello

 

밖에서 선언은 했지만, 함수 내에서 값을 바꿔서 내보내고 싶을 경우

 

let msg = `Hello`;	// 전역 변수 (global varable): 어디에서나 접근할 수 있는 변수
console.log('함수 호출 전')	//함수 호출 전
console.log(msg)	// Hello

function sayHello(name){
    if(name){
    mag += ', &{name}';
    }
console.log('함수 내부')
    console.log(msg);	// 지역 변수 (local varable) 함수 내부에서만 접근할 수 있는 변수
}

sayHello('Mike')	// 함수 내부 Hello, Mike
console.log('함수 호출 후')	// 함수 호출 후
console.log(msg) // Hello, Mike

위와 같이 Mike로 함수가 호출되면서 msg의 값까지 바뀌는 걸 볼 수 있다.

 

 

예시 1)

아래 예시에서는 let msg가 밖에도 있고 함수 안에도 있다.

그런데 지역 변수는 전역 변수에 영향을 미칠 수 없기 때문에, 밖에서 다시 concole.log로 나타냈을 때에도 처음에 선언한 walcome으로 나온다.

let msg = "welcome";	// 전역 변수
console.log(msg)	// welcome

function sayHello(name){
	let msg = "Hello"	// 지역 변수
    console.log(msg + ' ' + name);
}

sayHello('Mike');	// Hello Mike
console.log(msg);	// welcome

 

예시 2)

그러면 전역 변수로 밖에서 선언하면 함수 내에서는 선언 안 해도 사용할 수 있는 걸까?

그렇지 않다.

매개변수로 받은 값은 복사된 후 함수의 지역 변수가 된다. 따라서 함수 내에서 변수 선언은 해줘야 한다는 뜻이다.

let name = "Mike";

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

sayHello();	// undefined
sayHello('Jane');	// Jane

 

전역 변수가 많아질수록 관리가 힘들어지기 때문에 함수에 특화된 지역 변수를 사용하는 게 좋다.

 

 

3. return으로 값 반환

함수에 값을 반환하기 위해 return을 써야 한다.

 

예시 1)

add 함수를 result 변수로 선언하고 출력해보니 return 2 + 3의 값이 나왔다.

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

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

 

예시 2)

function showError(){
	alert('에러가 발생했습니다.');
    return;
    alert('이 코드는 절대 실행되지 않습니다.';
}
const result = showError();
console.log(result);	//undefined

 

4. 함수(function) TIP

 

(1) 한 번에 한 작업에 집중

하나의 함수가 여러 작업을 집중해야 되면 더 잘게 나눠 쓰는 것이 좋다.

 

(2) 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

showError // 에러를 보여줌

getName // 이름을 얻어옴'

createUserData // 유저 데이터 생성

checkLogin // 로그인 여부 체크

 

 

참고자료

코딩앙마 - 자바스크립트 기초 강좌 : 100분 완성(https://youtu.be/KF6t61yuPCY)