<aside> 🚩

Goal: Javascript의 기초 문법을 이해할 수 있고, 동기 비동기에 대한 설명을 할 수 있다.

</aside>

[목차]

<aside> 💡

수업을 원활히 진행하기 위해서는 JS의 기본 문법을 이미 알고 있더라도 자신이 제대로 알고 있는지 확인하며 넘어가주세요!

</aside>

<aside> 🔥 소소한 구문 설탕과 실무에서 자주 사용되는 코드 패턴이 섞여있어요!

</aside>

01. Javascript 기초 문법 (1)

<aside> 💡 우리가 이미 0주차에 배운 내용을, 잠시 확인해주세요. 빠르게 훑어보고 넘어갈게요!

</aside>

1. 변수 선언, 대입 연산자

• 변수 선언 키워드: var, let, const

  • 키워드 우측에 변수의 이름을 작성합니다.
  • var 키워드는 존재한다는것만 이해하고 사용하지 않도록 하세요! 이에 대한 자세한 이유는 뒤에 나올 Hoisting과 같이 알려드립니다 😉
  • let 키워드는 한번 선언한 변수를 여러번 변경할 수 있어요!
  • const 키워드는 한번 선언한 변수의 값을 변경할 수 없어요!
  • 선언되지 않은 변수 이름을 사용하려고 하면 참조 에러가 발생하므로 주의하세요!

• 대입 연산자 키워드: =

  • 키워드 좌측에는 대입 할 변수를, 키워드 우측에는 대입 할 값을 작성합니다.

  <aside> 💡 += -= variable++ variable-- 와 같은 구문 설탕도 있습니다!

  </aside>

• 📝 REPL 시나리오

2. 비교 연산자

• ===
  • 양쪽에 위치한 값이 같은 경우 true로 평가되며, 다른 경우 false로 평가됩니다.
• !==
  • 양쪽에 위치한 값이 다른 경우 true로 평가되며, 다른 경우 true로 평가됩니다.
  • ! 가 값을 부정하는 Not의 의미로서 사용됩니다.
• > , <
  • 수학에서의 비교 기호와 똑같습니다.
  • > 는 좌측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • < 는 반대로 우측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.
• >= , <=
  • = 기호가 붙어 양 쪽의 값이 같은 경우에 true로 평가된다는 점이 위와 다릅니다.
  • >= 는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true로 평가되며, 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • <= 는 우측에 위치한 값이 더 크거나 좌측에 위치한 값과 같을 때에만 true로 평가되며, 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.
• == , !=
  • ==는 === 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • !=는 !== 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • 자바스크립트는 자동 형변환 기능을 가졌는데, 가볍게 보면 매우 편리한 기능이지만 알고보면 버그를 만들기 매우 쉬운 위험한 문법으로 받아들여야 합니다.
    • 자동 형변환이 적용되는 경우, 예시로 '10' == 10 의 결과가 true 로 평가됩니다. 숫자 자료형을 가진 값에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다고 여겨 '10' === '10' 처럼 동작한다고 이해하면 됩니다.
  • == != 두가지 모두 위와 같은 동작을 포함하며, 버그를 유발하기 쉬운 문법이므로 === !== 를 사용하도록 버릇들이는게 좋습니다!!