[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 4회차 미션 - 26강 Javascript 변수, 연산자

Javascript란 무엇인가?

Javascript는 배우기 쉽고 진입장벽이 낮은 개발 코드이다. 90년대에 웹브라우저에서 UI를 동적으로 보여주기 위해 사용해왔다. 이제는 단순히 웹을 넘어서 다양하게 사용하고 있다. Node.js와 함께 서버쪽에서도 JS를 쓸 수 있고, 일렉트론이란 프레임 웍을 통해 데스크탑 앱도 만들 수 있고, 리액트 네이티브를 통해 모바일 앱도 만들 수 있다. JS는 나날이 계속 발전하고 있고 매년 마다 새로운 문법들도 나오고 있다.

Hello Javascript!

이번 자바스크립티의 강사님은 리액트로 유명한 벨로퍼트님이다. 블로그도 잘 되어 있어서 강의를 듣기 이전에도 종종 방문해서 도움 받곤 했었다. 이 블로그에 적은 내용보다 상세한 내용은 여기서 확인할 수 있다. 👉🏻강사 벨로퍼트님 블로그

먼저 웹브라우저를 켜보자. 개발자 도구에서 console을 켜면 쉽게 js를 사용해볼 수 있다. 아래와 같이 개발자 도구에서 쓰면 콘솔에서 “Hello Javascript”라고 나타난다.

console.log("Hello Javascript");

하지만 긴 코드를 작업하기엔 편리하진 않기 때문에 잘 만들어놓은 사이트를 이용해보자. codesandbox에 접속하고 Javascript중에서도 Vanila를 선택하면 어떤 라이브러리나 프레임워크도 끼지 않은 순수한 Javascript를 바로 사용할 수 있다.

변수

변수란 바뀔수 있는 수. 한번 값을 선언하고 나서도 다시 바꿀 수 있다.

let value = 1; //변수 선언.
console.log(value);
value = 2; //값이 변할 수 있음.
console.log(value);
var b = 1;

제일 밑에 선언한 var는 예전에 사용하던 변수다.(근데 나도 최근까지 var 썼었다.ㅎㅎ) let과는 쓸 수 있는 범위가 다른데 뒤에 다시 나온다고 한다. 이젠 더이상 쓰지 않는다.
하지만 ie9, 10에서는 let과 const를 쓸 수 없으므로 babel이란 도구를 사용해서 최신 js가 돌아가게끔 변환작업을 거친다.

상수

상수란 값이 고정적인 수. 한번 값을 선언하면 바꿀 수 없다.

const a = 1; //상수 선언.
console.log(a);

JS코딩 세미콜론과 따옴표

let text = "hello";
let text = "hello"
let text = 'hello'

위와 같이 작은 따옴표와 큰따옴표를 쓰는 것과 세미콜론을 뒤에 붙이고 안붙이고는 취향차이다. 모두 똑같이 동작한다.

boolean (참, 거짓)

let good = true;
let loading = false;

null과 undifined

let good = null;
let loading;

console.log(loading)

변수 안에 값이 빈 상태가 null 이다.
변수 안에 값이 설정되어 있지 않은 위의 loading같은 경우는 undefined가 뜬다. null은 보통 고의적으로 값이 없음을 선언할때 위와 같이 써주고, undefined는 우리가 변수값을 설정하지 않았을 때 콘솔에서 밷어내는 것 같다.

연산자

대입 연산자

let a = 1; //변수선언
a = 2; //대입 연산자

= 이 대입 연산자이다. 윗쪽은 변수가 있으므로 변수선언으로 보고 대입 연산자에 해당하지 않는다.

산술 연산자

let a = 1 + 2 - 3 * 4 / 2 ;
console.log(a);

이렇게 덧셈, 뺄셈, 곱셈, 나눗셈 네가지가 기본 연산자이다. 연산법칙으로 곱셈과 나눗셈을 먼저 하고 더하기 빼기를 나중에 하는데 코드샌드박스에서는 똑똑하게도 저장을 누르면 보기 쉽게 먼저 계산하는 곱셈쪽에 괄호를 쳐주며 자동완성 한다.

let b = 1;
console.log(b++) //더하기 전의 값
console.log(b) // b++의 결과값
------
console.log(++b); //더하고 난 뒤의 값

위와 같이 ++도 산술 연산자의 일부이다.
++는 변수에 1을 더해준다. 그런데 ++가 앞에 오느냐 뒤에 오느냐에 따라 위에서 처럼 결과 순서가 다르다.

b += 3; //b의 현재값에 3을 더해라.   
console.log(b)

+=은 더하고 난 뒤의 값을 반환한다.
++, += 처럼 --, -=도 가능하다.

논리 연산자

let value = true;
let value = false;

위에서 처럼 true, false값이 나오게끔 만드는 연산자가 논리연산자 이다.
논리연산자에는 총 세가지가 있다.

NOT ! AND && OR ||

const a = !false;
console.log(a);
//a는 true를 반환

먼저 NOT 이렇게 사용한다. 위처럼 불리언을 반전 시켜 준다.

const a = true && true;
console.log(a);
//a는 true를 반환

const a = false && false;
console.log(a);
//a는 false 반환

const a = false && true;
console.log(a);
//a는 false 반환

AND는 하나라도 false가 있으면 무조건 false. 양쪽 모두의 값이 true일때만 true를 반환한다.

const a = false || true;
console.log(a);
//a는 true를 반환

마지막으로 OR은 위와같이 둘 중 하나만 true여도 true를 반환한다.

const value = !(true && false || true && false || !false);
//!(true && false || true && false || true)
//!(false || false || true)
//!(false || true)
//!(true)
//false

이들에게도 연산법칙의 순서가 있는데 괄호 안부터, 앞쪽 부터 NOT ! > AND && > OR ||의 순서로 연산한다. 그 과정은 위와 같다.

비교연산자

두 값을 비교할 때 쓰는 연산자이다.

const a = 1;
const b = 1;
console.log(a === b);
//true 반환

부가적으로
==는 타입 상관없이 비교하고
===는 타입까지 비교해서 반환한다. 웬만하면 세개를 쓴다.
!==도 가능한데 둘이 같지 않아야 true를 반환한다.

const a = 10;
const b = 15;
const c = 15;

console.log(a < b);
//true a가 b보다 크다.

console.log(b > a);
//true b가 a보다 크다.

console.log(b >= a);
//true b가 a보다 크거나 같다.

크고 작음은 위와 같이 부등호로 나타낸다. 크거나 같다 할때 이퀄사인이 뒤에 온다는 것.

문자열 합치기

const a = `안녕`;
const b = `하세요`;
console.log(a + b);
//안녕하세요 반환

마치면서

오늘은 여기까지, 수강 모습은 아래에.. 시청 영상 26강 01~06까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp