* 함수 (function)

• 같거나 비슷한 동작을 여러번 한다면 그것을 한개로 만들어서 반복해주는게 편한데 함수는 이것을 가능하게 해준다.

브라우저의 내장함수인 alert, console, confirm 등도 이러한 함수에 포함된다.

funtion sayHello(name){
  console.log(`hello, ${name}`);
}
	일반적으로 이러한 형태로 작성을 하며 각각의 역활은 
    
    function : 함수
    sayhello : 함수명
    (name) : 매개변수 (없을수도있고,여러개일수도 있다.)  (name,age,adress) 처럼 가능
    {} : 함수의 실행코드

[매개변수가 없는 함수]

function showError(){
    alert('에러 발생, 다시시도 바람.')
}										///이렇게 작성을 완료한후

showError();							/// 이렇게 호출하면 함수안의 내용이 작동됨

• 이렇게 사용하면 같은 알람기능을 100군데에서 사용하단다면 그냥 showError(); 만 붙여녛으면 전부 작동하니 일일이 코드를 작성할 필요가 없다.
  또한 알람내용을 바꾸고싶으면 함수안의 실행코드만 수정하면 되니 유지보수또한 쉬운 장점이 있다.

[매개변수가 있는 함수]

function sayHello(name){
    const msg = `Hello, ${name}`;
    console.log(msg)
}								/// 이러한 형태로 작성 후


sayHello('mike'); 				/// 라고 호출을 하면 "Hello, mike" 가 실행된다.

함수는 반복적인 활동을 줄이기 위한 것이기 때문에

sayHello('mike'); 
sayHello('tmo'); 
sayHello('jane'); 
						///호출만 바꿔서 하면 사용할 수 있게 된다.
 

• sayHello() 의 형태로도 사용 가능한데 그럴려면 코드를 조금 수정해야 한다.

function sayHello(name){
    let msg = `Hello,`;
    if(name){
        msg = `sayHello, ${name}`;
    }
    console.log(msg);
}
sayHello() 
    
    		/// 여기서 let 으로 변수명을 바꾼 이유는 msg의 내용이 
            나중에 바뀔것이기때문에 const 를 사용할 수 없어서 바꾸게 되었다.
            
            /// sayHello() 로 실행을 하게 되면 출력값 : "Hello" 가 나오게된다.
            
            
            //// 실행내용을 좀더 설명하자면 
            
function sayHello(name){
    console.log(name)				/// 여기의 콘솔값은 undefined 
    									즉 값이 지정되지 않아서 if문 자체가 실행이 되질 않았으며
    
    let msg = `Hello,`;
    if(name){
        msg = `sayHello, ${name}`;
    }
    console.log(msg);				/// 그렇기 때문에 이쪽의 let= msg의 내용만 실행이 되어버린것
}
sayHello()             				/// 결과적으로 "Hello" 만 출력이 되는 구조다
                        

• 위쪽의 코드를 좀더 단순하게 바꿀수도 있는데

  function sayHello(name){
     let msg = `Hello,`;
     if(name){
         msg += name;		/// name의 값을 msg 에 더해주겠다 즉 더해서 보내겠다의 의미
     }
     console.log(msg);
  }
  sayHello() 					///출력값1 : "Hello"
  sayHello(Mike) 					///출력값2 : "HelloMike"
  
  								/// 각가의 콘솔값은 이렇게 나온다.
                                 
  여기서 출력값2 가 단어가 너무 붙어 나오는게 신경쓰이면                               
  		msg += ', 'name;			/// 이렇게 바꾸면 Hello, Mike"  가 출력된다.
         
         msg += `, ${name}` ;		/// 혹은 이렇게 백틱으로 사용해도 된다.
  

* 추가적으로 이 함수안의 ler msg 는 이 함수안에서만 선언된 변수기 때문에 이 함수 밖에서는 사용할 수 없다. 이런것을 지역변수 라고 한다ㅏ.

let msg = `Hello,`;				//// 만약 이 변수를 사용하고 싶다면 함수 바깥으로 꺼내면 된다.


function sayHello(name){
    
    if(name){
        msg += name;		
    }
    console.log(msg);
}
sayHello() 					
sayHello(Mike) 

• 좀더 세밀하게 살펴보자면

let msg = `Hello,`;				
console.log('함수 호출 전')				///"함수 호출 전"  //호출전이라서 Hello가 나왔고
console.log('msg)						/// "Hello"

function sayHello(name){
    
    if(name){
        msg += name;		
    }
    console.log('함수 내부')			///"함수 내부"			// 내부에서 이미 바껴서 이 값이 나왔고
    console.log(msg);					/// "Hello, Mike"
}

sayHello(Mike);
console.log('함수 호출 후')			///"함수 호출 후"		///바뀐채로 저장이 되서 밖에서 호출해도 동일
console.log('msg')					///"Hello, Mike"

* 지금처럼 let msg 는 함수 내부든 외부든 접근할수 있는게 변수가 전역 변수 라고 한다.

전역 변수와 지역변수

let msg = "welcome"

function sayHello(name){
    let msg = "Hello"
    console.log(msg + ' ' + name)
}

sayHello('Mike');			/// 출력값 : "Hello Mike"

------



let msg = "welcome"
console.log(msg)			/// 출력값 : "welcome"

function sayHello(name){
    let msg = "Hello"
    console.log(msg + ' ' + name)
}

sayHello('Mike');			/// 출력값 : "Hello Mike"
console.log(msg)

let name = "Mike";

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

sayHello();						///출력값1 : undefines
sayHello(jane);					///출력값2 : jane

• 매개변수 받은 값은 복사된 후 함수의 지역변수 값이 된다. 즉 출력값 1에 저장된 name 즉 결과값 Mike 는 함수 sayHello 안에서만 유효하기 때문에 undefines 가 나오게 된것이다.

그래서 전체 서비스에서 공통으로 바라봐야하는 부분을 제외하고는 지역변수를 쓰는 습관이 좋다
전역변수가 많아지면 관리가 힘들어지기 때문

[OR 연산자를 넣은 함수식]

function sayHello(name){
    let newName = name || 'friend'	///출1 : 매개변수가 없기 때문에 name은 false or 연산자로 friend 
   	let msg +=`Hello, ${newName}`
    console.log(msg)
}

sayHello();				///출력값1 : "Hello, friend" // 매개변수가 없기 때문에 or 연산자로 프렌드 출력 
sayHello('jane');		///출력값2 : "Hello, jane"	// 매개변수에 jane 넣어줘서 제인 헬로가 나옴

[형태를 좀더 간단하게 사용한 함수식]

function sayHello(name = 'friend'){		/// 이 name 의 디폴스 값은 name 값을 지정해주지 않을때만 나옴
    let msg +=`Hello, ${name}`
    console.log(msg)
}

sayHello();				///출력값1 : "Hello, friend"
sayHello('jane');		///출력값2 : "Hello, jane"

* Return 으로 값 반환

function add(num1, num2){		/// 순서2	여기에 num1,2 를 만들어주엇으니 여기에 2,3 이 들어가고
    return num1 + num2 ;		/// 순서3	2,3을 넣고 + 해준 값을 리턴 반환하는		
}

const result = add(2,3)			/// 순서1	2,3 이라는 매개변수안에 숫자를 넣어주면
									순서4	반환된 값이 여기 result 에 담기는것
console.log(result)				/// 출력값 : 5```
코드를 입력하세요

function showError(){
    alert('에러 발생. ');
    return;								/// 지금 처럼 return 만 사용시 리턴 오른쪽 값만 console에 띄움
    alert('이 알럿은 절대 실행되지 않음')
}
const result = showError();
console.log(result);
						//출력값 : alert '에러발생' 창만 띄우고 undefined 가 나옴 
                        		 두번때 알럿이 발생안하는 이유는 리턴은 리턴까지만 출력되고 그 이후는 
                                 발생시키지 않음 그래서 break 용도로 사용되기도 한다.

[함수 정리]

• 한번에 한작업에 집중 (하나의 함수에 여러개를 하려면 함수를 더 잘게 쪼개서 사용하는 게 좋음 )
• 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
• showError // 에러를 보여줌
• getName // 이름을 얻어옴
• createUserData // 유저데이터 생성
• checkLogin // 로그인 여부 체크