JavaScript란?

• 웹 브라우저에서 동적인 UI(User Interface)를 구현하려고
  만들어진 프로토타입 기반 프로그래밍 언어
• 브라우저에서만 사용 하는 것을 넘어
  Node.js로 서버환경 에서도 사용가능
• HTML5, CSS3, JS를 알면
  Electron을 사용해 데스크탑 프로그램 개발 가능
• React Native(React.js 기반), NativeScript(Vue.js 기반)를
  사용하여 모바일 앱 개발 가능
• ECMAScript 기준을 따르는 자바스크립트가
  매년 업데이트 되면서 새로운 문법 및 기능들이 배포

변수와 상수 (Variable and Constant)

더 알아가기

모던 자바스크립트(ES6 이후)는
var를 더 이상 사용하지 않는 것이 바람직
(재선언이 가능해서 동일 명의 변수 선언시 코드가 꼬이는 이슈 발생)

IE9, IE10과 같은 익스플로러 구형 브라우저는 const, let을 지원하지 않으나,
Babel과 같은 트랜스 컴파일러를 활용하여 구형 브라우저 까지 지원가능하게 변환할 수 있음.

데이터 타입 (Data Type)

1. 숫자 (Number)

일반적인 정수나 실수

const ex1 = 1;
const ex2 = 1.234;

2. 문자열 (String)

'' 또는 ""로 감싸져 있는 문자열

const ex1 = '안녕하세요';
const ex2 = "hello world";

더 알아가기

작은 따옴표('')로 감싸거나 큰 따옴표로 감싸거나 ("") 차이는 없음
다만 문자열 내부에 따옴표를 입력하고 싶다면 상반되는 따옴표로 감싸거나
\ 를 사용해야함.

---

const ex1 = '안녕하세요 "jason"입니다';
const ex2 = "안녕하세요 'jaosn'입니다";
const ex3 = '안녕하세요 \'jason\'입니다';

3. 참/거짓 (Boolean)

true(참)과 false(거짓)

const ex1 = true;
const ex2 = false;

4. null, undefined

없거나 정의가 되지 않는

const ex1 = null;
const ex2 = undefined;

더 알아가기

둘 다 값이 없는 것을 의미하는 것은 맞나 차이점이 있음

• null : 없다고 고의적으로 설정하는 값 (있었는데? 아뇨 그냥 없어요;;)
• undefined : 설정하지 않았기 때문에 없는 값 (빈 깡통)

연산자 (Operators)

1. 대입 (=)

어떠한 값을 해당하는 변수에 '대입' 할때 사용

let ex1 = 1; // 해당 코드는 대입이 아닌 '변수 초기화'를 뜻함
ex1 = 1; // 1을 ex1이라는 변수에 대입

2. 산술 연산자(+, -, *, /)

사칙 연산처럼 사용

const ex1 = 1 + 2; // ex1의 값 : 3
const ex2 = 2 - 1; // ex2의 값 : 1
const ex3 = 3 * 1; // ex3의 값 : 3
const ex4 = 4 / 2; // ex4의 값 : 2

더 알아가기

증감 연산자(++, --)를 사용하면 편리하게 하나씩 더하거나 뺄 수 있음
위치에 따라 전위 연산자, 후위 연산자가 있고 차이점을 비교 했을 경우

• 전위 연산자 : 출력 전에 연산
• 후위 연산자 : 출력 후에 연산

---

let ex1 = 0; // 0으로 초기화
console.log(ex1++); // 후위 연산자로써 0 출력
console.log(++ex1); // 전위 연산자로써 2 출력
console.log(ex1--); // 후위 연산자로써 2 출력
console.log(--ex1); // 전위 연산자로써 0 출력

3. 대입 연산자 (+=, -=, *=, /=)

특정 값에 연산 한 값을 바로 설정할때 사용 함

let ex1 = 10;

ex1 += 1; // ex1 = ex1 + 1과 같은 의미 11이 출력 됨
ex1 -= 1; // ex1 = ex1 - 1과 같은 의미 10이 출력 됨
ex1 *= 2; // ex1 = ex * 2와 같은 의미 20이 출력 됨
ex1 /= 2; // ex1 = ex / 2와 같은 의미 10이 출력 됨

4. 논리 연산자 (!, &&, ||)

불리언(Boolean) 타입을 위한 연산자 중 하나 조건문에 사용할때 유용

NOT(!) : 반대로 바꿈 (true는 false로 false는 true로)
AND(&&) : 두 비교 값중 둘 다 true일때만 true를 출력
OR(||) : 두 비교 값중 둘 중 하나 이상이 true일때 true를 출력

const ex1 = true;
const ex2 = false;

console.log(!ex1); // false
console.log(!ex2); // true
console.log(ex1 && ex1); // true
console.log(ex1 && ex2); // false
console.log(ex1 || ex2); // true
console.log(ex2 || ex2); // false

5. 연산 순서

사칙 연산에서도 여러가지가 섞였을 경우 곱하기와 나누기를 먼저 하는 것 처럼
논리 연산자에도 괄호()로 묶여 있지 않을 경우 순서가 있음

1. NOT -> 2. AND -> 3. OR

true && true && !true || !false // 1. 1순위인 NOT을 우선적으로 처리
true && true && false || true // 2. 2순위인 AND를 처리
false || true // 3. 3순위인 OR을 처리
true // 4. 결과는 true

6. 비교 연산자 (===, !==, <, >, >=, <=)

두 값을 비교를 하여 true 또는 false를 반환

const ex1 = 10;
const ex2 = 10;
const ex3 = 20;

console.log(ex1 === ex2) // true
console.log(ex2 === ex3) // false
console.log(ex1 !== ex2) // false
console.log(ex2 !== ex3); // true
console.log(ex2 > ex3); // false
console.log(ex2 < ex3); // true
console.log(ex1 >= ex2); // true
console.log(ex2 <= ex3); // true

더 알아가기

비교 하는데 있어서 ==(동등 연산자), !=(부동등 연산자)도 사용을 할 수 있으나,
더 정확한 비교를 위해 ===(일치 연산자), !==(불일치 연산자) 사용을 추천

• == (동등 연산자) : 값이 같으면 true
• === (일치 연산자) : 값과 타입이 같으면 true
• != (부동등 연산자) : 값이 다르면 true
• !== (불일치 연산자) : 값과 타입이 다르면 true

---

const ex1 = 1;
const ex2 = '1';
// 1과 '1'을 비교했을때 1과 채워져 있는 문자열 자체는 truthy로 인식
// 즉, 값이 같다고 인식하기 때문에 true 출력
console.log(ex1 == ex2);
// 1과 '1'은 값이 같더라도 타입 자체가 다르기 때문에 false 출력
console.log(ex1 === ex2);
// 1과 '1'을 비교했을때 1과 채워져 있는 문자열 자체는 truthy로 인식
// 즉, 값이 같다고 인식하기 때문에 false 출력
console.log(ex1 != ex2);
// 1과 '1'은 값이 같더라도 타입 자체가 다르기 때문에 true 출력
console.log(ex1 !== ex2);

7. 문자열 붙이기

+로 두 문자열을 붙일 수 있음

const ex1 = '아이유';
const ex2 = '라일락';
console.log(ex1 + ex2); //아이유라일락

참고자료 : 벨로퍼트와 함께하는 모던 자바스크립트
잘못된 부분이나 오타가 있다면 댓글로 남겨주세요! 피드백은 언제나 환영입니다 🤗