[JS/Node] 핵심 개념과 주요 문법 리뷰

Chapter. 원시 자료형과 참조 자료형

---

🐶 원시 자료형

객체가 아니면서 메서드를 가지지 않는
string number boolean bigint undefined null symbol

데이터가 하나의 값 value를 담고 있음

🐶 참조 자료형

원시 자료형이 아닌 모든 것
[] {} function()

변수는 데이터가 아닌 주소 reference 가 담겨있으며,
데이터의 크기가 동적으로 변하는 특별한 보관함, heap 에 저장됨

Chapter. 스코프

---

🐱 scope

변수 접근 규칙에 따른 유효 범위
즉, 변수와 그 값이 접근할 수 있는 범위

바깥 스코프에서 선언한 변수는 안쪽 스코프에서 사용 O
안쪽 스코프에서 선언한 변수는 바깥 스코프에서 사용 X

🐱 지역변수 & 전역변수

스코프는 중첩이 가능하며, 가장 바깥의 스코프를 전역 스코프 global scope 로 지칭
전역이 아닌 모든 스코프는 지역 스코프 local scope

전역 스코프에서 선언한 변수는 전역 변수
지역 스코프에서 선언한 변수는 지역 변수
지역 변수는 전역 변수보다 더 우선 순위가 높음
전역 변수는 최상단의 scope로, 어디서든 접근이 가능함

🐱 let, var, const

• 블록 스코프 : 중괄호를 기준으로 범위가 구분됨
  화살표 함수 포함

• 함수 스코프 : function() 키워드가 등장하는 함수 선언식 및 함수 표현식의 스코프

let : 블록 범위를 벗어나는 즉시 접근할 수 없음

const : 값 재할당 불가, let과 같이 블록 스코프를 따름

var : for문의 블록 스코프를 무시하고, 함수 스코프만 따름

그 외 선언 키워드를 이용하여 선언하지 않으면 전역변수가 되어 block scope를 벗어날 수 있음

Chapter. 클로저

---

🐭 클로저

외부 함수의 변수에 접근할 수 있는 내부 함수
"함수와 함수가 선언된 어휘적 환경의 조합"

클로저 함수 안에서는 지역 변수, 외부 함수의 변수, 전역 변수의 접근이 모두 가능함

---

const adder = function(x){
  return function(y){
    return x+y;
  }
}

const add5 = adder(5)
//외부 함수 adder의 실행이 끝나더라도 외부함수 내 변수 x를 사용할 수 있음

add5(7) // 12
add5(10) // 15

---

const makeCounter = () => {
  let value = 0;
  
  return {
    increase: () => {
      value = value + 1
      }
    decrease: () => {
      value = value - 1
      }
    getValue: () => value
  }
}
//바깥에서 value는 어떤 식으로도 영향을 줄 수 없으나, return이 제공하는 메서드에 의해 변경 가능


const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1

const counter2 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.decrease()
counter1.decrease()
counter1.getValue(); // -1

//counter1의 value와 counter 2의 value는 서로에게 영향을 끼치지 않고 각각의 값을 보존함
//함수 재사용성이 극대화되며, 함수를 독립적인 부품 형태로 분리하는 것 = 모듈화

Chapter. spread/rest 문법

---

🐹 spread

배열을 풀어서 인자로 전달하거나 각각의 요소로 넣을때에 사용

function sum(x,y,z){
  return x+y+z;
}

const numbers = [1,2,3];
sum(...numbers) // 6

// 구조 분해 할당 사용됨

spread 문법은 기존 배열을 변경하지 않고 새 배열을 반환함
또한 객체에서도 사용 가능하며, 함수에서 나머지 파라미터를 받아오는 데에도 사용됨

🐹 spread

파라미터를 배열의 형태로 받아서 사용 - 파라미터의 개수가 가변적일 때 좋음

function sum(...theArgs){
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 6
sum(1,2,3,4) // 10

🐹 구조 분해 할당

spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당함

const [a, b, ...rest] = [10, 20, 30, 40, 50];

a===10
rest = [30,40,50]

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

a === 10
rest = {c: 30, d: 40}