[코딩앙마] 자바스크립트 중급

자바스크립트의 기본 개념과 동작 원리를 정확히 이해하는 것이 중요!

---

개인적인 공부를 하면서 중요한 내용을 정리한 형식이기 때문에 오류가 있을 수 있습니다.
피드백 주시면 정말 감사하겠습니다.

---

1. variable, hoisting, TDZ

• var : 한 번 선언된 변수를 다시 선언할 수 있음
• let : 선언을 먼저 하고 나중에 할당하는 것을 허용함
• const : 한 번 선언된 변수를 다시 선언할 수 없음
• hoisting : scope 내부 어디서든 변수 선언이 최상위에 선언된 것처럼 행동한다
• TDZ (Temporal Dead Zone) : 이 영역에 선언된 변수는 사용할 수 없다

2. constructor function

• 함수명의 첫 글자를 대문자로 만든다
• new 연산자로 호출한다

function User(name, age){
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name); // 여기에서 this는 vip를 가리킨다
  }
}

let vip = new User("Mai", 40);
vip.sayName(); // "Mai"

3. object methods, computed property

• methods
  1) Object.assign(A, B) : A가 빈 값이라면 ('{}') B 객체를 A 이름으로 복제
  2) Object.keys() : 객체의 key를 배열로 반환
  3) Object.values() : 객체의 값을 배열로 반환
  4) Object.entries() : 객체의 key와 값을 모두 배열로 반환
  5) Object.fromEntries() : key와 값이 배열로 묶인 배열을 객체로 반환
• computed property : property에 연산된 값이 사용될 수 있다

4. symbol

• 기존과 달리 'new'를 붙이지 않는다
• Symbol()은 유일한 식별자를 만들 때 사용한다
• Symbol.for() : 전역 symbol

5. numbers / math methods

• toString() : () 안에 2를 쓰면 2진법으로, 8을 쓰면 8진법으로, 16을 쓰면 16진법으로 바꾸어 준다
• Math.PI : 3.141592653589793
• Math.ceil() : 올림
• Math.floor() : 내림
• Math.round() : 반올림
• toFixed() : () 안에 쓴 숫자까지 표현
• isNaN() : 숫자인지 아닌지 판단할 때 사용한다
• parseInt() :문자열을 숫자로 바꿔주는 건 Number()와 동일하나 parseInt()는 문자도 일부 처리한다
• parseFloat() : parseInt()와 거의 동일하지만 부동 소수점 자리도 반환한다
• Math.random() : 0 ~ 1 무작위 숫자 생성

6. string methods

• toUpperCase() : alphabet을 모두 대문자로 변경한다
• toLowerCase() : alphabet을 모두 소문자로 변경한다
• str.indexOf(text) :text를 문자로 받아 몇 번째에 위치하는지 반환한다
• str.slice(n, m) : n부터 m까지의 문자를 반환
• str.trim() : 앞 뒤 공백을 제거
• str.repeat(n) : 문자열을 n번 반복함
• str.includes() : 순서에 상관 없이 괄호 안의 문자가 포함되어 있는지 확인

7. array methods 01

• arr.splice(n, m) : n ~ m의 요소를 지운다
• arr.filter() : 조건을 만족하는 모든 요소를 반환함
• arr.reverse() : 역순으로 재정렬한다
• arr.map() : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환한다
• arr.join() : 배열을 합쳐서 문자열로 반들 때 사용한다
• arr.split() : 문자열을 나눠서 배열로 만들어준다

8. array methods 02 - sort, reduce

• arr.sort() : 배열을 재정렬한다
• arr.reduce() : (누적 계산 값, 현재 값) => { return 계산 값 };

9. destructuring assignment

• 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

10. rest parameters, spread syntax

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2]; // '...arr1' = 1, 2, 3이고 '...arr2' = 4, 5, 6
console.log(result); // [1, 2, 3, 4, 5, ,6]

11. closure

• 함수와 어휘적 환경 (lexical environment) 의 조합

12. scheduling functions - setTimeout, setInterval

• setTimeout(𝑓, time) :일정 시간이 지난 후 함수를 실행한다
• clearTimeout(tId) : 예정된 작업을 삭제한다
• setInterval : 일정 시간 간격으로 함수를 반복한다

13. this 값을 바꾸는 함수들 - call, apply, bind

• call : 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다
• apply : 배열 요소를 함수의 매개변수로 사용할 때 용이하다

14. 상속, prototype

• instanceof : 생성자 함수가 새로운 객체를 만들 때 그 객체는 생성자의 instance라고 불리는데, 이를 확인할 수 있는 연산자이다

15. class

• class : 생성자 함수처럼 객체를 생성할 수 있다
• method overriding
  1) super : 만약 BMW에 Car에서 정의한 method와 동일한 method가 존재한다면, BMW의 method가 나온다

16. promise

• promise : const pr = new Promise((resolve, reject) => { code });
  1) resolve : 성공한 경우
  2) reject : 실패한 경우
• callback 함수 : 어떤 일이 완료된 이후에 실행하는 함수
• Promise.all() : 하나라도 reject가 있으면 전체가 실행되지 않는다
• Promise.race() : Promise.all()은 모든 작업이 완료될 때까지 기다리지만, Promise.race()는 하나라도 1등으로 완료되면 끝낸다

17. async, await

• async : function 앞에 붙여주면 항상 promise를 반환한다
• await : await 함수 옆에 Promise가 오고, 이게 다 처리될 때까지 기다림

18. generator

• generator 객체 : 함수의 실행을 중간에 멈췄다가 재개할 수 있다
  1) function 바로 옆에 '*'를 붙인다
  2) yield에서 함수의 사용을 멈출 수 있다
  3) next() method가 있으며 사용하면 가장 가까운 yield까지 가고 멈춘다