강의 요약

JavaScript

• 브라우저 동작 스크립트 언어

특징

• 객체 지향 프로그래밍 지원
• 동적 타이핑 (변수의 타입이 런타임 때 정해짐)
• 함수형 프로그래밍
• 비동기 처리
• 클라이언트, 서버 모두에서 사용 가능

변수

• 기억하고 싶은 값을 메모리에 저장.
• 읽어들여서 재사용.
• 같은 값이 여러 번 필요할 때 유용함.

변수의 주요 개념

1. 이름: 저장된 값의 고유 이름
2. 값: 변수에 저장된 값
3. 할당: 변수에 값을 저장하는 행위
4. 선언: 변수를 사용하기 위해 컴퓨터에게 알리는 행위
5. 참조: 변수에 할당된 값을 읽어오는 것

변수 선언의 3가지 방법

// 1. var
var myVar = "Hello World";

// 2. let
let myLet = "Hello World2";

// 3. const
const myConst = "Hello World3";

• var: 같은 이름의 변수 재선언 가능
• let: 재할당 가능
• const: 재할당 불가

데이터 타입

• 코드를 작성할 때가 아닌 코드가 실행될 때 데이터의 타입이 결정됨.
• typeof 연산자로 변수의 타입 판별 가능 (typeof varName)

데이터 타입 종류

1. 숫자
   1-1. 정수(int)
   1-2. 실수(float)
   1-3. 지수형(Exp)
   1-4. NaN
   1-5. Infinity
   1-6. -Infinity

2. 문자열 (아래는 문자열에서 가능한 유용한 기능)
   2-1. length (var.length -> var의 길이)
   2-2. concat (var1.concat(var2) -> var1 끝에 var2 결합)
   2-3. substr, slice (var.substr(s, l) -> s부터 l개 var.slice(s, e) -> s부터 e까지)
   2-4. search (var1.search(var2) -> var1에서 var2가 시작되는 위치)
   2-5. replace (var.replace(b, a) -> var에서 b를 a로 대체)
   2-6. split (var.split(s) -> var를 s 기준으로 분할)

3. 불리언
   3-1. true
   3-2. false

4. undefined
   할당되지 않은 값.

5. null
   값이 존재하지 않음을 명시적으로 나타내는 방법.

6. 객체
   ley-value 짝으로 이루어진 데이터 타입.

7. 배열
   여러 개의 데이터를 순서대로 저장하는 데이터 타입.

형 변환

암시적 형 변환

1. 문자열 (1+"2" -> "12", "1"+true -> "1true")

• 연산으로 형 변환 시 문자열이 우선시 됨

2. 숫자 (1-"2", -> -1, "2"*"3" -> 6)
   +를 제외한 다른 연산으로 형 변환 시 숫자가 우선시 됨

명시적 형 변환

DataType(var) -> var를 DataType으로 변환.

연산자

1. 더하기(+) 연산자
2. 빼기(-) 연산자
3. 곱하기(*) 연산자
4. 나누기(/) 연산자
5. 나머지(%) 연산자
6. 할당 연산자
   6-1. 등호(=) 연산자
   6-2. 더하기등호(+=) 연산자
   6-3. 빼기등호(-=) 연산자
   6-4. 곱하기등호(*=) 연산자
   6-5. 나누기등호(/=) 연산자
   6-6. 나머지등호(%=) 연산자
7. 비교 연산자 (true | false)
   7-1. 일치(===) 연산자 (타입까지 비교)
   7-2. 불일치(!==) 연산자
8. 작다(<, <=) 연산자
9. 크다(>, >=) 연산자
10. 논리 연산자
    10-1. 논리곱(&&) 연산자 (둘 다 true인 경우 true)
    10-2. 논리합(||) 연산자 (둘 중 하나라도 true인 경우 true)
    10-3. 논리부정(!) 연산자 (반전)
11. 삼항 연산자 (중요!) (let x = a ? b : c -> a라는 조건이 성립된다면 x = b, 아니면 x = c)
12. 타입(typeof) 연산자

스코프

변수가 유효한 범위.

전역 vs. 지역

전역: 전역에서 선언된 변수는 어디에서도 유효함
지역: 지역에서 선언된 변수는 해당 지역에서만 유효함

함수

input과 output을 갖고 있는 기능의 단위.

정의

1. 함수 선언문 (function 키워드, 함수 이름, 매개변수, 중괄호)

function funcName(input) {
	return output
}

2. 함수 표현식 (함수를 구현해서 변수에 저장)

let funcName2(input) {
	return output
}

호출

funcName(input)

화살표 함수

1. 기본 문법

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

2. 한 줄 선언 (중괄호 안의 내용이 한 줄인 경우에만 가능)

let arrowFunc2 = (x, y) => x + y

조건문

if / else if / else

if (condition (true || false)) {
	then do this
}
else if (other condition than if) {
	then do this
}
else {
	otherwise, do this
}

switch

변수의 값에 따라 여러 개의 경우(case) 중 하나 선택

let var = "abc";
switch (var) {
	case "abc":
    	do something
        break
    case "def":
    	do other thing
        break
    case "ghi":
    	do other thing
        break
    default:
    	do other thing
        break

조건부 실행

if (x > 0) {
	console.log("x는 양수입니다.");
}

(x > 0) && console.log("x는 양수입니다.");

삼항 연산자와 단축평가

let y;
let z = y || 20;

• y가 undefined이면 z에 20 할당.

객체

key-value 짝으로 이루어진 데이터 타입.
하나의 변수에 여러 값을 저장할 수 있음.

객체 생성 방법

1. 기본

let person = {
	name: "홍길동",
    age: 30,
    gender: "남자",
}

2. 생성자 함수 이용

funcion Person(name, age, gender) {
	this.name = name;
    this.age = age;
    this.gender = gender;
}

let person = new Person("홍길동", 30, "남자");

객체 접근 방법

객체의 키를 접근해서 값을 볼 수 있음.
console.log(person.name) -> "홍길동"

객체 메소드

1. Object.key(obj) -> obj의 key들을 배열 형태로 저장
2. Object.values(obj) -> obj의 value들을 배열 형태로 저장
3. Object.entries(obj) -> key-value로 이루어진 배열들의 배열 형태로 저장
4. Object.assign(obj1, obj2) -> obj1에 obj2를 복사.
   4-1. Object.assign(obj1, obj2, {key: val}) -> obj1에 obj2를 복사하되 세 번째 매개변수로 받은 key들은 수정

객체 비교

객체와 배열은 일반 변수들에 비해 크기가 크므로 별도의 공간(메모리 힙)에 따로 저장됨.
우리가 흔히 쓰는 변수명에는 변수의 값이 아니라 메모리 주소가 저장됨.
따라서, 같은 값을 가진 객체끼리 비교(===)를 하더라도 false가 나올 수 밖에 없음.
이 때, 값만 비교하고 싶을 때 JSON.stringify(obj)를 사용해 obj를 문자열로 변환하여 비교하면 됨.

객체 병합

let person1 = {
  name: "홍길동",
  age: 30,
};

let person2 = {
  gender: "남자",
};

let perfectMan = { ...person1, ...person2 };

console.log(perfectMan);

spread(...) 연산자로 중괄호를 풀 수 있음.
person1과 person2을 풀어서 각각의 key-value가 perfectMan에 할당됨.

배열

생성

// 1. 기본
let abc = ["a", "b", "c"];

// 2. 크기 지정
abc = new Array(3);

접근

대괄호로 인덱스에 접근. ([0], [1], [2], ...)

메소드

let abc = ["a", "b", "c"]
let numbers = [1, 2, 3, 4, 5]
// 1. push. 배열의 끝에 요소 삽입.
abc.push("d")				// -> ["a", "b", "c", "d"]

// 2. pop. 마지막 요소 제거.
abc.pop()					// -> ["a", "b", "c"]

// 3. shift. 첫 번째 요소 제거.
abc.shift()					// -> ["b", "c"]

// 4. unshift. 맨 앞에 요소 삽입.
abc.unshift("a")			// -> ["a", "b", "c"]

// 5. splice. i번째부터 n개를 삭제 후 그 자리에 요소 삽입.
abc.splice(1, 1, "d")		// -> ["a", "d", "c"]

// 6. slice. i번째부터 j번째(미포함)까지 반환.
abc.slice(1, 2)				// -> ["d"]

// 7. forEach. 배열의 각 요소에 접근하여 원하는 기능을 수행.
// 매개변수 자리에 함수를 넣는 것: 콜백 함수
numbers.forEach(function(n) {
	console.log("number: " + n);
});							// -> number: 1 ... number: 5

// 8. map. 배열의 각 요소에 접근하여 기능을 수행 후 새로운 배열 반환
// 때문에 function은 반환값이 있어야 함.
/ * 항상 원본 길이만큼 반환됨.
let newNumbers = numbers.map(function(n) {
	return n * 2;
});							// -> newNumbers = [2, 4, 6, 8, 10]

// 9. filter. map과 유사하지만 조건이 들어감.
// 조건에 해당되는 요소만 반환.
let filteredNumbers = numbers.filter(function(n) {
	return n % 4 === 0;
})							// -> filteredNumbers = [4, 8]

// 10. find. 조건이 성립되는 첫 번째 요소 반환.
num = numbers.find(function(n) {
	return n > 5;
})							// -> num = 6

반복문

for

for (초기값; 조건식; 증감식) {
}

// 1. i는 0부터 시작.
// 2. i가 10보다 작은 동안 반복.
// 3. 반복하면서 i는 1씩 증가.
for ( let i = 0; i < 10; i++) {
}

for ~ in

let person = {
	name: "John",
    age: 30,
    gender: "male",
};

for (let key in person) {
	console.log(key + ": " + person[key]);
}

while

// 초기값
// while (조건) {
//     증감
// }

// 위의 for문과 동일
let i = 0;
while (i < 10) {
	i++;
}

do while

while과 유사하지만 일단 한 번 무조건 실행한다는 차이점이 있음.

// 초기값
// do {
//     증감
// } while (조건)

let i = 10;
do {
	console.log(i);
} while (i < 10);

위 코드에서 while문의 조건이 성립되지 않지만 일단 한 번 실행되고 반복문이 종료됨.

break / continue

break: 특정 조건에서 반복문을 종료시키는 문법.
continue: 특정 조건을 건너뛰는(다음 순서로 넘어가게 하는) 문법.