[JavaScript 기본] 조건문 / 함수 / 객체

📖 조건문

📍 if - else if - else 문

//if-else if-else
let country = "ko";

if (country === "ko") {
  console.log("한국");
} else if (country === "cn") {
  console.log("중국");
} else if (country === "ja") {
  console.log("일본");
} else {
  console.log("미 분류");
}

📍 switch 문

👉 주로 분류할 경우가 많을 때 사용.

//국가처럼 조건문이 많아지는 경우
switch (country) {
  case "ko":
    console.log("한국");
    break;
  case "cn":
    console.log("중국");
    break;
  case "ja":
    console.log("일본");
    break;
  case "uk":
    console.log("영국");
    break;
  default:
    console.log("미 분류");
    break;
}

📖 함수 / 객체 선언식

다른 언어에서의 함수 / 객체 선언과 같은 형식으로 진행된다. 하지만 차이점도 존재한다.

• 차이점

  1. 매개변수 사용시, 데이터형을 붙히지 않는다.

      function getArea(width, height) {
        let area = width \* height;
        console.log(area);
      } //함수 / 객체 선언식
     

  2. 함수에 리턴을 넣는다고 해도, 리턴 데이터형을 넣지 않는다.

      function getAreaByReturn(width, height) {
        let area = width * height;
        return area;
      }
     

  3. 전역 변수가 함수 / 객체 안에서 값이 조정되면, 전역 변수의 값이 변경된다.

      let count = 1;
     
      function cnt() {
        count++;
        return count;
      }
     
      console.log(cnt());
      console.log(cnt());
      console.log(cnt());
     
      >>>출력값
      2
      3
      4
     

📖 함수 / 객체 표현식 & 화살표 함수 / 객체

📍 함수 / 객체 표현식(무명 함수 / 객체)

• 무명 함수 / 객체 만드는 법

  let helloA = function () {
  return "안녕하세요";
  };
  
  const helloText = helloA();
  console.log(helloText);
  
  >>>출력값
  안녕하세요
  

  변수 이름이 함수 / 객체 이름인 것처럼 사용하면 된다.

• 차이점 (선언 vs 표현)

  • 함수 / 객체 선언식 함수 / 객체 함수가 선언된 위치보다 앞에서 해당 함수를 사용해도 정상 출력됨. 자바스크립트의 호이스팅 이라는 것 때문이다. 호이스팅이란 , 함수 / 객체 선언식 함수를 프로그램 실행 전 코드 최상단으로 올려서 읽는 것이다.
  • 함수 / 객체 표현식 함수 / 객체 이 함수의 경우는 호이스팅이 되지 않음.

• 화살표 함수 / 객체 만드는 법

  let helloC = () => {
    return "안녕하세요1";
  };
  let helloD = () => "안녕하세요2";
  
  const text1 = helloC();
  const text2 = helloD();
  console.log(text1);
  console.log(text2);
  

이 화살표 함수도 호이스팅 X

📖 콜백 함수

• 콜백 함수란? 다른 함수에 매개변수로 함수를 넘긴 것

• 사용 방법

  function checkMood(mood, goodCallback, badCallback) {
    if (mood === "good") {
      goodCallback();
    } else {
      badCallback();
    }
  }
  
  function sing() {
    console.log("ACTION :: SING");
  }
  
  function cry() {
    console.log("ACTION :: CRY");
  }
  
  checkMood("good", sing, cry);
  
  >>>출력값
  ACTION :: SING
  

  정의대로 checkMood 함수에 sing 과 cry 함수를 넘겨주었다. 간단하게 함수 / 객체 표현식을 사용한다고 생각하면 된다. 그렇게 되면 let goodCallback = sing이 되는 것이고 함수 / 객체 내에서 goodCallback 함수를 사용해주기 위해서는 goodCallback() 으로 사용을 해주면 된다.

📖 객체

• 생성 방법

  //생성자 방식
  let person2 = new Object();
  

  //🌟 객체 리터럴 방식
  let person1 = {
    /*객체가 갖고 있을 데이터*/
  };
  

  프로퍼티는 문자열, 숫자, true/false/undefined, 함수 / 객체, 배열 등 다양하게 올 수 있다.

  💡 예제

  let person = {
    //프로퍼티
    /*key : "value";*/
    key: "value",
    key1: 123,
    key2: true,
    key3: undefined,
    key4: [1, 2],
    key5: function () {},
  };
  

• 사용 방법

  1. 객체 전체 출력 console.log(person);

  2. 속성 출력 console.log(person.key1); console.log(person["key1"]);

     function getPropertyValue(key) {
       return profile[key];
     }
     
     console.log(getPropertyValue("name"));
     

  3. 속성 추가 - 객체.location = value; profile.location = "한국";
  4. 속성 수정 profile.name = "손수경B";
  5. 속성 삭제 delete profile.location; : 메모리 자체가 지워지는 것은 아니라서 권장 X profile.name = null; : 권장👍

  6. 속성 함수 / 객체 생성

      let profile = {
        name: "손수경",
        age: 22,
        birth: "0807",
        say: function () {
          console.log(`hi ${this.age}`);
        },
        intro: function () {
          return `안녕 나는 ${this.name} 이야`;
        },
      };
     
      profile.say();
      console.log(profile.intro());
     

     백틱 사용 가능.

  7. 속성 확인

      console.log(`name: ${"name" in profile}`);
     

  8. 번외 let -> const로 바꾼다면?
  • 객체 안의 속성을 바꾸면 에러 발생 X

  • 변수 자체를 바꾼다면 에러 발생 O

      person = {};
    

    이렇게 바꾼다면 에러가 발생한다.