[ JavaScript ] 자바스크립트 기본 ②

[ 조건문 ]

 

1. if문

 

let a = 3;

if( a > 7 ){
    console.log("1등");
}
else if( a > 4 ){
    console.log("2등");
}
else{
    console.log("꼴등");
}

 

2. switch문

 

let country = "ko";

switch(country){
    case "ko" : 
        console.log("한국");
        break;
    case "jp" : 
        console.log("일본");
        break;
    case "cn" : 
        console.log("중국");
        break;
    default :
        console.log("미분류");
}

 

* break를 사용하지 않는다면 조건에 일치하는 부분 밑으로 다 수행해야하는 코드로 인식되기 때문에 적절한 위치에 break문을 작성해줘야한다.

 

---

[ 함수 ]

 

함수 : 중복되는 동일한 동작의 코드를 하나로 묶은 것

 

// 함수 선언식 -> 함수 선언 방식의 함수 생성
function getArea(width, height){
    let area = width * height;
    return area;
}

let width = 10;
let height = 20;

// 함수 호출식
console.log("넓이 :", getArea(width,height)); // 넓이 : 200
console.log(getArea(15,20)); //300

 

* 함수내에 선언된 변수는 함수 외부에서 접근할 수 없다.

* 지역 변수 : 함수 내에 선언된 변수는 함수 밖으로 벗어날 수 없는 변수

   전역 변수 : 함수 외부에서 선언되어서 어디에서나 접근할 수 있는 변수

 

---

[ 함수 표현식과 화살표 함수 ] 

 

Non-Primitivie Data Type ( 비원시타입 ) : 한번에 여러 개의 값을 가질 수 있는 것

→ Object, array, Function

 

함수는 자바스크립트 안에서는 하나의 자료형 또는 값으로 분류되기 때문에 변수나 상수에 담아서 활용이 가능하다.

 

1. 함수 표현식 : 함수를 이름 없이 만들어서 변수에 담아 활용

 

함수를 변수에 담을 때는 함수의 이름을 명시해주지 않아도 된다.

 

let hello = function(){
    return "안녕";
} // 함수 표현식

console.log(hello); //[Function: hello]
console.log(hello()); //안녕

const helloText = hello();
console.log(helloText);

 

* 함수 표현식과 함수 선언식의 차이 → Hoisting

 

Hoisting : 함수 선언식으로 만들어진 함수들은 프로그램 실행 전에 코드의 최상단으로 끌어 올려진다.

 

Hoisting이 일어나기 때문에 함수 선언식의 함수들은 가장 최하위에 작성이 되더라도 정상적으로 작동이 된다.

반면에 함수 표현식은 Hoisting의 대상으로 해당되지 않기 때문에 함수 표현식을 실행하는 순서가 되었을 때 비로소

함수를 생성하게 된다. 즉, 함수 표현식은 해당 함수가 직접적으로 선언이 되기 전에는 접근이 불가능하다.

 

console.log(helloB()); //안녕B

let helloA = function(){
    return "안녕A";
} // 함수 표현식

function helloB(){
    return "안녕B"
} //함수 선언식

 

2. 화살표 함수

 

let helloA = () => {
    return "화살표 함수 1";
} // 함수 표현식

let helloB = () => "화살표 함수 2"; // 값만 리턴하면 되는 경우 사용 가능

console.log(helloA()); // 화살표 함수 1
console.log(helloB()); // 화살표 함수 2

 

화살표 함수 또한 Hoisting에 해당하지 않기 때문에 순서를 잘 고려해줘야한다.

 

---

[ 콜백 함수 ]

 

콜백 함수 : 함수의 매개 변수로 다른 함수를 넣어주는 것

 

콜백 파라미터를 받아서 조건에 따른 콜백 함수를 수행하도록 설정해주면 된다. 

 

function checkMood(mood, happyCallBack, badCallBack){
    if( mood === "happy"){
        happyCallBack();
    }else{
        badCallBack();
    }
}

function cry(){
    console.log("Action :: Cry");
}

function sing(){
    console.log("Action :: Sing");
}

function dance(){
    console.log("Action :: Dance");
}

checkMood("happy", dance, cry); // Action :: Dance

 

함수 표현식의 개념을 활용해서 함수 자체를 콜백 파라미터로 넣어주게 되면 함수가 값으로 들어가게 되고 콜백 함수가

호출된다. 

 

콜백 함수는 함수의 파라미터로 함수를 넘기는 것이다. 콜백 함수를 사용하면 유연하게 기능을 수행할 수 있다.