let, const 변수

 //console.log("sun");
      //변수선언
      let suuun;
      // console.log(suuun); //할당되지 않았으므로 => undefined
      suuun = "써니";
      //console.log(suuun); //할당되었으므로 => 써니
      //const suuun; //할당되지 않아서 에러가 발생
      const suuun = "써니"; //선언과 동시에 할당을 해야함

      //let this = "뭘까?";  == 예약어는 변수로 쓸 수 없음
    </script>
    
     <h1>console창으로 확인해 보자!</h1>
    <div>
      <ol>
        <li>문자, $, _를 사용하여 변수명을 생성</li>
        <li>공백과 대소문자를 구분</li>
        <li>
          예약어(class, this, function, if, for, true , false, undefined, null
          등등)은 변수명으로 사용 불가
        </li>
      </ol>
    </div>
    <pre>
    *변수
    let - 선언과 할당이 가능함 / 값이 변하는 원시형 타입을 담음
    ex)
    let a;
    a = "써니";

    #const
    const(상수) - 변하지않는 수, 선언과 할당이 불가능함
    const a= "써니";  //선언과 동시에 할당 해야함;
    const test; ← 에러

    1.선언 시에 초기화를 하지 않으면 에러가 발생
    2.따라서 같은 값으로 정의할 수 없음!
    3.함수를 담을 수 있음 - 함수표현식
    4.상수 식별자의 구문은 변수 식별자와 같다.
    5. 문자, 밑줄이나 달러 기호 ($) 로 시작해야 하고 문자, 숫자나 밑줄을 포함할 수 있습니다.
    https://eblee-repo.tistory.com/37

    #자료형※
    [] - 배열
    {} - 객체
    () - 함수


    undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태입니다.
    null : 변수는 존재하나, null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태입니다.

    자바스크립트에서 숫자 1과 문자 '1'을 비교 할 때 == 연산자를 사용하면 true가 나오지만, 
    타입까지 엄격히 검사하는 === 연산자를 사용하면 false가 나오게 됩니다.


    #객체만들기
    const myCar = new Object(); //객체 생성
    myCar.make = "Ford";
    myCar.model = "Mustang";
    myCar.year = 1969;

    ↓아래 객체로 표기 //{} 사용하여 만듬

    const myCar = {
      make: 'Ford',
      model: 'Mustang',
      year: 1969
    };

    객체에 할당되지 않은 속성은undefined. (null이 아님)

    myCar.color; // undefined - myCar 변수는 존재하나 color의 값이 할당되지 않았기 때문

    ↓객체 속성은 대괄호 표기법(속성 접근자)을 사용해 접근(연관배열이라고 부름)

    myCar['make'] = 'Ford';
    myCar['model'] = 'Mustang';
    myCar['year'] = 1969;
    </pre>

#증감연산자

let a = 1;
console.log(a++);
console.log(a);
console.log(++a);
console.log(a);
/*
#전위 (++n)
연산자 ++가 피연산자 n보다 앞에 위치할 때를 전위라 하고 1증가된 값이 연산결과값이다.

#후위 (n++)
반대로 연산자 ++가 피연산자 n보다 뒤에 위치할 때를 후위라 하고 1증가하기 전 값이 연산결과값이다.
//https://codingadinga.tistory.com/11
*/

let b = 1;
console.log(b--);
console.log(b);
console.log(--b);
console.log(b);

#논리연산자

 let t_Boolean = true; //true 값을 가짐
      let f_Boolean = false;
      const a = "mi_suuun";
      //const a = "";

      console.log(t_Boolean);
      console.log(!t_Boolean); //not 부정연산자

      console.log(!f_Boolean, !t_Boolean);
      console.log(t_Boolean && f_Boolean, t_Boolean && t_Boolean);
      //and(그리고 연산자)
      //참,거짓을 비교할때 둘중하나라도 거짓이면 거짓 / 참참일때만 true 반환

      console.log(f_Boolean || t_Boolean, f_Boolean || f_Boolean);
      //or(또는 연산자)
      //참이 하나라도 있으면 참

      t_Boolean ? console.log("참") : console.log("거짓");

      if (t_Boolean) {
        console.log("참");
      } else {
        console.log("거짓");
      }
      a && console.log(a + "참"); //const a = "mi_suuun"; 실행
      a || console.log("거짓"); //const a = ""; 실행

      !a || console.log("거짓");

      /*
       #리액트에서 사용시
        const test = () => {
            return a ? <h2>meet u</h2> : <h2>back</h2>;
        };
        */

#작성법

 <div id="txt"></div>
txt.innerText = "이츠미"; //id라서 위의 변수가 생략가능
//console.log(txt);
txt.innerText = "이츠미" + +age + "살";
txt.innerText = `이츠미 ${age}살`;
//``안에 쓸때경우 그대로 찍히므로 변수를 ${변수} 로 기입가능

#스위치문

      /*
        switch문은 if문과 같이 조건 제어문에 속합니다.
        하지만 switch문은 if문처럼 조건식이 <,<=,>,>=와 같은 이상,이하,초과,미만같은 부등식이 사용될 수 없습니다.
        if문은 조건식이 true일 경우에 블록이 실행된다고 하면 switch문은 비교할 변수가 어떤값을 가지냐에 따라 실행문을 선택됩니다.
        오직 ==만 비교할 수 있는것인셈입니다. 그러므로 모든 switch문은 if문으로 바꿀수 있지만 if문에서 부등식이 사용된 경우에는 switch문으로 치환하실 수 없습니다.
    */
      let age = "아버지";

      switch (age) {
        case "아들":
          console.log("아들");
          break;
        case "아버지":
          console.log("아버지!");
          break;
        default:
          console.log("귀신");
      }

      /*
      if…else 문의 조건식이 반드시 불리언 값으로 평가되는 반면,
      switch 문의 표현식은 불리언 값보다는 문자열, 숫자 값인 경우가 많다.
      if…else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
      하지만 switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
      */
      /*
     //data == 확인할 JSON 데이터
    console.log(JSON.stringify(data));
    alert(JSON.stringify(data));
     */

# 비구조화 할당 (구조분해) 문법

이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다.

이전에 배웠던것을 복습해보자면, 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수있었죠?

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

그리고, 함수의 파라미터에서도 비구조화 할당을 할 수 있는것도 배웠습니다.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

그런데 여기서 만약 b 값이 주어지지 않았다고 가정해봅시다.

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

두번째 출력에서 undefined가 나타날 것입니다.

비구조화 할당시 기본값 설정

이러한 상황에 b 값에 기본 값을 주고 싶다면 이렇게 해줄 수 있습니다.

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

이는 꼭 함수의 파라미터에서만 할 수 있는 것은 아닙니다.

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

비구조화 할당시 이름 바꾸기

이번에는, 비구조화 할당을 하는 과정에서 선언 할 값의 이름을 바꾸는 방법을 알아보겠습니다.

예를 들어서 다음과 같은 코드가 있다고 가정해봅시다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

위 코드에서는 animal.name 값을 nickname 값에 담고 있는데요, 이름이 같다면 그냥 우리가 이전에 배웠던 대로 비구조화 할당을 쓰면 되는데 지금은 이름이 서로 다릅니다.

이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있습니다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);

위 코드는 'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미입니다.

배열 비구조화 할당

비구조화 할당은 객체에만 할 수 있는 것이 아닙니다. 배열에서 할 수 있어요.

예시 코드를 봅시다.

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용합니다.

객체 비구조화 할당과 마찬가지로, 기본값 지정이 가능합니다.

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법을 알아봅시다.

예를들어서 다음과 같은 객체가 있다고 가정해봅시다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

여기서, name, languages, value 값들을 밖으로 꺼내주고 싶다면 어떻게 해야 할까요? 이럴땐 두가지 해결 방법이 있는데요, 첫번째는 비구조화 할당 문법을 두번 사용하는 것입니다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

그런데 잠깐! 지금 extracted 객체를 선언 할 때 이런식으로 했는데요

const extracted = {
  name,
  languages,
  value
}

이 코드는 다음 코드와 똑같습니다.

const extracted = {
  name: name,
  languages: languages,
  value: value
}

만약에 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법입니다. 이 문법은 ES6 의 object-shorthand 문법이라고 부릅니다. (이름은 굳이 알아둘 필요는 없습니다..!)

다시 본론으로 돌아와서, 아까 deepObject 객체에서 names, languages, value 를 추출하는 과정에서 비구조화 할당을 두번 했었죠?

이번엔 두번째 방법, 한번에 모두 추출하는 방법을 알아보겠습니다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출 할 수 있답니다.