코드스테이츠 소프트웨어엔지지어링 부트캠프 +17일

오늘은 많은 개념을 배웠다.

1.  원시자료형과 참조자료형

1-1. symbol

2.  스코프

3.  클로저

 

원시자료형과 참조자료형의 차이

원시자료형은 값을 저장하고 값을 복사하기 때문에 원본에 영향이 없다.

boolean, number, string, null, undefined, symbol이 있다.

let a = 3;
let b= a; //b에 a의 값을 복사한다.
a //a = 3
b //b = 3

b=2; //b에 2할당해도
a //a의 값은 여전히 3이다.

애초에 변수 b에는 변수 a의 값인 3이 복사되었기 때문에 나중에 변수 b에 2를 할당하는 것은 변수 a 와 관련이없다.

 

참조자료형은 주소를 저장하고 주소를 복사하기 때문에 원본에 영향이 간다.

let a = [3,1,2]
let b = a //변수 b에 배열 a의 주소가 할당된다.
b // b = [3,1,2]
b[1] = 'hello' //b에 복사된 배열 a의 주소에 들어있는 값을 바꾸게 된다.
b // [3,'hello',2]
a // [3,'hello',2] // b[1]에 'hello'를 할당했지만, b에 할당된 것은 배열 a의 주소였기 때문에 배열 a 역시 수정되었다.

변수 b에 배열 a의 주소가 할당된다.

변수 b[1]의 값을 바꾸면 변수b에 복사되어 있는 배열 a의 주소에 들어있는 값을 바꾸게 되는 것이다.

따라서 a[1]도 변경되고, 배열 a가 [3,1,2]에서 [3,'hello',2]로 변경된다.

 

Symbol : 변경이 불가능한  원시타입

아래 홈페이지를 보고 공부를 했지만 Symbol.iterator를 완벽히 이해하지 못했다.

Symbol을 공부하기 좋게 정리해 놓은 글이라 공유함.

https://poiemaweb.com/es6-symbol

Symbol | PoiemaWeb

Symbol은 3가지 방법으로 생성할 수 있다.

1. Symbol() : 호출될때마다 매번 다른 Symbol 값을 생성한다.

let aa = Symbol('hello')

console.log(aa===Symbol('hello') //false
//Symbol은 유일한 값이다.

2. Symbol.for() : 인자로 전달받은 문자열을 키로 사용하여 Symbol값을 검색한다. Symbol이 검색되면 검색된 Symbol값을 반환하고 검색되지 않으면 새로운 Symbol 값을 생성하여 해당 키로 전역 Symbol 레지스트리에 저장한 후, Symbol 값을 반환한다.

const a1 = Symbol.for('hi')
//전역 Symbol 레지스트리에 'hi'라는 키로 저장된 Symbol이 없으면 새로운 Symbol 생성
const a2 = Symbol.for('hi')
//전역 Symbol 레지스트리에 'hi'라는 키로 저장된 Symbol이 있기에 해당 Symbol을 반환한다.

console.log(a1 === a2); // ture

Symbol 함수믄 매번 다른 Symbol 값을 생성하는 것에 반해, Symbol.for 메소드는 하나의 Symbol을 생성하여 여러 모듈이 키를 통해 같은 Symbol을 공유 할 수 있게 한다. Symbol.for 메서드를 통해 생성된 Symbol 값은 반드시 키를 갖는다. 반면 Symbol함수를 통해 생성된 Symbol 값은 키가 없다.

 

3. Symbol.iterator : iterator는 순회 가능한 자료 구조인 iterable 요소를 탐색하기 위한 포인터로서 value, done 프로퍼티를 갖는 객체를 반환하는 next() 함수를 메소드로 갖는 객체이다. next() 메소드를 통해 객체를 순회할 수 있다.

//Symbol.iterator를 프로퍼티 key로 사용한 메소드를 구현해야 함.
//배열에는 Array.prototype[Symbol.iterator] 메소드가 구현되어 있음
const iterable = ['a','b','c']

//iterable의 Symbol.iterator를 프로퍼티 key 로 사용한 메소드는 iterator를 반환한다.
const iterator = iterable[Symbol.iterator]();

//이터레이터는 순회 가능한 자료 구조인 이터러블의 요소를 탐색하기 위한 포인터로서 
//value, done 프로퍼티를 갖는 객체를 반환하는 next() 함수를 메소드로 갖는 객체이다. 
//이터레이터의 next() 메소드를 통해 이터러블 객체를 순회할 수 있다.
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

 

 

스코프 : 변수의 접근규칙에 따른 유효범위

https://wnsdufdl.tistory.com/39

JS : 변수의 유효범위 Scope, 지역변수와 전역변수

https://wnsdufdl.tistory.com/40

JS : 선언자 let, const가 var보다 권장되는 이유

 

클로저 : 클로저를 통해 불필요한 전역변수 사용을 줄이고 변수 값을 보다 안전하게 다룰 수 있음

클로저 정의 : 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 

라고 하는데 우선 나는 '함수를 리턴하는 함수가 있을때 내부함수가 외부함수의 변수에 접근할 수 있으면 그 내부함수를 클로저라고 함' 라고 정리해놓았다.

https://wnsdufdl.tistory.com/41

js 클로저