0. JS 언어 특징

Javascript란? :
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 객체 기반의 스크립팅 언어 또는 프로그래밍 언어

1. 객체 지향 프로그래밍 지원
2. 동적 타이핑
3. 함수형 프로그래밍 지원
4. 비동기 처리
5. 클라이언트 측 및 서버 측 모두에서 사용 가능

1. 변수와 상수

변수의 정의와 필요성 :

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용

변수 5가지 주요 개념 :

변수 이름 : 저장된 값의 고유 이름

변수 값 : 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 행위

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어오는것

var / let / const
-var는 예전부터 사용
-let과 'const`는 ECMAScript 6(ES6)에서 새로 도입된 방법

변수 : var / let
상수 : 'const`

var

// var로 변수 선언
var myVar = "문자";
console.log(myVar); // "문자"

let

// let으로 변수 선언
let myLet = "문자";
console.log(myLet); // "문자"

const

// const로 상수 선언
const myConst = "문자";
console.log(myConst); // "문자"

• var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 X
  => 가장 마지막에 선언한 값으로 변수가 덮어씌워짐

• let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생O
  => const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

2-1. 데이터 타입

1. 숫자(Number)

1-1. 정수형 숫자(Integer)

let num1 = 1;
console.log(num1); // 1
console.log(typeof num1); // "number"

1-2. 실수형 숫자(Float)

let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

1-3. 지수형 숫자(Exponential)

지수(e) :

• JS에서 아주 긴 숫자를 사용해야 하는 경우 사용
  오른쪽에 있는 수만큼 10의 거듭제곱을 곱하는 의미
  (Ex. 2.5 x 10^5 => 2.5e5(2.5e5 * 10^5)
  

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

1-4 NaN(Not a Number)

NaN(Not a Number) :

• JS에서 숫자가 아님을 나타내는 값
  (EX. 수학적으로 정의되지 않는 계산 수행 /
  숫자가 아닌 값 => 숫자로 반환 시 발생)

let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"

1-5 Infinity(전역 객체의 속성(전역 범위의 변수) -> 무한대)

let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

2. 문자열(String)

문자열(String) :

• 문자의 나열
• 작은 따옴표('') / 큰 따옴표(")로 감싸서 표현

let name = '이름';
let message = "메시지";

2-1. 문자열 길이(length)

length

let str = "Hello, world!";
console.log(str.length); // 13

2-2. 문자열 결합(concatenation)

concatenation

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

2-3. 문자열 자르기(substr, slice)

substr

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"

slice

let str = "Hello, world!";
console.log(str.slice(7, 12)); // "world"

2-4. 문자열 검색(search)

search

let str = "Hello, world!";
console.log(str.search("world")); // 7

2-5. 문자열 대체(replace)

replace

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

2-6. 문자열 분할(split)

split

let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

3. 불리언(Boolean)

불리언(Boolean) :

• 참(true)과 거짓(false)을 나타내는 데이터 타입

참(true)

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

거짓(false)

let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // "boolean"

• 조건문(if, else, switch 등) / 논리 연산자(&&, ||, !)와 함께 많이 사용

let x = 10;
let y = 5;

if (x > y) {
  console.log("x은 Y보다 크다.");
} else {
  console.log("x는 y보다 작거나 같다.");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

=> 논리 연산자(&&, ||, !) 사용
= a와 b의 논리적인 AND(&&)와 OR(||) 연산을 수행 / , NOT(!) 연산을 수행

4. undefined

undefined :

• 값이 할당되지 않은 변수
• (개발자의 명시적인 표시 O = 변수 선언 후 값을 할당하지 않은 상태)

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

5. null

null :

• 값이 존재하지 않음 (null !== undefined)
• (개발자의 명시적인 표시 X = 변수 선언 후 빈 값을 할당한 상태)

let y = null;

6. 객체(Object)

객체(Object) :

• JS에선 매우 중요
• 속성과 메소드를 가지는 컨테이너
• 중괄호({})를 사용하여 객체를 생성

let person = { name: '이름', age: 20 };
person.name // '이름'
person.age // 20

7. 배열(Array)

배열(Array) :

• 여러 개의 데이터를 순서대로 저장하는 데이터 타입
• 대괄호([])를 사용하여 배열을 생성

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

2-2. 형 변환

1. 암시적 형 변환(implicit coercion)

암시적 형 변환 :

• Js에서 자동으로 수행되는 형 변환
• 일반적으로 연산자를 사용할 때 발생

[2]-1-1. 문자열 변환

console.log(1 + "2");   // "12"

console.log("1" + true);   // "1true"

console.log("1" + {});   // "1[object Object]"

console.log("1" + null);   // "1null"

console.log("1" + undefined);   // "1undefined"

=> 문자열과 다른 자료형이 연산자로 결합
= 다른 자료형을 문자열로 변환한 후 연산을 수행

[2]-1-2. 숫자 변환

console.log(1 - "2");   // -1

console.log("2" * "3");   // 6

console.log(4 + +"5");   // 9

=> 연산자를 사용할 때, 문자열 -> 숫자로 변환
= 빈 문자열("")이나 공백 문자열(" ") -> 0으로 변환

[2]-1-3. 불리언 변환

console.log(Boolean(0));   // false

console.log(Boolean(""));   // false

console.log(Boolean(null));   // false

console.log(Boolean(undefined));   // false

console.log(Boolean(NaN));   // false

console.log(Boolean("false"));   // true

console.log(Boolean({}));   // true

=> Boolean() 함수를 사용하여 불리언 값으로 변환
= 0, 빈 문자열(""), null, undefined, NaN -> false로 변환
= 그 외의 값 -> true로 변환

2. 명시적 형 변환(explicit coercion)

명시적 형 변환 :
개발자가 직접 -> 자료형을 변환하는 것

[2]-2-1. 문자열 변환

console.log(String(123));       // "123"

console.log(String(true));      // "true"

console.log(String(false));     // "false"

console.log(String(null));      // "null"

console.log(String(undefined)); // "undefined"

console.log(String({}));        // "[object Object]"

=> String() 함수를 사용 다른 자료형 -> 문자열로 변환

[2]-2-2. 숫자 변환

console.log(Number("123"));   // 123

console.log(Number(""));      // 0

console.log(Number("  "));    // 0

console.log(Number(true));    // 1

console.log(Number(false));   // 0

=> Number() 함수를 사용 다른 자료형 -> 숫자로 변환

3. 연산자

3-1. 산술 연산자(arithmetic operators)

[1]-1. 더하기 연산자(+)

console.log(2 + 3);       // 5

console.log("2" + "3");   // "23"

console.log("2" + 3);     // "23"

console.log(2 + "3");     // "23"

=> 숫자나 문자열을 더할 수 있음
= 숫자와 문자열을 함께 사용할 경우 -> 자동으로 문자열로 변환

[1]-2. 빼기 연산자(-)

console.log(5 - 2);       // 3

console.log("5" - "2");   // 3

console.log("5" - 2);     // 3

console.log(5 - "2");     // 3

console.log("five" - 2);  // NaN

=> 빼기 연산자(-)를 사용하여 숫자를 뺄 수 있음
= 숫자와 문자열을 함께 사용할 경우 -> 자동으로 숫자로 변환

[1]-3. 곱하기 연산자(*)

console.log(2 * 3);       // 6

console.log("2" * "3");   // 6

console.log("2" * 3);     // 6

console.log(2 * "3");     // 6

console.log("two" * 3);   // NaN

=> 곱하기 연산자(*)를 사용하여 숫자를 곱할 수 있음
= 숫자와 문자열을 함께 사용할 경우 -> 자동으로 숫자로 변환

[1]-4. 나누기 연산자(/)

console.log(6 / 3);       // 2

console.log("6" / "3");   // 2

console.log("6" / 3);     // 2

console.log(6 / "3");     // 2

console.log("six" / 3);   // NaN

=> 나누기 연산자(/)를 사용하여 숫자를 곱할 수 있음
= 숫자와 문자열을 함께 사용할 경우 -> 자동으로 숫자로 변환

[1]-5. 나머지 연산자(%)

console.log(7 % 3);       // 1

console.log("7" % "3");   // 1

console.log("7" % 3);     // 1

console.log(7 % "3");     // 1

console.log("seven" % 3); // NaN

=> 나머지 연산자(%)를 사용하여 나눗셈(/)의 나머지를 구할 수 있음
= 숫자와 문자열을 함께 사용할 경우 -> 자동으로 숫자로 변환

3-2. 할당 연산자(assignment operators)

[2]-1. 등호 연산자(=)

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

=> 등호 연산자(=) 사용 -> 변수에 값 할당

[2]-2. 더하기 등호 연산자(+=)

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15

=> 더하기 등호 연산자(+=)를 사용 -> 변수에 값을 더할 수 있음

[2]-3. 빼기 등호 연산자(-=)

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

=> 빼기 등호 연산자(-=)를 사용 -> 변수에서 값을 뺄 수 있음

[2]-5. 나누기 등호 연산자(/=)

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

=> 나누기 등호 연산자를 사용 -> 변수에서 값을 나눌 수 있음

[2]-6. 나머지 등호 연산자(%=)

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

=> 나머지 등호 연산자를 사용 -> 변수에서 값을 나눈 나머지를 구할 수 있음

3-3. 비교 연산자(comparison operators)

[3]-1. 일치 연산자(===)

console.log(2 === 2);   // true

console.log("2" === 2);   // false

console.log(2 === "2");   // false

=> 일치 연산자(===)를 사용하여 두 값이 같은지 비교
= 일치 연산자는 자료형까지 비교

[3]-2. 불일치 연산자(!==)

console.log(2 !== 2);   // false

console.log("2" !== 2);   // true

console.log(2 !== "2");   // true

=> 불일치 연산자(!==) 연산자를 사용 -> 두 값이 다른지 비교
= 불일치 연산자는 자료형까지 비교

[3]-3. 작다(<) 연산자

console.log(2 < 3);   // true

console.log(2 < "3");   // true

console.log("2" < 3);   // true

=> 작다(<) 연산자를 사용 -> 두 값을 비교
= 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]-4. 크다(>) 연산자

console.log(2 > 3);   // false

console.log(2 > "3");   // false

console.log("2" > 3);   // false

=> 크다(>) 연산자를 사용 -> 두 값을 비교
= 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]-5. 작거나 같다(<=) 연산자

console.log(2 <= 3);   // true

console.log(2 <= "3");   // true

console.log("2" <= 3);   // true

console.log(2 <= 2);   // true

=> 작거나 같다(<=) 연산자를 사용하여 두 값을 비교
= 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]-6. 크거나 같다(>=) 연산자

console.log(2 >= 3);   // false

console.log(2 >= "3");   // false

console.log("2" >= 3);   // false

console.log(2 >= 2);   // true

=> 크거나 같다(>=)를 사용하여 두 값을 비교
= 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

4. 논리 연산자(logical operators)

[4]-1. 논리곱(&&) 연산자

console.log(true && true);   // true

console.log(true && false);   // false

console.log(false && true);   // false

console.log(false && false);   // false

=> 논리곱(&&) 연산자를 사용하여 두 값을 비교
= 두 값이 모두 true일 경우에만 true를 반환

[4]-2. 논리합(||) 연산자

console.log(true || true);   // true

console.log(true || false);   // true

console.log(false || true);   // true

console.log(false || false);   // false

=> 논리합(||)를 사용하여 두 값을 비교
= 두 값 중 하나라도 true일 경우 true를 반환

[4]-3. 논리부정(!) 연산자

console.log(!true);   // false

console.log(!false);   // true

console.log(!(2 > 1));   // false

=> 논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있음
= true -> false로, false -> true

5. 삼항 연산자(ternary operator)

[5]-1. 삼항 연산자(?:)

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

=> 삼항 연산자를 사용하여 조건에 따라 값을 선택
= 조건식 ? true일 때의 값 : false일 때의 -> 값 형태로 사용

6. 타입 연산자(type operators)

[6]-1. typeof 연산자

console.log(typeof 123);   // "number"

console.log(typeof "123");   // "string"

console.log(typeof true);   // "boolean"

console.log(typeof undefined);   // "undefined"

console.log(typeof null);   // "object"

console.log(typeof {});   // "object"

console.log(typeof []);   // "object"

console.log(typeof function(){});   // "function"

=> typeof 연산자를 사용하여 값의 자료형을 확인
= ypeof 연산자 : 원시 자료형의 경우, 해당 자료형의 이름
= 객체나 함수 : object 또는 function을 반환
= typeof null : object를 반환하는 버그

4. 함수

1. 함수 정의

[1]-1. 함수 선언문(function declaration)

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

=> function 키워드를 사용 -> add라는 함수를 선언
= 함수 선언문을 사용 -> 함수를 미리 정의해두고, 필요할 때 호출

[1]-2. 함수 표현식(function expression)

let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

=> unction 키워드를 사용하여 add라는 변수에 함수를 할당
= 함수 표현식을 사용 -> 함수를 변수에 할당, 익명 함수를 생성

2. 함수 호출

[2]-1. 함수 호출

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

=> add라는 함수를 호출 -> 결과값을 반환
= 함수를 호출할 때 -> 함수 이름 뒤에 괄호를 사용

3. 함수 매개변수 / 반환값

[3]-1. 함수 매개변수

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

=> add라는 함수 -> x와 y라는 두 개의 매개변수를 받아들임
= 함수를 호출할 때 -> 매개변수에 값을 전달

[3]-2. 함수 반환값

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

=> add라는 함수 -> x와 y라는 두 개의 매개변수를 받아들임 -> 이를 더한 값을 반환
= 함수를 호출한 결과값 -> 변수에 할당하여 사용

4. 함수 스코프

[4]-1. 전역 스코프(global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

=> 전역 스코프에서 변수 x를 선언 -> 함수 printX에서 변수 x를 참조
= 전역 스코프에서 선언된 변수 -> 어디에서든지 참조

[4]-2. 지역 스코프(local scope)

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

=> 지역 스코프에서 변수 x를 선언 -> 함수 printX에서 변수 x를 참조
= 지역 스코프에서 선언된 변수 -> 해당 함수 내에서만 참조

5. 화살표 함수

[5]-1. 기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

=> 화살표 함수를 사용 -> add라는 함수를 선언
= 함수의 선언 간결해짐

[5]-2. 한 줄로 된 화살표 함수

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

=> 한 줄로 된 화살표 함수를 사용 -> add라는 함수를 선언
= 함수 내부에 return문이 한 줄로 작성될 경우 -> 중괄호와 return 키워드를 생략 가능

[5]-3. 매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9

=> 매개변수가 하나인 화살표 함수를 사용 -> square라는 함수를 선언
= 매개변수가 하나일 경우 -> 괄호를 생략 가능