코드스테이츠 we win 20주 Full Pre 11기 🔥

아홉번째 날

Week 2-1) JS로 많은 데이터 다루기 끝 & Week 2-2 : JS 깊게 알기 시작

JS로 많은 데이터 다루기는 배열과 객체에서 끝이 났고, JS 깊에 알기 스프린트는 Primitive & Reference, Scope, Closure 로 시작했다. 이전에 국비지원에서 Java를 배우면서 메모리 영역에 대한 것을 학습할 때 stack, heap 영역에 저장하는 주소 값 등을 배우면서 익혔었는데, Javascript를 배우면서 원시 자료형 or 참조 자료형에 따른 특징을 따로 배우면서 더 새롭게 재미있게 느껴졌었다(어쩐지 새로운 느낌..😟)
스코프에 대한 영역은 어느정도 함수형 프로그래밍을 학습하면서 이해를 하는 것 같으면서도 막상 문제로 접하면 헷갈리는 문제가 이만 저만이 아니다 ㅠㅠ... 클로저는 예전에도 이해가 안갔었는데 지금 봐도 알듯 말듯 한 알쏭달쏭한 개념... 이제야 불맛인건가!! 매번 TIL작성마다 n맛이다 하는데 진짜로 클로저는 나한테 불맛이다 ㅠㅠ
정규시간 외에든 주말에든 시간을 쏟아서 스코프와 클로저를 공부해야 할 것 같다😩 이상하도록 이해가 갈듯 말듯 한 이상한 개념...코드스테이트의 레슨은 기본 개념이 이해가 갈 정도로 정말 좋은 수준의 레슨을 보여주지만, 깊은 개념은 나혼자 이해해야 하는 듯 하긴 하다.

세번째 페어 프로그래밍

이번에 같이 한 페어분도 다른 분야를 하시다가 코딩을 처음 시작한 분이었는데, 나는 운이 좋은지 아직까지 좋은 페어분을 만났다. 말도 잘 통해서 유쾌하고 즐거운 분위기로 시작했고 코플릿을 풀 때는 진지한 자세로 임하면서 피드백을 주고 받으니 서로 배우고 성장하면서 학습하는 느낌이었다.
이번에는 내가 드라이버를 하면서 페어분이 네비게이터를 하셨다. 네비게이터 역할만을 한 것은 처음인데, 처음 OT날 네비게이터 역할을 할 때 방향성을 은근히 제시하며 드라이버의 의견을 기다리는 것이 힘들어도 참고 기다리며 같이 나아가 달라고 하셨는데, 나는 성격이 느긋한 편이 아님에도 불구하고 네비게이터의 방향 제시를 기다리는 것이 마냥 힘들지만은 않았다.
내가 드라이버로서 생각한 코드와 네비게이터가 제시한 방향이 다른데도 같은 답이 나왔을 때 , 이런 저런 방향이 있다는 것에 서로 놀라워하고 배우면서 즐거웠던 과정 같다😋
세번째 페어 프로그래밍은 이전 페어 때와 다른 점을 배운 것 같다.

(빡센 선생님..ㅎㅎㅎ;;; 나름 힌트를 많이 드렸다고 생각하는데 결정적 힌트를 안드려서 속상하셨나 보다 ㅠㅠ)

---

원시 자료형(primitive type) vs 참조 자료형(reference type)

• number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터라고 한다.
• 배열, 객체, 함수등이 이런 특별한 저장 공간을 사용. 주소 타입(reference type) 데이터라고 한다.

원시 자료형과 참조 자료형의 특징

• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.
• 그래서 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있다.

원시 자료형 깊게 이해하기

자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6가지의 타입

string, number, bigint, boolean, undefined, symbol, (null)

• 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있다.

• 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다.

• 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

• bigint와 symbol은 특별한 경우 사용하는 데이터 타입.

• null은 원시 타입과 거의 같게 사용된다고 볼 수 있음. 작동 방식 또한 다른 원시 타입과 같다. 다만 엄밀하게 따지자면 원시 타입이라고 볼 수 없다.

참조 자료형 깊게 이해하기

• 배열([])과 객체({}), 함수(function(){})가 대표적. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부른다.
• 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장.

function printMaxNums(...args) {
  console.log(args) // [10, 30, 40]
}

printMaxNums(10, 30, 40) 

function printMaxNums(num1, ...args) {
  console.log(args) // [30, 40]
}

//따로 매개변수를 지정했었다면, 남은 매개변수만 배열의 형태로 rest parameter args에 할당.

(...arr) : spread syntax는 iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법을 의미.

let arr = [10, 30, 40, 20]
let value = Math.max(...arr) // 40
// Math.max(10, 30, 40, 20) 와 같다.

Scope & Closure

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

• Local Scope 안쪽에서 선언된 변수는 밖에서 사용 할 수 없다.
• 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖는다.
• 변수와 그 값이 어디서부터 어디까지 유효한지를 판단하는 범위.
• Javascript는 기본적으로, 함수가 선언되는 동시에 자신만의 Scope를 갖음.
• 안쪽 Scope에서 바깥 변수/함수를 접근하는 것은 가능.
• 바깥쪽 Scope에서 안쪽 변수/함수를 접근하는 것은 불가능.
• Scope는 중첩이 가능하다 (함수 안에 함수를 넣을 수 있다).
• Global Scope는 최상단은 scope로, 전역 변수는 어디서든 접근이 가능.
• 지역 변수는 함수 내에서 전역변수보다 더 높은 우선순위를 가짐.

Block: 중괄호로 시작하고, 끝나는 단위

• {}

var 키워드 / let키워드

• 변수를 정의하는 또다른 키워드 var (var를 사용한 재선언시, 아무런 에러도 내지 않음)
  • Javascript는 기본적으로, 함수단위로 자신만의 Scope를 가진다 → var 키워드(old way)
  • 그러나, Block단위로 Scope를 구분했을 때에 예측하기 쉬운 코드를 작성할 수 있다 → let 키워드

const 키워드

• 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용하는 키워드
  • let 키워드와 동일하게 Block Scope를 따른다.
  • 값을 재정의 하려고 하면 TypeError를 낸다.

• let : (유효범위)block scope (값 재정의)가능 (재선언)불가능
• const : (유효범위)block scope (값 재정의)불가능 (재선언)불가능
• var : (유효범위)Functions scope (값 재정의)불가능 (재선언) 가능

전역변수와 window 객체

• 전역 범위를 대표하는 객체 window
• global scope에서 선언된 함수, 그리고 var 키워드를 이용해 선언된 변수는 window 객체와 연결
• 전역 범위에 너무 많은 변수를 선언하지 않도록 주의
• let은 window 객체에 연결될 수 없음

선언 없이 초기화 된 전역 변수

• 절대로, 선언키워드 없이 변수를 초기화 하지 않기
• 'use strict'; → js파일 가장 상단에 적고 시작 : 문법적으로 실수할 수 있는 부분들을 에러로 판단함.

Closure

클로저

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성 된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."

클로저 함수

외부 함수의 변수에 접근할 수 있는 내부 함수

클로저 함수 안에서는

• 지역 변수
• 외부 함수의 변수
• 전역 변수 의 접근이 전부 가능하다

커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function adder(x){
	return function(y) {
		return x + y;
	}
}
adder(2)(3); // 5

아래와 같이 x의 값을 고정해놓고 재사용할 수 있다.

let add100 = adder(100);
add100(2); // 102
add100(10); // 110

let add5 = adder(5);
add5(2); //7

• 외부 함수의 변수를 저장하면 템플릿 함수와 같이 사용 가능

클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법

function makeCounter() {
	let privateCounter = 0;

	return {
		increament: function() {
			privateCounter++;
		},
		decrement: function() {
			privateCounter--;
		},
		getValue: function() {
			return privateConter;
		}
	}
}

privateCounter라는 변수는 밖에서 조작 불가능 함.

함수로 접근하여 조작하는 방법만 있음.