서비스를 만들다 보면 비슷한 동작들이 생기기 마련인데, 중복되는 코드를 하나로 만든 다음 재활용하는 게 좋음.
유지 보수가 편해지기 때문.
함수
function sayHello(name){
console.log(Hello, ${name});
}
sayHello('Mike');
function : 함수
sayHello : 함수명
name : 매개변수
함수명(sayHello) 뒤에 괄호를 붙여서 호출할 수 있다.
function showError(){
alert('에러가 발생했습니다. 다시 시도해주세요.')
}
showError();
-> 창이 띄워짐. 이미 100군데에서 사용하고 있는 코드일 경우, 문구 수정이 필요하면 한 줄만 고치면 되니
무지 편리함.
function sayHello(name){
const msg = Hello, ${name};
console.log(msg);
}
sayHello('Mike');
-> "Hello, Mike"
그런데 만약 사용자의 이름을 모를 경우에는?
function sayHello(name){
let msg = Hello;
if(name){
msg = Hello, ${name};
}
console.log(msg);
}
sayHello();
->매개변수 없이 호출할 경우 "Hello"만 뜬다.
function sayHello(name){
console.log(name)
let msg = Hello;
if(name){
msg = Hello, ${name};
}
console.log(msg);
}
sayHello();
->undefined "Hello"
-
두번째 줄에서 찍어준 이름이 undefined임.
if() 안에 undefined가 들어가면 false이므로 아랫줄의 msg 내부로 들어갈 수가 없다. 따라서 console.log(msg)하면 Hello라고 찍히는 것. -
const에서 let으로 바꾼 이유 : 메시지가 달라질 수 있기 때문.
const로 선언하는 습관을 들였다가 필요할 경우 let으로 바꾸는 게 좋음.
function sayHello(name){
let msg = Hello;
if(name){
msg += ', ' + name;
}
console.log(msg);
}
sayHello();
sayHello('Mike');
-> "Hello" "Hello, Mike"
-msg += name : msg에 name을 더해서 다시 msg에 넣어줌.
if(name){
msg += ', ' + name;
은
if(name){
msg += , ${name};
과 같다.
주의사항
-let은 함수(function) 밖에서 사용할 수 없음.
함수 안에서만 사용할 수 있는 변수를 지역변수라고 함.
만약
function sayHello(name){
let msg = 'Hello';
if(name){
msg += ', ' + name;
}
console.log(msg);
}
sayHello();
sayHello('Mike');
console.log(msg)
-> 함수 밖에서 msg를 사용하면 에러 뜸. 마지막 줄 msg를 찾지 못하기 때문.
그렇다면 msg를 함수 외부에서도 사용하고 싶다면? let을 함수 바깥으로 빼줘야 함.
let msg = 'Hello';
console.log('함수 호출 전')
console.log(msg)
function sayHello(name){
if(name){
msg += ', ' + name;
}
console.log('함수 내부')
console.log(msg);
}
sayHello('Mike');
console.log('함수 호출 후')
console.log(msg)
->
"함수 호출 전"
"Hello"
"함수 내부"
"Hello, Mike"
"함수 호출 후"
"Hello, Mike"
-
함수 내부에서 Hello Mike로 바뀐 변수가 다시 첫 줄의 msg에 저장되어 함수 호출 후에도 동일한 값을 가지게 됨.
함수 밖에서도 접근이 가능해지게 되는데, 이처럼 어디서나 접근 가능한 변수를 전역 변수(global variable)라고 함. <-> 지역변수(local variable) : 함수 내부에서만 접근 가능. -
한 번 let을 이용해 선언한 변수는 다시 let을 이용해 선언할 수 없다.
그렇다면 이렇게 전역 변수와 지역 변수로 구분되어 있다면?
let msg = "welcome"; //msg : 전역변수
console.log(msg)
function sayHello(name){
let msg = "Hello" //msg : 지역변수
console.log(msg + ' ' + name);
}
sayHello('Mike');
console.log(msg)
-> "welcome" "Hello Mike" "welcome"
Hello Mike는 함수를 호출한 것.
세번째 welcome은 전역변수를 호출한 것.
전역변수 msg와 지역변수 msg가 서로 간섭을 받지 않음.
let name = "Mike";
function sayHello(name){
console.log(name)
}
sayHello();
sayHello('Jane');
-> undefined "Jane"
매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
전체 서비스에서 공통으로 바라보는 변수를 제외하고는 지역변수로 쓰는 게 좋음.
전역변수가 많아지면 관리가 힘들어지기 때문.
function sayHello(name){
let newName = name || 'friend';
let msg = Hello, ${newName};
console.log(msg)
}
sayHello();
sayHello('Jane');
-> "Hello, friend" "Hello, Jane"
매개변수가 없으면 undefined가 되어 두번째 줄 name에서 false가 나옴.
따라서 or는 마지막 friend를 반환.
혹은 매개변수에 기본값(default)을 설정해두면 더 간단히 표현 가능
function sayHello(name = 'friend'){
let msg = Hello, ${Name};
console.log(msg)
}
sayHello();
sayHello('Jane');
-> "Hello, friend" "Hello, Jane"
default값은 name이 없을 때만 할당됨.
어떤 값을 반환하는 함수
function add(num1, num2){
return num1 + num2;
}
const result = add(2,3);
console.log(result)
-> 5
😅return을 함수 종료할 때 이외에는 왜 사용하는지 아직 잘 이해가 안감
function showError(){
alert('에러가 발생했습니다.');
}
const result = showError();
console.log(result);
->alert을 띄운 다음 undefined를 반환.
만약
function showError(){
alert('에러가 발생했습니다.');
return;
}
const result = showError();
console.log(result);
-> 이렇게 return만 있어도 undefined 반환. 함수를 종료하는 목적으로 사용하기도 함.
몇 가지 팁
- 한 번에 한 작업에 집중하는 것이 좋음.
하나의 함수가 여러 작업을 진행할 경우 잘게 나눌 것. - 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
showError // 에러를 보여줌
getName // 이름을 얻어옴
createUserData // 유저데이터 생성
checkLogin // 로그인 여부 체크
