JavaScript란?

브라우저에서 사용하기 위해 개발된 언어
초기에는 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위해 사용됨
하지만 이제는 웹 브라우저에 국한 되지 않고 다양한 곳에서 사용중
nodejs를 통해 런타임을 통해 서버쪽에서도 JS를 실행할 수 있게 됨

NW.js, Electron 등의 도구를 사용하여 데스크탐 앱을 만들수도 있고
React-native, NativeScript 등의 도구를 사용하여 모바일 앱도 만들 수 있음

하드웨어도 nodejs를 통해 JS를 사용할 수 있기 때문에 IoT 진영에서도 사용 될 수 있음

변수와 상수

변수와 상수는 특정 이름에 특정 값을 담을 때 사용함

let value = 1;
console.log(value); // 1

변수

변수는 바뀔 수 있는 값을 말하며, 한번 값을 선언하고 재할당 할 수 있습니다.

let value = 1;
console.log(value); //1
value = 2;
console.log(value); //2

변수를 선언할 때는 let키워드를 사용함
주의할 점은 한번 선언하면 똑같은 이름으로 선언할 수 없음

• 예외로 다른 블록 범위 내에서는 똑같은 이름으로 사용할 수는 있음

// SyntaxError
let value = 1;
let value = 2;

var는 더이상 사용하지 말자

변수를 선언하는 또 다른 방법으로 var키워드가 있는데 현 모던 자바스크립트에서는 더 이상 사용하지 않음
let과의 차이점은 var는 같은 이름으로 여러번 선언할 수 있고 사용할 수 있는 범위가 다름

• IE9, IE10 같은 구형 브라우저에서는 let과 const를 사용할 수 없음
• Babel과 같은 도구를 사용하여 우아한 성능 저하법 적용가능

상수

상수는 한번 선언하고나면 값이 바뀌지 않는 값을 의미함
값이 고정적

const a = 1;

상수를 선언할 때는 const키워드를 사용함
상수를 선언하고 나면, 값을 바꿀 수 없음

// Error (read-only)
const a = 1;
a = 2

변수와 마찬가지로 한번 선언하면 똑같은 이름으로 선언할 수 없음

// SyntaxError
const a = 1;
const a = 2;

데이터 타입

숫자(Number)

let value = 1;

문자열(String)

let text = 'hello';
let name = '자바스크립트';

참/거짓(Boolean)

let good = true;
let loading = false;

null과 undefined

null은 내가 임의적으로 없다고, 고의적으로 설정하는 값
undefined는 내가 설정을 하지 않았기 때문에 존재하지 않는 값

null == 이 값이 없다!라고 선언할때 사용됨

const friend = null;

undefined == 아직 값이 설정되지 않음

let criminal;
console.log(criminal); // undefined

연산자

프로그래밍 언어에서 특정 연산을 하도록 하는 문자

let value = 1; // 변수 선언(초기화)
value = 2; // 여기서 =은 대입 연산자

산술 연산자

• + : 덧셈
• - : 뺄셈
• * : 곱셈
• / : 나눗셈

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

++는 특정 변수에 1을 바로 더해줌
++가 변수 이름 앞에 오는 것과 뒤에 오는 것에는 차이가 있음

let a = 1;
console.log(a++); // 1
console.log(++a); // 3

위의 코드에서 console.log(a++)는 1을 더하기 직전 값1을 보여주고
console.log(++a)는 1을 더한 다음의 값3을 보여준다는 차이가 있음

대입 연산자

대입 연산자는 특정 값에 연산을 한 값을 바로 설정할 때 사용할 수 있는 연산자

let a = 1;

// 아래 두 코드는 같은 의미
a = a + 3;
a += 3;

논리 연산자

논리 연산자는, Boolean Type을 위한 연산자

• ! : NOT
• && : AND
• || : OR

NOT

NOT연산자는 true를 false로 false는 true로 바꿔줍니다

const a = !true
console.log(a) // false

AND

AND연산자는 양쪽의 값이 둘 다 true일때만 결과물이 true

const a = true && true;
console.log(a); // true

한쪽이라도 false일 경우 false

f = false && false
f = false && true
f = true && false

OR

OR연산자는 양쪽의 값 중 하나라도 true라면 결과물이 true
두 값이 모두 false일 때만 false

t = true || false
t = false || true
t = true || true

둘다 false여야 false

연산 순서

NOT -> AND -> OR

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

괄호로 감싸져 있을 때는 가장 마지막에 처리하기 때문에 맨 앞의 NOT은 나중에 처리

우선 괄호 안쪽의 NOT을 처리

!((true && false) || (true && false) || true);

AND 처리

!(false || false || true);

OR 처리 (좌측에서 우측 방향으로 처리)

!true;

결과값

false

비교 연산자

두 값을 비교할 때 사용

두 값이 일치하는 지 확인

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

===는 두 값이 일치하는지 확인해줌
일치한다면 true 일치하지 않는다면 false가 나타남

==과 ===의 차이점
==은 type검사를 하지 않고 값만 비교함
===은 type검사까지 해서 같은지 비교함

==예시

==을 사용할 시 실수할 확률이 높아지기 때문에 권장하지 않음

const a = 1;
const b = '1';
const equals = a == b;
console.log(equals) // true

const a = 0;
const b = false;
console.log(a == b); // true

const a = null;
const b = undefined;
console.log(a == b); // true

두 값이 일치하지 않는지 확인

const value = 'a' !== 'b'; // true

두 값이 일치하지 않는지 확인할 때는 !==를 사용함
!=은 타입 검사를 하지 않음

console.log(1 != '1'); // false(일치하다고 인식함)
console.log(1 !== '1'); // true

크고 작음 비교

두 값 중에서 무엇이 더 크고 작은지 비교하기 위해서는 아래의 연산자를 사용하면 됨

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

console.log(a < b); // true
console.log(b > a); // true
console.log(b >= c); // true
console.log(a <= c); // true
console.log(b < c); // false

문자열 붙이기

두 문자열을 붙일 때는 문자열에 +를 쓰면됨

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

조건문

조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있음

if문

가장 기본적인 조건문
~하다면 ~를 해라를 의미

아래의 예시처럼 하면 if ()안의 결과가 true값이기 때문에 조건문을 실행함

const a = 1;

if (a + 1 === 2) {
    console.log('a + 1이 2입니다.');
}

아래의 예시처럼 하면 if ()안의 결과가 false이기 때문에 조건문을 실행하지 않음

const a = 0;

if (a + 1 === 2) {
    console.log('a + 1이 2입니다.');
}

조건이 만족 됐을 때 실행시킬 코드가 { }로 감싸져 있는데 이를 코드 블록이라고 함
let과 const는 같은이름으로 재선언 할 수 없지만 코드 블록이 달라질 경우 재선언 가능

const a = 1;

if (true) {
    const a = 2;
    console.log('if문 안의 a 값은 ' + a); // 2
}
console.log('if문 밖의 a 값은 ' + a); // 1

if-else문

~하다면 ~하고, 그렇지 않다면 ~해라

const a = 10;

if (a > 15) {
    console.log('a가 15보다 큽니다.');
} else {
    console.log('a가 15보다 작습니다.'); // 해당 라인이 실행됨
}

if-else if문

if-else if문은 여러 조건에 따라 다른 작업을 해야할 때 사용함

const a = 10;

if (a === 5) {
    console.log('5입니다!');
} else if (a === 10) {
    console.log('10입니다!');
} else {
    console.log('5도 아니고 10도 아닙니다.');
}

switch/case문

switch/case문은 특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용함
default는 값이 우리가 case로 준비하지 않은 값일 경우를 의미

const device = 'iphone';

switch (device) {
    case 'iphone':
        console.log('아이폰!');
        break;
    case 'ipad':
        console.log('아이패드!');
        break;
    case 'galaxy note':
        console.log('갤럭시 노트!');
        break;
    default:
        console.log('모르겠네요..');
}

함수

함수는 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능

예시를 위해 아래 코드를 함수로 제작

const a = 1;
const b = 2;
const sum = a + b;

함수 예시

function add(a, b) {
    return a + b;
}

const sum = add(1, 2);
console.log(sum); // 3

함수를 만들 때는 function키워드를 사용하며, 함수에서 어떤 값을 받아올지 정해주는데
이를 파라미터(매개변수)라고 함
함수 내부에서 return키워드를 사용하여 함수가 반환하는 값을 설정할 수 있음
return을 하게되면 함수가 끝남

function add(a, b) {
    return a + b;
    console.log("return 밑으로는 호출이 되지 않습니다.") // 해당 라인은 호출되지 않음
}

const sum = add(1, 2);
console.log(sum); // 3

화살표 함수

함수를 선언하는 방식 중 또 다른 방법인 화살표 함수 문법

const add = (a, b) => {
    return a + b;
};

console.log(add(1, 2));