JavaScript 03 : switch문 / 함수 기초

출처 : https://www.youtube.com/watch?v=KF6t61yuPCY

---

Javascript 이해하기

---

 

1. switch 문

 

if else 구문을 알면 몰라도 되지만, 선택지가 여러개일경우 코드가 깔끔해짐.

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" :
        console.log("사과는 100원입니다.");
        break
    case "오렌지" :
        console.log("오렌지는 200원입니다.");
        break
    case "수박" :
        console.log("수박은 300원입니다.");
        break
    
    // if의 else역할
    default :
    	console.log("그런 과일은 없습니다.");
}

 

2. 함수 정의

01 함수형태

function 함수명(매개변수){

    <<메인코드작성>>

}

// 매개변수가 있는경우
function sayHello(name){
    console.log(`Hello, ${name}`);
}

sayHello("Mike") 

결과 : Hello, Mike


// 매개변수가 없는경우 
function showError(){
    alert("에러가 발생했습니다. 다시시도해주세요.");
}
showError();

02 전역변수와 지역변수의 차이

msg를 지역변수로 지정

// msg를 지역변수로 지정
function sayHello(name){
    let msg = 'Hello';   ---> 함수내부에서 정의되었기 때문에 지역변수이다.
   
    // name을 입력하지않았을경우
    if(name){
        msg = `Hello, ${name}`
    }
 
    console.log(msg)
}

sayHello() // 결과 : Hello
sayHello("Mike") // 결과 : Hello Mike
console.log(msg) // 에러발생(msg가 지역변수이기때문)

msg를 전역변수로 지정

// msg를 전역변수로 지정
let msg = 'Hello';   
function sayHello(name){
    if(name){
        msg += `, ${name}`
    }
  
    console.log(msg)  
}
sayHello() // 결과 : Hello
sayHello("Mike") // 결과 : Hello Mike
console.log(msg) // 결과 : 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) // 결과 : "welcome" --> msg값이 전역변수에 지정된 값 그대로이다.

함수의 디폴트값을 지정

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

sayHello();
sayHello('Jane');

 

3. 함수이해하기

01 함수 선언문과 함수 표현식

 

함수선언문 

• 어디서든 호출 가능하다는 특징을 가진다.
• 따라서 함수 선언 전에 함수 호출해도 이용가능하다.
• 그 이유는 Javascript가 초기화 단계에서 모든 함수선언문을 읽어오기 때문

// 함수 선언문 

sayHello(); // 실행가능

function sayHello(){
    console.log('Hello');
}
 
sayHello(); // 실행가능

함수표현식

• 순차적으로만 실행가능하다.
• 코드에 도달해서야 함수를 생성함

// 함수표현식

sayHello(); // 실행불가

let sayHello = function(){
    console.log("Hello");
}

sayHello(); // 실행가능

02 화살표함수

형태는 함수표현식에서 변형된 것

• function 글자를 지운다.
• 매개변수는 그대로 둔다
• 매개변수 뒤에 => 를 추가한다.

// 화살표함수

let sayHello = () => {
    console.log("Hello");
}

sayHello(); // 실행가능

return 문이 있을경우
return 문은 소괄호로 바꾸면서 대체된다.

// 함수표현식
const add = function(num1,num2){
    const result = num1 + num2;
    return result;
}

// 화살표함수

<방법1>
const add = (num1,num2) => (
    num1+num2;
)

<방법2>
const add = (num1,num2) => num1+num2;