🚀 오늘의 학습 목표
- 함수 이해
- function
- 전역변수/지역변수
- or, default value, return
11. 함수 (function)란?
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
❓ 함수는 왜 쓸까?
중복되는 코드도 줄어들고, 유지 보수가 쉬워지기 때문에 함수를 사용한다.
예를 들어, 정의한 함수가 이미 많은 곳에서 쓰여지고 있다고 할 때, 메시지를 바꾸고 싶다면 모든 곳을 수정할 필요 없이 함수 내부에서 메시지를 바꿔주면 누락하는 것 없이 쉽게 변경할 수 있다.
함수 선언식 :
function a () { }함수 표현식 :
const b = function () {};
const c = () => {};
11-1. 함수는 어떻게 작성할까?
11-1-1. 🛠️ 함수의 구성 요소
자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성 요소를 가진다.
function sayHello(name){
console.log(`HEllo, ${name}`);
}- function :
함수 - sayHello :
함수명 - name : 괄호 안에 쉼표(,)로 구분되는 함수의
매개변수(parameter) - {} : 중괄호({})로 둘러싸인 자바스크립트
실행문(함수의 실행 코드)
11-1-2. 함수 호출
sayHello('Mike');() 사이에는 인수 적는다.
정의된 함수는 프로그램 내에서 호출되어야 실행된다.
11-2. 함수 작성
11-2-1. 매개변수가 없는 함수
function showError(){
alert ('에러 발생');
}
showError();11-2-2. 매개변수가 있는 함수
function sayHello(name){
const msg = `hello~ ${name} welcome!`;
console.log(msg);
}
sayHello('uoah'); //"hello~ uoah welcome!"
sayHello('yeon'); //"hello~ yeon welcome!"
sayHello('uoah velog'); //"hello~ uoah velog welcome!"이렇게 함수를 만들어 놓으면 매개변수를 바꾸어 가면서 다양하게 대응이 가능하다.
만약, 로그인을 하지 않아 사용자의 이름을 모르면 어떻게 될까?
중괄호 {} 내부에 조건문으로 처리를 해 보자.
function sayHello(name){
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`;
}
console.log(msg);
}
sayHello(); // "Hello"
sayHello('uoah'); // "Hello, uoah"
sayHello('yeon'); // "Hello, yeon"
sayHello('uoah velog'); // "Hello, uoah velog"❓ 왜 매개 변수 없이 호출하면 Hello 만 뜰까?
function sayHello(name){ console.log(name); // undefined let msg = `Hello`; if(name){ msg = `Hello, ${name}`; } console.log(msg); // "Hello" }let msg 선언 이전에 name 을 console 로 찍어 보면
undefined가 나온다.
if문에서undefined는flase이기 때문에if문내부로 들어갈 수 없기 때문에if문밖의 console.log(msg); 가 실행된다.
위의 코드를 조금 더 간결하게 바꿔 보자.
function sayHello(name){
let msg = `Hello`;
if(name){
msg += `, ${name}`;
}
console.log(msg);
}
sayHello(); // "Hello"
sayHello('uoah'); // "Hello, uoah"
sayHello('yeon'); // "Hello, yeon"
sayHello('uoah velog'); // "Hello, uoah velog"11-3. 전역 변수, 지역 변수
| 전역 변수 | 지역 변수 |
|---|---|
| 어디에서나 접근 가능 | 함수 내부에서만 접근 가능 |
위의 예제를 다시 보자.
function sayHello(name){
let msg = `Hello`;
if(name){
msg += `, ${name}`;
}
console.log(msg);
}
sayHello();
sayHello('uoah');
sayHello('yeon');
sayHello('uoah velog');여기에서 msg 는 함수 밖에서 사용할 수 없다.
function sayHello(name){
console.log(name);
let msg = `Hello`;
if(name){
msg += `, ${name}`;
}
console.log(msg);
}
console.log(msg);
// Uncaught ReferenceError: msg is not defined (에러 발생)함수 내부에서만 사용할 수 있는 변수를 지역 변수 라고 한다.
만약, msg 를 외부에서도 사용하고 싶다면 함수 바깥으로 빼 줘야 한다.
let msg = `Hello`;
console.log('함수 호출 전');
console.log(msg); // "Hello"
function sayHello(name){
if(name){
msg += `, ${name}`;
}
console.log('함수 내부');
console.log(msg); // "Hello, uoah"
}
sayHello('uoah');
console.log('함수 호출 후');
console.log(msg); // "Hello, uoah"이렇게 입력하면 함수 밖에서도 접근 가능한 것을 알 수 있다.
전역변수와 지역 변수에 대해 더 알아 보자.
let msg = "welcome"; // 전역변수
console.log(msg); // "welcome"
function sayHello(name){
let msg = "Hello"; // 지역변수
console.log(msg + ' ' + name); // "hello uoah"
}
sayHello('uoah');
console.log(msg); // "welcome"다른 한 가지 예를 더 들어 보자.
let name = "uoah";
function sayHello(name){
console.log(name);
}
sayHello();
sayHello('yeon');
// undefined
// "yeon"첫번째 호출은 undefined,
두번째 호출은 "yeon" 이 나왔다.
❓ 왜 그럴까?
매개 변수로 받은 값은 복사된 후 함수의지역 변수가 된다.
전체 서비스에서 공통으로 바라봐야 하는 변수를 제외하고는지역 변수를 쓰는 습관을 들이는 게 좋다.
전역 변수가 많아질 경우 관리가 힘들어지기 때문이다.
함수의 특화된지역 변수를 가급적 사용하도록 하자.
11-4. 함수 활용 (OR, default value, return)
11-4-1. || OR
function sayHello(name) {
let newName = name || 'friend';
let msg = `hello, ${newName}`;
console.log(msg);
}
sayHello(); // "hello, friend"
sayHello('uoah'); // "hello, uoah"인자가 없을 경우 name 은 undifined 로 friend 를 불러온다.
11-4-2. default value
default (기본) 값을 넣으면 더욱 간단하게 코드를 짤 수 있다.
name 의 default 값을 'friend' 를 넣어 name 없을 때만 할당될 수 있도록 한다.
function sayHello(name = 'friend') {
let msg = `hello, ${name}`;
console.log(msg);
}
sayHello();
sayHello('uoah');11-4-3. return 으로 값 반환
return 은 오른쪽에 있는 값을 반환한다.
function add(num1, num2){
return num1 + num2;
}
const result = add(2,3);
console.log(result); // 5return이 없는 함수도 항상 undefined 를 반환한다.
function showError(){
alert('에러발생');
}
const result = showError();
console.log(result); // undefinedreturn 만 있는 경우에도 undefined 를 반환한다.
function showError(){
alert('에러발생');
return;
}
const result = showError();
console.log(result); // undefinedreturn이 있으면 그 즉시 오른쪽에 있는 값을 반환하고 종료된다.
그래서 함수를 종료하는 목적으로도 사용된다.
✅ 함수 (function) tip
- 한 번에 한 작업에 집중
- 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
