Unit10 회고

원시 자료형과 참조 자료형

1. 원시자료형(primitive type data)

• number, string, boolean, null, undefined cf) bigint, symbol
  • bigint란?
    • Number 값이 나타낼 수 있는 2^53-1보다 큰 정수를 표현할 수 있는 내장 객체
  • symbol이란?
    • 값으로 익명의 객체 속성을 만들 수 있는 특성을 가진 원시 데이터 형식, 클래스나 객체 형식의 내부에서만 접근 가능
      bigint symbol
• 하나의 변수에 하나의 데이터를 담는 자료형
• 데이터 보관함(변수) 안에는 ‘값’이 들어감

• 복사할 경우 값을 복사하기 때문에 원본에 영향x
• 고정된 크기 차지
• 값 자체 변경 불가, 재할당을 통해 다른 데이터 할당 가능(const로 선언된 변수는 불가)
  

2. 참조 자료형(reference type data)

• array, object, function 등
• 하나의 변수에 여러 개의 데이터를 담을 수 있는 자료형
• 힙(heap)이라는 빈 공간을 만들어 데이터 보관함(변수)에는 값 대신 ‘주소’를 넣고 힙에 연결

• 복사할 경우 주소를 복사하기 때문에 원본에 영향
• 데이터 크기가 동적으로 변하고 이 데이터는 힙 공간에 위치
• 즉, 변수에는 값이 아닌 주소가 담겨 있고 그 주소를 ‘참조’하여 실제 데이터를 찾기 때문에 참조 자료형이라 불림
• heap공간의 필요성
  • 대량의 데이터를 효과적으로 다루기 위해(데이터의 크기에 따라 변화할 수 있도록)
• 주의: 참조 자료형의 strict equality(===)는 주소값을 비교함!

스코프

1. 스코프와 주요 규칙

• 스코프: 변수 접근 규칙에 따른 유효 범위(변수에 접근할 수 있는 범위)
• 범위는 블록이나 함수에 의해 나누어짐

  • 변수 접근 규칙
    1) 안쪽 스코프에서 바깥쪽 스코프로 접근 가능, 반대는 불가
    2) 스코프는 중첩 가능
    3) 가장 바깥 스코프는 전역 스코프(global scope), 전역이 아닌 스코프는 지역 스코프(local scope)
    4) 지역 변수는 전역 변수보다 높은 우선순위 가짐

• 쉐도잉(variable shadowing): 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상

2. 변수 선언과 스코프

1. 스코프의 종류
   • 블록 스코프(block scope): 중괄호로 둘러싼 범위
   • 함수 스코프(function scope): 함수로 둘러싼 범위
   • 주의: 화살표 함수는 블록 스코프로 취급!
2. var 키워드와 let 키워드
   • var 키워드는 블록스코프 무시(단, 화살표 함수 제외), 함수 스코프만 따름
   • let 키워드 사용 권장 이유
     • 보통 코드 작성 시 블록 단위가 시각적으로 분명하기 때문(var 키워드는 블록 스코프를 무시하므로)
     • let 키워드는 재선언을 방지, var 키워드보다 안전
3. const 키워드
   • 값이 변하지 않는 상수를 정의할 때 사용
   • let 키워드와 동일하게 블록 스코프를 따름
   • 값을 재할당할 일이 없다면 const 키워드 사용 권장(값의 변경을 최소화하여 보다 안전)
4. let, const, var 비교

	let	const	var
유효 범위	블록 스코프, 함수 스코프	블록 스코프, 함수 스코프	함수 스코프(화살표 함수 포함)
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

3. 변수 선언 시 주의 사항

• window 객체(브라우저)
  • var로 선언된 전역 변수 및 전역 함수는 window 객체에 속함
• 전역 변수 최소화 권장
  • side effect 발생 가능: 다른 함수나 로직에 의해 의도하지 않은 변경이 발생할 수 있음
• let, const 주로 사용할 것
  • 전역 변수를 var로 선언하는 경우 이 변수가 window 기능을 덮어씌워 내장 기능을 사용할 수 없게 만들 수 있음
• 선언 없는 변수 할당 금지
  • 선언 키워드 없이 변수 할당하지 말 것
  • 선언 없이 변수 할당 시, 해당 변수는 var로 선언한 전역 변수처럼 취급
  • 실수 방지를 위해 Strict Mode 사용 가능
    • js 파일 상단에 ‘use strict’ 입력 시 사용 가능

4. Strict Mode(추가)

자바 스크립트는 원래 Strict Mode가 활성화되어 엄격하게 코드를 작성할 수 있도록 설계하였지만 ES5가 등장한 2009년 이후 기본 모드에서는 활성화되지 않도록 설계하였고 use strict라는 지시자를 사용해 strict mode가 활성화 될 수 있도록 설계함

• use strict
  • 스크립트 전체에서 strict mode가 실행되게 하기 위해서는 스크립트 최상단에 'use strict'를 위치시켜야 함
  • 만약 'use strict'가 함수 본문 맨 앞에 오면 함수만 strict mode로 실행
  • 'use strict'를 취소하는 방법은 없기 때문에 strict mode가 적용되면 돌이킬 수 없다는 점을 주의하여 사용
  • 코드를 클래스와 모듈을 사용해 구성할 경우 생략 가능
    Strict Mode

클로저

클로저의 정의

• 함수와 함수가 선언된 어휘적 환경의 조합(출처: mdn)
• 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 즉 자신이 생성될 때의 환경을 기억하는 함수(출처: poiemaweb)
• 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는 함수(출처: poiemaweb)

1. 클로저 함수의 특징

• 함수를 리턴하는 함수
• 내부 함수는 외부 함수에 선언된 변수에 접근 가능
  • 리턴하는 함수에 의해 스코프가 구분되며 스코프를 이용하여 변수의 접근 범위를 닫는 것(closure)이 핵심

2. 클로저의 활용

• 데이터 보존

  • 외부 함수의 실행이 끝나도 외부 함수의 변수 사용 가능
  • 특정 데이터를 스코프 안에 가두어 둔 채 재사용 가능

    const multiplicator = x => y => x*y; //클로저 함수
     const multiple3 = multiplicator(3); //클로저에 x의 환경 저장 (y에 3을 곱함)
     const multiple5 = multiplicator(5); //클로저에 x의 환경 저장 (y에 5을 곱함)
     multiple3(7); // 함수 실행 시 저장된 x값에 접근하여 계산 — 21 출력

  • multiple3, multiple5 모두 클로저
    -> 같은 함수 본문을 공유하지만 서로 다른 어휘적 환경을 저장, 함수 실행시 multiple3의 어휘적 환경에서 x는 3이지만 multiple5의 어휘적 환경에서 x는 5를 나타냄

• 정보의 접근 제한

  • 클로저 모듈 패턴 -> 클로저를 이용해 여러 개의 내부 함수를 객체에 담아 리턴 가능
  • 캡슐화를 통해 함수 내부의 변수는 외부에서 직접 수정 불가(스코프 규칙에 의해)
  • 클로저를 통해 불필요한 전역 변수 사용 감소시키고 스코프를 이용해 값을 안전하게 다룰 수 있음

• 모듈화

  • 함수의 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것
  • 함수 하나로 여러 객체를 만들 수 있고 각각의 객체 안에 값은 서로 영향을 끼치지 않고 보존할 수 있음
  • 클로저는 모듈화에 유리

3. 알아두면 좋을 내용

• 자유변수(Free variable): 클로저에 의해 참조되는 외부함수의 변수
• 클로저의 단점: 외부 함수 스코프가 내부 함수에 의해 언제든지 참조될 수 있기 때문에 클로저 패턴에서는 메모리 상에 남아 있어 가비지 컬렉션의 대상이 되지 않으므로 클로저를 너무 많이 사용하는 경우 퍼포먼스 저하 발생 가능성 있음
• 즉시 실행 함수 표현식(IIFE): 정의되자마자 즉시 실행되는 Javascript 함수로 이름이 없어도, 즉시 호출도 가능
  • 형식: (function(){})()
    mdn-IIFE
    javascript.info-IIFE
    

<참조사이트>
mdn-closure
poiemaweb-closure

ES6 주요 문법

1. spread/rest 문법

• spread 문법: 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용
• rest 문법: 파라미터를 배열의 형태로 받아서 사용 가능, 파라미터의 개수가 가변적일 때 유용

  • 사용 예시
    • 배열에서 사용하기(spread문법은 기존 배열 변경x)
      1. 배열 합치기
      2. 배열 복사
    • 객체에서 사용하기
      • 만약 두 객체의 키가 같을 경우 값을 합치면 값이 덮어 씌워짐
    • 함수에서 나머지 파라미터 받아오기

2. 구조분해할당

• 구조 분해 할당의 정의
  • 분해 후 새 변수에 할당 -> 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 JavaScript 표현식
• 객체에서 구조 분해 할당 사용 시, 선언과 함께 사용하지 않으면 에러가 발생할 수 있는데 이는 객체가 객체가 아닌 블록으로 간주되기 때문
• 만약 선언 없이 구조 분해 할당을 하고 싶다면 () 로 전체를 감싸야 함
  구조 분해 할당

3. 참고할 만한 내용

• Math.max 메서드: 숫자인 인자들을 비교하여 가장 큰 수 반환

<오늘의 다짐>
이번에 자바스크립트를 공부하면서 특히나 몰랐던 개념이 등장해 어렵기도 했지만 하나하나 이해하려고 노력하다보면서 새로운 개념을 배울 수 있어 흥미로운 시간을 보냈다. 이제는 더욱더 내가 몰랐던 개념들이 많이 등장할텐데 앞으로의 시간들이 걱정도 되면서 또 한편으로는 기대가 되기도 한다.
앞으로 남은 기간동안, 그리고 부트캠프가 끝난 이후에도 계속 새로운 배움을 기대하는 마음을 가져가기 위해 남들과 비교하지 않고 나만의 속도를 찾아 잘 유지하며 꾸준히 성장해야겠다.