[JavaScript] TS를 위한 자바스크립트 문법

알아야 할 JS문법

템플릿 문자열

• 백틱 (`)으로 문자열을 정의

    const name = "geoncoding";
    const greet = `hello, ${name}`;
      
    // 단, name과 같은 변수명은 지양한다.
  

---

화살표 함수

• =>로 함수 정의

    const sum = (a, b) => {
      return a + b;
    };
      
    const sum = (a, b) => a + b;
    // 이와같이 한줄로도 작성할 수 있다.
  

---

구조 분해 할당(비구조화 할당)

• 미리 분할해서 값을 명시함.

1. 배열 구조 분해 할당

    const [a, b, c] = ["apple", "banana", "orange"];
    console.log(a);
    console.log(b);
    console.log(c);
       
    const [a, ...spread] = ["apple", "banana", "orange"];
    console.log(a);       // 'apple'
    console.log(spread);  // ['banana', 'orange']
   

2. 객체 구조 분해 할당
   주의사항: 구조 분해시, 키와 같은 이름으로 구조 분해 할당을 해야 함!

    const { animalName, animalType, animalAge, animalGender } = {
      animalName: "까미",
      animalType: "강아지",
      animalAge: 10,
      animalGender: "male",
    };
    console.log(animalName);
    console.log(animalType);
    console.log(animalAge);
    console.log(animalGender);
       
    const {
      animalName: aname, // 다른 이름으로 할당시, 다음과 같이 사용!
      animalType,
      animalAge,
      animalGender,
    } = {
      animalName: "까미",
      animalType: "강아지",
      animalAge: 10,
      animalGender: "male",
    };
    console.log(aname);
    console.log(animalType);
    console.log(animalAge);
    console.log(animalGender); 
   

---

계산된 속성

• 객체의 키를 변수로 치환하여 받음.

    const key = "name";
    const user = {
      [key]: "jaegeon",
    };
    console.log(user.name);
  

---

Spread 연산자

• ... 연산자를 활용하여, 나머지의 값들을 한번에 받아온다.

    const [red, ...restColors] = ["red", "blue", "green"];
    console.log(red);        // 'red'
    console.log(restColors); // ['blue', 'green']
      
    const { animalName, ...restProperties } = {
      animalName: "까미",
      animalType: "강아지",
      animalAge: 10,
      animalGender: "male",
    };
    console.log(animalName);
    console.log(restProperties);
  

---

얕은 복사

• ... 연산자를 활용하여, 원래 값을 지키고 복사 가능.
  주의사항: 한번 더 중첩해서 구조를 만드는 경우,
  해당 케이스에서의 얕은복사는 이뤄지지 않는다.

    const colors = ["red", "blue", "green"];
    const copyColors = colors;
    copyColors[0] = "pink";
    console.log(colors); // ["pink", "blue", "green"]
      
    const colors = ["red", "blue", "green"];
    const copyColors = [...colors];
    copyColors[0] = "pink";
    console.log(colors); // ["red", "blue", "green"]
      
    // 주의 사항: 더 중첩된 구조에서의 얕은 복사는 X
    const colors = ["red", "blue", "green", { special: "orange" }];
    const copyColors = [...colors];
    copyColors[0] = "pink";
    copyColors[3].special = "yellow";
    console.log(colors);     // [ 'red', 'blue', 'green', { special: 'yellow' } ]
    console.log(copyColors); // [ 'pink', 'blue', 'green', { special: 'yellow' } ]
  

• 따라서, 중첩의 케이스는 다음과 같이 사용!

    const colors = ["red", "blue", "green", { special: "orange" }];
    const copyColors = JSON.parse(JSON.stringify(colors));
    copyColors[0] = "pink";
    copyColors[3].special = "yellow";
    console.log(colors);     // [ 'red', 'blue', 'green', { special: 'orange' } ]
    console.log(copyColors); // [ 'pink', 'blue', 'green', { special: 'yellow' } ]
      
    // 최신 버전의 경우는 structuredClone()을 사용할 수 있음.
    const colors = ["red", "blue", "green", { special: "orange" }];
    const copyColors = structuredClone(colors);
    copyColors[0] = "pink";
    copyColors[3].special = "yellow";
    console.log(colors); // [ 'red', 'blue', 'green', { special: 'orange' } ]
    console.log(copyColors); // [ 'pink', 'blue', 'green', { special: 'yellow' } ]
  

---

[JS 특징] 동적 타이핑

• 할당과 동시에, 타입이 결정되는 특성

    let num = null;
    num = 10;
    num = "10"; // 각각이 어떤 값이 들어오냐에 따라, 타입이 달라짐.