[부스트코스] 웹 프로그래밍 FE: JavaScript 1 변수-연산자-타입

벌써 2. DB 연결 웹 앱 파트에 들어가면서 아래 학습 목표들에 대한 내용을 배우게 되는데 오늘은 그 중 JavaScript에 대하여 알아보겠습니다.

학습 목표

1. JavaScript의 기본문법을 이해한다.
2. DOM, Browser Event, Ajax이 각각 무엇인지 이해하고, 이를 활용해 웹화면을 제어할 수 있다.
3. JSP의 라이프사이클을 이해하고 redirect & forward 와 scope를 이해하고 사용할 수 있다. 
4. JSTL과 EL을 사용할 수 있다. 
5. 데이터베이스를 설치하고 간단한 SQL을 사용할 수 있다. 
6. Maven을 이해하고 Maven을 이용한 웹 어플리케이션을 작성할 수 있다. 
7. JDBC 프로그래밍을 할 수 있다. 
8. Web API를 이해한다. 

https://www.edwith.org/boostcourse-web/lecture/16693/

[LECTURE] 1) 자바스크립트 변수-연산자-타입 : edwith

 

1) 자바스크립트 변수-연산자-타입

학습 목표

1. 자바스크립트 변수 선언, 연산자 사용, Type을 이해한다.

핵심 개념

• 변수선언
• 연산자
• Type 종류
• Type 확인 방법

변수

변수는 var, let, const 로 선언할 수 있습니다. 어떤 것을 사용하는가에 의해서 scope, 즉 변수의 유효범위가 달라집니다. ES6이전까지는 var를 사용해서 변수를 선언할 수 있습니다.

• function-scoped : 함수 단위로 범위 지정
  👉 var
• block-scoped : 대괄호({}) 단위로 범위 지정
  👉 let, const

var과 비교하여 let과 const의 이점은 '변수 재선언 불가능'입니다.

let과 const의 차이는 '재할당여부'입니다. let은 변수에 재할당이 가능하지만, const는 변수 재선언, 재할당 모두 불가능합니다.

참고 사이트

javascript var, let, const 차이점

 

연산자

• 산술연산자
  👉 +, - *, /, %
• 문자열연산자
• 증감연산자
  👉 ++, --
• 대입연산자
  👉 =, +=, -=, /=, *=, %=
• 논리연산자
  👉 &&, ||, !
• 삼항연산자
  👉 (조건 ? 참 : 거짓)
• 비교연산자
  👉 ==, ===, !=, >, <, >=, <=

OR 연산자(||)는
데이터 선언할때 유용하게 활용 가능합니다. 아래의 경우에는 name이라는 변수가 선언되었기 때문에 이미 오른쪽 인자를 보기도 전에 true 판정이 나서 result변수에 name의 값인 "crong"을 저장하게 됩니다.

const name = "crong";
const result = name || "codesquad";

== 비교연산자는
자바스크립트가 암묵적으로 타입을 바꿔서 비교하기 때문에 타입까지 비교하려면 === 비교연산자를 습관적으로 쓰는 것이 좋습니다.

자바스크립트의 Type

• 종류
• 확인 방법
  👉 typeof(), toString.call()

typeof는 변수의 데이터 타입을 반환하는 연산자입니다.

반환되는 값은 다음과 같습니다.

• undefined : 변수가 정의되지 않거나 값이 없을 때
• number : 데이터 타입이 수일 때
• string : 데이터 타입이 문자열일 때
• boolean : 데이터 타입이 불리언일 때
• object : 데이터 타입이 함수, 배열 등 객체일 때
• function : 변수의 값이 함수일 때
• symbol : 데이터 타입이 심볼일 때
  
  

+ 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.

toString.call()은 일반적인 모든 자바스크립트 타입을 확인해주는 방법 중 하나입니다.

https://poiemaweb.com/es6-symbol

Symbol | PoiemaWeb

 

[Quiz]
퀴즈! 이것의 결과는 무엇일까요?
> var result = false && true;

false!! 👈답을 보려면 드래그

해설

이 코드에서 알 수 있듯이 &&연산자는 모든 값이 true인지를 확인하지만, 첫번째가 이미 false라면 그 이후의 값은 확인할 필요가 없습니다. 똑똑한 자바스크립트 엔진은 그렇게 동작합니다.

 

이렇게 자바스크립트의 변수, 연산자, 타입에 대하여 알아보았습니다. 다음시간에는 자바스크립트 비교, 반복, 문자열에대하여 알아보도록 하겠습니다.