오늘의 생각

시작하며
주말에 복습 겸, 부족한 내용을 돌아보고자 2주차 회고록을 작성하다 내용이 너무 많아(모르는게 너무 많은건가 ^^...) 우선 절반 정도만 작성하고 마무리하였다.
아무래도 JS 부분에서 부족한 점을 많이 느끼고 있었는데, 이번주는 JS핵심 개념 및 주요 문법을 학습하는 시간으로 시작하다보니 심리적으로 조금은 안정감이 든다. ㅎㅅㅎ
JS 핵심내용 학습 후 그동안 부족하다고 느꼈던 부분들에 대해 다시 회고록을 작성할 예정이다.

오늘의 학습내용

1. 원시 자료형 / 참조 자료형

1) 원시(primitive) 자료형

• 하나의 데이터 값을 가짐
• 대표 타입 : string, number, bigint, boolean, undefined, symbol, (null)
• 변수에 값 저장
• immutable : 값 자체에 대한 변경 불가능

2) 참조(reference) 자료형

• 여러개의 데이터 값을 가짐(보관함(heap)의 크기가 동적임)
• 대표 타입 : 원시 자료형을 제외한 모든 타입 / function, array, object 등
• 변수에 주소 저장
• mutable : 데이터 값의 주소를 참조하기 때문에 값 변경 시, 같은 주소를 참조하는 값이 같이 변경됨

2. 스코프(Scope)

1) 스코프란?

: 변수 접근 규칙에 따른 유효 범위

• 전역 스코프(Global Scope)
  : 바깥쪽 스코프, 전역에서 접근 가능

• 지역 스코프(Local Scope)
  : 안쪽 스코프, 해당 스코프 또는 중첩되어 더 안쪽에 있는 스코프에서 접근 가능

2) 스코프 접근 규칙

• 안쪽에서 바깥쪽 스코프에 대한 변수 접근은 가능하지만, 바깥쪽에서 안쪽으로의 접근은 불가능함
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가짐

let name = '원지렁';

function showName() {
  let name = '박해커'; // 지역 변수
  console.log(name); // 두 번째 출력(박해커)
  }

console.log(name); // 첫 번째 출력(김코딩)
showName();
console.log(name); // 세 번째 출력(김코딩)

3) 스코프의 종류

3-1) 블록 스코프(Block Scope)

: { }를 기준으로 나뉨

• 유의사항 : 화살표 함수는 블록 스코프로 취급

3-2) 함수 스코프(Function Scope)

: 함수 내/외를 기준으로 나뉨

4) let/const/var

• 안정성 측면에서 var보다 let을 쓰는 것이 권장됨
• 선언(let, const, var)없이 변수를 쓰는것은 전역 스코프로 취급되니 변수 사용 시, 선언 필수

3. 클로저(Closure)

1) 클로저란?

: 함수와 함수가 선언된 어휘적 환경의 조합 (클로저 함수 = "함수를 리턴하는 함수")

2) 클로저 활용

• 변수의 접근 범위를 닫음으로써(closure; 폐쇄) 활용
  : 외부 함수 -> 내부 함수 접근 불가
  : 내부 함수 -> 외부 함수 접근 가능

• 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장되어 내부 함수 실행가능

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

const add5 = adder(5); // 
add5(7) // 12 

• 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 함

• 모듈화에 유리
  : 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것

const makeCounter = () => {
	let value = 0;
	
	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getValue: () => value
	}
}

const counter1 = makeCounter();

counter1.increase();
counter1.increase();
counter1.decrease();
counter1.decrease();
counter1.increase();
counter1.getValue(); // 1