자바스크립트 기초 강좌 10- 함수(function)의 기초

함수(function);중복되는 구문을 반복할 때 간단하게 나타낼 수 있음.

function sayHello(name){                    

  함수        함수명  (매개변수)    → 매개변수는 없을수도 있고, 한 개 또는 두개 이상 일 수도 있다. (두 개 이상 = 쉼표로 구분)

   console.log(`Hello, ${name}`);        → 함수의 실행코드

}

sayHello('Mike');    → 함수명 뒤에 괄호를 붙여 호출 가능 (매개변수는 괄호 안에)

 

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

sayHello('Mike');        →"Hello, Mike"

function sayHello(name){
  let msg = `Hello`;       //변할 수 있기 때문에 let을 사용
  if(name){
    msg += ', ' + name; 
  }
  console.log(msg);
}

sayHello();    → "Hello"
sayHello('Mike');     →"Hello, Mike"

→ 여기서 변수 'msg'는 지역변수로 함수 내에서만 사용 가능한 함수다. 함수 밖에서는 사용불가!

let msg = 'Hello';  //전역 변수
console.log('함수 호출 전')     → "함수 호출 전"
console.log(msg)     → "Hello"

function sayHello(name){
  if(name){
    msg += `, ${name}`;
  }
console.log('함수 내부')  // 지역 변수        → "함수 내부"
  console.log(msg);        
}

sayHello('Mike');        → "Hello, Mike"
console.log('함수 호출 후')   → "함수 호출 후"

 

------------------------------------------------------------------------------------------------------------------------------------------------------

앞에서 let은 한 번 선언하면 뒤에서 중복할 시 오류가 발생한다고 했는데, 지역변수와 전역변수 사이에서는 서로 방해받지 않는다!

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

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

sayHello('Gangmi');  
console.log(msg)    //"welcome"

 

매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다. 가급적 지역변수를 사용하는 게 좋음.

let name = "Mike";

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

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

 

비교연산자 ||(OR) 사용

: 매개변수name이 없을시 → undefined → name은 false가 추출되므로 'friend'가 true로 반환되어 추출 .

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

sayHello();      //"Hello, friend"
sayHello('Jane');         //"Hello, Jane"


//default값 설정(변수name없을 때)
function sayHello(name = 'friend'){
  let msg = `Hello, ${name}`
  console.log(msg)
}

sayHello();      //"Hello, friend"
sayHello('Jane');         //"Hello, Jane"

 

return으로 값 반환

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

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

function showError(){
  alert('에러가 발생했습니다.');
}
const result = showError();
console.log(result);   //undefined 반환

 

함수(function)

• 한번에 한작업에 집중
• 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍:

       showError : 에러를 보여줌

       getName: 이름을 얻어옴

       createUserData: 유저데이터 생성

       checkLogin: 로그인 여부 체크