[💻 코드스테이츠 FE 44기] 부트캠프 - 스코프, 클로저

✔️ 시작

단시간에 많은 정보를 넣으려고 하니 오히려 집중하기 어려웠다.
이번 학습은 스코프, 클로저 그리고 기타 문법에 대해 배웠다.

마지막 라이브 세션에서 블로그 작성법 등을 설명하면서
나도 조금 씩 변경해 보려고 한다.

📍 배운 것

📌 스코프(scope) : 변수의 유효 범위

• 안 쪽 스코프에서 바깥 쪽 스코프로 접근할 수 있지만 그 반대는 불가능
• 전역 스코프(Global scope : 가장 바깥 스코프), 지역 스코프(Local scope : 전역 스코프 내부에 있는 스코프)
• 지역 변수는 전역 변수 보다 더 높은 우선순위를 가짐
• 종류는 블록 스코프(block scope : 중괄호를 기준으로), 함수 스코프(function scope : function 키워드로 구성되어 있는)가 있다.
• but, 화살표 함수로 둘러싸여 있는 범위는 block scope
• 위계적으로 겹칠 경우 안 쪽 스코프 부터 바깥 스코프 부터 순차적으로 스코프 체이닝이 일어난다.

  정적 스코프(Static scope, Lexical scope)

  함수는 한 번만 정의할 수 있다. 정의되면 다른곳에 또 정의할 필요가 없다.

  strict mode

  브라우저 보다 엄격하게 작동하도록 만들어 준다.
  "선언 없는 변수 할당"의 경우 strict mode는 에러로 판단.
  (js 파일 상단에 입력 'strict mode')

📌 클로저(closure) : 함수와 그 함수가 접근할 수 있는 변수의 조합

• 함수와 함수가 선언된 어휘적(lexical)환경의 조합
• 클로저 생성된 시점의 유효 범위내에 있는 모든 지역변수
• 함수를 함수 안에 정의할 경우 해당 함수의 부모 함수의 스코프에 접근할 수 있다.
• 클로저를 이용하면 특정 데이터를 보존할 수 있다.
• 주로 데이터를 보존하는 함수, 커링, 모튤 패턴으로 활용

📍 중요한 부분

📌 spread 문법

• 주로 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 떄 사용한다.
• 키 값이 같을 경우 마지막 키 값으로 덮어 씌운다.
• 복사할 배열 앞에 ...을 붙여 준다.

const num = [1,2,3];
const newNum = [...num];

console.log(numNum); // 1,2,3

📌 화살표 함수(arrow function) : 함수 표현식에서 수정됨

//arrow function
const a = (x) => {
	실행 코드
}

//함수 표현식
function a(x){
	실행 코드
}

매개 변수가 하나 일 때 (,) 생략이 가능하다.

const a = (x) => {
	실행 코드
}

const a = x => {}
// 단, 매개 변수가 2개 일 경우 사용하면 안된다.

✏️ 마치며

스코프, 클로저 부분을 세세하게 배울 수록 어려워 진 거 같다.
머릿 속으론 이해 해도 말로 설명하기 어렵다. 좀 더 갚게 파고 들면
커링, 모듈패턴도 있다. 이부분도 추후 다시 알아볼까한다.

이번 라이브 세션 마지막에는 딥 토크 회고라고 다른 수강생분들과
이야기 하는 시간을 가졌다. 덕분에 다른 사람들은 어떤 생각하고 있는지,
어떤 고민하고 있는지 알 수 있었던 소중한 시건이였다.

매주 금요일 마다 스터디도 진행했다.
서로 공부했던 내용을 정리하고 어떤 한 부분에 대해 공부했는지 발표하는 시간도 가졌다.
오프라인이 아닌 온라인으로 말하려고 하니생각 보다 더 긴장했던 거 같다.
스터디를 통해 말하기 능력도 기르고 다른 사람들과 얘기하면서 커뮤니케이션도 늘릴 수 있을 거 같다.