[js]자바스크립트 기본편 - switch, 함수, 함수 표현식, 화살표 함수

자바스크립트 기본

switch

:케이스가 다양할 경우 보다 간결하게 사용 가능

switch(평가){
	case A :
   	//A일때 코드
    case B :
    //B일때 코드
    ...
}

위의 코드는 아래의 if문과 동일

if(평가==A){
//A일때 코드
}else if(평가==B){
//B일때 코드
}

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

switch(fruit){
 case '사과' :
	console.log('100뭔 입니다.');
    break;
 case '바나나' :
	console.log('200뭔 입니다.');
    break;
 case '키위' :
	console.log('300뭔 입니다.');
    break;
 case '멜론' :
 case '수박' :
	console.log('500뭔 입니다.');
    break;
 default :
 	console.log('그런 과일은 없습니다.');
 }

함수(function)

//매개변수 없는 함수 만들기
function showError(){
	alert('에러발생. 다시 시도 하세요.');
}
showError();

//매개변수 있는 함수 만들기
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}`; //msg += ','+ name;으로 사용 가능
    }
    console.log(msg);
}
sayHello(); //매개변수 적지 않아서 undefined로 인식
→"Hello" 출력

• 전역변수(global varable) : 함수 내부 외부 모두 접근 가능
• 지역변수(local varable) : 함수 내부에서만 접근 가능

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

function sayHello(name){
	let msg = "Hello" //지역변수
    console.log(msg+' '+name); //"Hello Mike"로 출력
}
sayHello('Mike');
console.log(msg) //"welcome"으로 출력

→ 함수 외부와 내부에서 let으로 동일한 변수명으로 선언 할 수 있고, 서로 간섭 받지 않음

리턴(return)으로 값 반환

function add(num1, num2){
	return num1 + num2;
}
const result = add(2,3);
console.log(result) //5 출력

//return문이 없거나 return만 있는 경우 //undefined 반환
function showError(){
	alert('에러가 발생했습니다.');
    //return; 
}
const result = showError();
console.log(result) //undefined 반환

함수 표현식

이름이 없는 함수를 만들고 변수를 선언해서 함수를 할당해줌

• 함수선언문 VS 함수표현식 : 호출할 수 있는 타이밍이 다름.
  사용방식, 실행방식, 동작방식 모두 동일

▶ 함수 표현식: 코드에 도달하면 생성

▶ 함수선언문 : 어디서든 호출가능

sayHello(); //위치가 다름

function sayHello(){
	console.log('Hello;);
}

이렇게 쓰나 

function sayHello(){
	console.log('Hello;);
}
sayHello(); //위치가 다름

이렇게 쓰나 동일하게 작동

자바스크립트는 위에서 아래로 한줄로 읽으면서 순차적으로 실행하고 즉시 결과를 반환하며, 이것을 인터프리터언어(Interpreted language)라고 함

그런데 어떻게 저 코드가 실행가능함?

• 자바스크립트 내부 알고리즘 때문!

• 자바스크립트는 실행전 초기화단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠

• 즉, 눈으로 봤을 때는 실행문이 위에 있지만, 함수를 사용할 수 있는 범위는 넓어짐

• 이를 호이스팅이라함. 코드위치가 실제로 올라가는 것은 아님

//함수 표현식
showError();

let showError = function(){
	console.log('error'); //에러! 사용전 선언 필요함
}

//함수 선언문
showError();

function showError(){
	console.log('error'); //"error" 출력됨
}

화살표 함수(arrow function)

: 함수를 간결하게 작성 가능

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

위와 같은 함수를 화살표 함수로 바꾸면 아래와 같음

let add = (num1, num2)=>( //인수 하나라면 괄호 생략 가능, 인수없다면 괄호 생략 불가능
	return num1 + num2; //return 생략 가능
)//리턴문이 한줄이라면 괄호() 생략 가능

showError();

function showError(){
	console.log('error'); //"error" 출력됨
}
//화살표 함수로 바꾸기
let showError = () => {
	console.log('error'); //"error" 출력됨
}

const sayHello = function(name) {
	const msg = `hello, ${name}';
    console.log(msg);
    
//화살표 함수로 바꾸기
const sayHello = (name) => {
	const msg = `hello, ${name}';
    console.log(msg);

const sayHello = function(name) {
	const msg = `hello, ${name}';
    console.log(msg);
    
//화살표 함수로 바꾸기
const sayHello = (name) => {
	const msg = `hello, ${name}';
    console.log(msg);

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

//화살표 함수로 바꾸기
const add = (num1, num2) => {
	return num1 + num2;  
};

혹은

const add = (num1, num2) => (
	num1 + num2;  
);

혹은

const add = (num1, num2) => num1 + num2;