[SEB FE] Section 1

Unit10 - [JavaScript] 핵심 개념과 주요 문법

• 원시 자료형과 참조 자료형
• 스코프
• 클로저

---

회고

오늘은 원시 자료형과 참조 자료형, 스코프 그리고 클로저에 대해서 배웠습니다. 뭔가... 이제부터는 단순히 언어를 잘 사용하는 것을 넘어서서 코드를 효율적으로 작성하는 것에 대해서 알려주는 거 같았습니다.

원시 자료형과 참조 자료형, 스코프는 원래 알고 있던 개념이라 어렵지는 않았지만 그래도 다시 한번 짚고 넘어가게 되어 좋았습니다.

클로저는 형태는 많이 본 거 같은데 확실하게 개념을 익히지는 못했습니다. 그래서 오늘은 클로저를 많이 알아보고 익히려고 노력하였습니다.

오늘도 다들 고생많으셨습니다. 내일도 화이팅~!

---

원시 자료형과 참조 자료형

학습목표

• 원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.
• 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.
• 원시 자료형이 할당될 때는 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다.

개념학습

• 원시 타입 데이터(primitive type data)의 경우 변수와 값이 stack에 할당된다.

• 원시 타입 데이터의 종류: number, boolean, null, undefined, string

• 원시 타입 데이터는 각 변수간의 원시 타입 데이터를 복사 할 경우 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 없다.

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

• 참조 타입 데이터(reference type data)의 경우 heap에 변수와 값들이 할당된다.

• 참조 타입 데이터는 주소를 복사하기 때문에 복사한 주소값에 원소를 변경하게 된다면 기존의 데이터가 변경된다.

• 참조 타입 데이터의 종류: 배열[], 객체{}, 함수function(){}

• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.

• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있다.

---

스코프

학습목표

• 스코프의 의미와 적용 범위를 이해한다.
• 스코프의 주요 규칙을 이해한다.
• 전역 스코프와 지역 스코프의 차이를 이해한다.
• block scope와 function scope의 차이를 이해한다.
• 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.
• 전역 객체가 무엇인지 설명할 수 있다.

개념학습

• 스코프는 "변수 접근 규칙에 따른 유효 범위"이다.

• 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능하다.

• 스코프는 중첩이 가능하다. 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수이다. 또한 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

• 스코프에는 두 가지 종류가 있다. 하나는 블록 스코프(block scope)라고 부르며, 중괄호를 기준으로 범위가 구분된다.

  • 같은 함수여도, 화살표 함수를 사용하면 블록 스코프로 취급된다. function 키워드를 사용하면 함수 스코프이다. 이는 화살표 함수와 일반 함수의 가장 큰 치이점이다.

• var 키워드는 블록 스코프를 무시하고, 함수 스코프만 따른다.

  • 보통 재선언이 되었을 경우 버그가 대부분이다. var는 재선언을 할 경우 할당이 되지만 let 키워드는 재선언을 방지해준다.

• const는 값이 변하지 않는 상수를 정의할 때 사용한다.

  • const의 경우 let 키워드와 동일하게, 블록 스코프를 따른다.
  • 만약 값을 새롭게 할당할 일이 없다면, const 키워드의 사용이 권장된다.
  • const에 값을 재할당하는 경우, TypeError를 나타낸다.

• let, var, const 키워드 비교

	let	const	var
유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

• 브라우저에는 window라는 객체가 존재한다.
  • 브라우저 창을 대표하는 객체로 지금 개발자 도구를 열어 콘솔에 window 라고 입력해 보면 하나의 객체를 조회할 수 있다. 이 객체는 사실 브라우저의 창(window)을 의미하는 객체이지만, 이와 별개로 전역 영역을 담고 있기도 하다.
  • var로 선언된 전역 변수와 전역 함수가 window 객체에 속함
  • 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면, window 객체에서도 동일한 값을 찾을 수 있다.

• 전역 변수는 최소화 해야 한다.

  • "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네" 라는 생각이 들 수도 있지만 다른 함수 혹은 로직에 의해 의도되지 않은 변경이 발생할 수 있다.
    • 부수 효과(side effect) 발생

• let, const를 주로 사용해야 한다.

  • 같은 스코프에서 동일한 이름의 변수를 재선언 하는 것은 버그를 유발한다. 그러나 var는 블록 스코프를 무시하며, 재선언을 해도 에러를 내지 않는다.
  • var로 선언한 전역 변수가 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다.

• 선언 없는 변수 할당 금지
  • 선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역 변수처럼 취급이 된다.

• Strict Mode
  - js 파일 상단에 'use strict';라고 입력하면 문법적으로 실수할 수 있는 부분들을 에러로 판단한다.
  

---

클로저

학습목표

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다.
• 클로저가 갖는 스코프 범위를 이해할 수 있다.
• 클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다.

개념학습

• 클로저 함수의 특징
  • 클로저 함수의 첫 번째 특징은 클로저 함수는 함수를 리턴하는 함수로 함수를 리턴하는 함수가 클로저의 형태를 만든다.
  • 클로저 함수의 두 번째 특징은 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다.

• 클로저의 활용

  • 데이터를 보존하는 함수

    • 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수를 사용할 수 있다.
    • HTML 문자열을 만들 수 있다.

  • 정보의 접근 제한

    • 클로저 모듈 패턴을 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.
    • 다만 외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다라는 규칙에 의해, 어떤 경우에도 'value'는 직접 수정이 불가능하다. 대신. 리턴하는 객체가 제공하는 메서드를 통해 'value' 값을 간접적으로 조작할 수 있다. 이것이 바로 정보의 접근 제한(캡슐화)이다.
    • 클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.

  • 모듈화

    • 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.
    • 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.