SEB[JS/Node : 핵심개념, 문법]

Jogi's 코딩 일기장·2021년 7월 2일

부트캠프 18일차가 된 날이다. 오늘은 JS/Node의 핵심개념들과 문법들에 대해서 공부를 했다. 전에는 가볍게 알아보는 수준이었다면, 오늘은 조금 더 깊이 파고들어 학습을 하는 시간을 가졌다. 오늘 배운 개념들을 복습할 겸 정리를 시작해보겠다.

원시자료형과 참조자료형

일단 고정된 저장 공간을 차지하는 데이터는 모두 원시 타입(primitive) 데이터라고 생각하자!

원시 자료형

javascript에서 원시 타입의 데이터는 객체가 아니면서 메소드를 가지지 않는 6가지 타입을 말한다.
string, number, bigint, boolean, undefined, symbol이 있는데 여기에는 null도 끼워줄 수도 있겠다. 저 6가지는 typeof를 통해 검사하면 저대로 출력이 되나 null은 object로 출력이 된다. 하지만 동작은 원시타입과 비슷하기 때문에 끼워줄 수도 있다.

모두 하나의 정보(데이터)를 담고 있다. 즉, 변수에는 하나의 데이터만 보관이 가능하다.
원시 자료형이 보관함인 변수에는 하나의 원시자료형만 들어갈 수 있다. 이는 참조자료형과 구분되는 특징히다.

참조 자료형

JS에서 원시 자료형이 아닌 것은 모두 참조 자료형이다.

참조 자료형이 저장되는 특별한 보관함. Heap!

참조 자료형의 변수에는 데이터가 위차한 곳(메모리상 주소)을 가리키는 주소가 저장된다.
heap의 크기는 동적(dynamic) 하게 변한다
데이터는 별도로 관리되고, 변수에는 주소가 저장되기 때문에 refernce type이라고 한다.

heap이 동적으로 크기가 변하는 이유

대량의 데이터가 들어오는 경우, 고정된 데이터를 사용하는 것은 비효율적이다.
데이터가 언제 늘어나고 줄어들지 모르기 때문에 별도의 저장공간을 마련하여 따로 관리한다.

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

할당 시에 원시 자료형은 변수에 값 자체가, 참조 자료형은 주소가 담긴다.
원시 자료형의 보관함 크기는 고정, 참조 자료형은 동적으로 크기가 변한다.

스코프(scope)

'범위'의 의미를 가지고 있다. 더 자세하게 말하면 변수의 유효 범위라고 알면 된다.

스코프와 주요 규칙(변수의 접근 규칙)

변수에는 접근할 수 있는 범위가 존재한다.
여기에서는 중괄호(블록) 안에 선언됐는가, 바깥쪽에서 선언됐는가가 중요하다. 이 범위를 스코프라고 한다.
- 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용가능하다.
- 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능하다.
스코프의 정의와 규칙
- 변수 접근 규칙에 따른 범위
  - 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능하지만, 그 반대는 불가능하다
  - 스코프는 중첩이 가능하다.
  - 가장 바깥쪽 스코프는 전역 스코프(Global Scope) 라고 하고, 그 외에는 지역 스코프(Local Scope)라고 한다.
  - 지역 변수가 전역 변수보다 더 높은 우선순위를 갖는다.

스코프의 종류와 let, var, const 키워드

스코프의 종류

중괄호로 둘러싼 범위(block scope : 블록 스코프)
함수로 둘러싼 범위(function scope : 함수 스코프)

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

블록스코프와 var키워드

let키워드는 for문 안의 변수를 바깥에서 사용하면 ReferenceError가 발생한다.
var키워드는 for문 안의 변수를 바깥에서 사용하면 에러가 발생하지 않는다.
var 키워드는 block scope를 무시하고, function scope만 따른다!

var과 let 키워드

변수를 정의하는 또 다른 키워드가 var이다
- var 키워드는 블록 스코프를 무시하고, 함수 스코프만 따른다.
- 블록 단위로 스코프를 구현했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로, let 키워드를 사용하는 것이 좋다.
- var 키워드를 사용하지 않는다해도, 함수스코프는 let으로 선언된 변수의 접근을 제한한다.
var 키워드보다 let 키워드가 더 안전한 이유
- var 키워드는 재선언을 해도 에러가 없지만, let 키워드는 재선언을 방지한다

const 키워드

변하지 않는 값, 상수(constant) 를 정의할 때 사용한다.
- let 키워드와 동일하게, 블록스코프를 따른다
- 값의 변경을 최소화하여 보다 안전한 프로그램을 만들 수 있다. 값을 새롭게 할당할 일이 없다면 const 키워드를 사용하는 것이 좋다.
- 값을 재할당하는 경우, TypeError가 발생한다.

변수 선언에서 주의할 점

window 객체(browser only)

var로 선언된 전역변수 및 전역함수는 window객체에 속하게 된다. window는 전역영역을 담당한다.
- 브라우저에는 window라는 객체가 존재한다.
  - 브라우저 창을 대표하는 객체
  - 하지만 브라우저 창과 관계없이 전역항목도 담고 있다.

전역변수는 최소화 (side effect를 줄이는 것)

전역변수 : 어디서든 접근 가능한 변수
편리한 대신, 다른 함수 혹은 로직에 의해 의도되지 않는 변경이 발생할 수 있다.

let, const를 주로 사용할 것

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

선언없는 변수 할당 금지

선언 키워드 없이 변수를 할당하면 안된다. 변수를 선언한 적이 없어도, 값을 할당하면 var로 선언된 전역 변수처럼 작동한다.
실수를 방지하기 위해 strict mode를 사용 가능하다. js 파일 상단에 'use strict';를 기재하면 사용 가능하다.

클로저

MDN 정의 : 함수와 함수가 선언된 어휘적(lexical)환경의 조합이라 한다. 하지만 이건 잘 이해가 안된다.
외부함수의 변수에 접근할 수 있는 내부함수라고 생각하면 더 쉽게 생각할 수 있다.

클로저 함수의 특징

함수를 리턴하는 함수. 이것이 클로저의 형태를 만든다.
외부함수의 변수에 접근가능한 내부함수이다.
따라서, 함수를 리턴하는 것만큼이나, 변수가 선언된 곳이 중요하다.

클로저의 활용

데이터를 보존하는 함수
- 일반적인 함수는 함수 실행이 끝나면 함수 내부의 변수를 사용할 수 없지만, 클로저는 외부함수의 실행이 끝나도 외부함수 내 변수가 메모리상에 저장된다.

정보의 접근 제한(캡슐화)
- 클로저 모듈 패턴
```
const makeCounter = () => {
	let value = 0;
   return {
   	increase : () => {
       	value += 1;
       }
       decrease : () => {
       	value -= 1;
       }
       getVakye : () => value;
   }
}
const counter1 = makeCounter();
```
  여기에서 value라는 변수에 값을 새롭게 할당할 수는 없을 것이다. 이는 스코프 규칙에 의해, 어떤 경우에도 value는 직접수정이 불가능하기 때문이다. 대신, 리턴하는 객체가 제공하는 메소드를 통해 value 값을 간접적으로 조작가능하다.
모듈화
- 재활용 가능한 makeCount 함수(위를 예시로). 여러 개의 counter를 만들 수 있다.
- 함수의 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품형태로 분리하는 것을 모듈화라고 한다.
- 클로저를 통해 데이터와 메소드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.

Spread / Rest 문법

spread/rest 문법

Spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.

function sum(x,y,z) {
	return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers);  // 6을 리턴

Rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다.

function sum(...theArgs) {
	return theArgs.reduce((pre, cur) => {
    	return pre + cur;
    });
}
sum(1,2,3);  // 6을 리턴
sum(1,2,3,4); // 10을 리턴

배열에서 사용하기

Spread 문법은 배열에서 강력하다. 하지만 기존 배열을 변경하지 않아 immutable하다.

배열 합치기

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];  // arr1 : [0, 1, 2, 3, 4,  5]

배열 복사

let arr1 = [0, 1, 2];
let arr2 = [...arr1];
arr2.push(4); // arr1 : [0, 1, 2], arr2 : [0, 1, 2, 4]

객체에서 사용하기

  let obj1 = {foo : 'bar', x : 42};
  let obj2 = {foo : 'baz', y : 13};
  let clonedObj = {...obj1};  // {foo : 'bar', x : 42}
  let mergedObj = {...obj1, ...obj2}; // {foo : 'baz', x : 42, y : 13};

함수에서 나머지 파라미터 받아오기

  function myfun(a, b, ...args) {
  	console.log('a, ' + a);
    console.log('b, ' + b);
    console.log('args, ' + args);
  }
  myfun('one', 'two', 'three', 'four', 'five');
  // a, one
  // b, two
  // args, ['three', 'four', 'five'] <- 배열의 형태로

구조분해(Destructing)

구조 분해 할당은 spread 문법을 활용해서 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정이다.

분해 후 새 변수에 할당

배열

const[a, b, ...rest] = [10, 20, 30, 40 ,50];
// a : 10, b : 20, rest : [30, 40, 50]

객체
```
const{a, b, ...rest} = {a : 10, b : 20, c : 30, d : 40};
//  a : 10, b : 20, rest : {c : 30, d : 40} 
```
여기에서 const 안의 ab, cd라면 ab, cd는 undefined고, rest가 {a : 10, b : 20, c : 30, d : 40}가 된다.

이번 챕터와 3주차를 마치며...

이번 챕터는 JS/Node의 핵심개념과 문법에 대해 알아봤다. 분명 쉬운 부분도 있었고 어려운 부분이 존재했다. 특히 구조분해를 하는 부분에서 객체에 대한 것이었는데 잘 배웠다고 생각했는데 실습을 해보니 엉망진창이었다. 이는 내가 조금 더 보완을 해야할 것 같다. 그리고 이번 주는 css도 더 깊게 해보는 시간을 가졌는데 특히 나는 CSS로 레이아웃을 구성하는 것을 어려워했던 것 같다. 많이 사용해보지도 못했고. 뭔가 구성하는데 있어서 내가 잘 생각을 못해내는건지, 제대로 하지 않은건지 많이 어려움을 겪었다. 이번 주 챕터를 하면서 느낀 것은 내가 어려워 하는 것들은 확실히 경험해보지 못하고, 많이 사용하지 않았던 것에서 나왔었다. 그러므로 나는 이를 극복하기 위해 더 경험하고, 실습같은 것을 더 하면서 많이 사용하면서 사용방법을 익혀야 될 것 같다. 이번 주는 정말 모르는 부분이 꽤 많았던 주였다. 앞으로더 더 많이 모르는 것들이 많이 나올텐데 기죽지 말고 내껄로 잘 만들어보자..!

Reference

코드스테이츠(CodeStates) 강의자료

Jogi's 코딩 일기장

프로그래머로서의 한걸음

이전 포스트

SEB([CSS] 레이아웃)

다음 포스트