(자바스크립트) 참조 자료형, 스코프, 클로저

이제부트 블로깅을 매일 하는 것은 비효율적이라고 생각이들어 공부한 것들을 묶어서 올리려고 한다. 맨날 이거 올리려고 공부 끝나고 30분에서 1시간씩 사용하였는데, 묶어서 하면 그것 보다는 적은 시간이 걸릴 것 같다.

원시 자료형과 참조 자료형

원시 자료형과 참조 자료형은 특징들을 보면서 이해하면 될 것 같다.

원시자료형(number, string, boolean, undefined, null, symbol)
1. 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다.
2. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다.
3. 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다.

참조 자료형(원시 자료형이 아닌 것들 다, 주로 배열과 객체)
1. 참조 자료형을 변수에 할당하면 메모리 공간에 주소값이 저장된다.
2. 참조 값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달된다.
3. 참조 자료형은 변경이 가능한 값(mutable value)이다.

결론적으로 조심해야 할 부분은 참조 자료형인 변수를 다른 참조 자료형에 할당 할 때에 주소값이 복사되어 할당되므로 다른 참조 자료형의 값을 변환하면 원래 참조자료형 값이 변환 된다는 것이다.

let arr1 = [1,2,3];
let arr2 = arr1;
arr2[0] = 3;
console.log(arr1);		//arr1 === [3,2,3]

참조 자료형을 주소값이 아닌 값을 복사 하는 방법은 여러가지가 있다.
얕은 복사: 참조 자료형의 내부의 값에 존재하는 참조 자료형은 값이 아닌 주소값이 복사됨
배열

let copiedarr = slice(arr) 		//slice
let copiedarr = [...arr] 		//spread syntax

객체

let copiedObj = Object.assign({}, obj);		//Object.assign()
let copiedObj = {...obj};					//spread syntax

깊은 복사는 자바스크립트에서 완벽히 구현이 되지는 않았고, 다른 툴을 이용해서 할 수 있기는 하다.

스코프

일단 첫번째로 var은 이용하지 않는 것이 좋다. var은 무조건 전역 스코프가 된다. (파이썬 global인가?)

스코프에서 가장 중요한 문법 사안
1. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다.
2. 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없다.
3. 스코프는 중첩이 가능하다.
4. 우선순위는 내부 스코프의 변수가 높다.

헷갈리는 코드

let name = '유주성';
function showName(){
	let name = '유성은';	//다른 부분
}
showName()
console.log(showName);	//'유주성'

let name = '유주성';
function showName(){
	name = '유성은';		//다른 부분
}
showName()
console.log(showName);	//'유성은'

위 두 코드의 다른 부분은 한 곳 뿐이다. 하지만 출력은 다르게 나오는데 그 이유는 첫 번째는 내부 스코프에 새로운 변수에 '유성은' 을 할당 하는 것이라 내부스코프의 범위에서만 작동하는데, 두 번째는 외부 스코프의 변수 값 자체를 변환하는 것이라 그러하다.

클로저

클로저는 mdn에서는 이렇게 정의한다.

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."

솔직히 이해가 잘 가지 않는다. 하지만 대애애애충 어떻게 써야 할지만 알겠다. 함수 안에 함수를 써서 두개의 변수를 함수에 넣어주는 것을 코드를 분할하여 쓰도록 하는 것이라고 생각해야 겠다.

var e = 10;
    function sum(a){
      return function(b){
        return function(c){
          // 외부 함수 범위 (outer functions scope)
          return function(d){
            // 지역 범위 (local scope)
            return a + b + c + d + e;
          }
        }
      }
    }

    console.log(sum(1)(2)(3)(4)); // log 20

mdn에 클로저를 검색해 가장 먼저 나오는 코드를 가지고 와봤다. 리턴문을 만날 때 마다 sum의 전달인자를 한개씩 넘겨준다고 이해를 했다.

클로저 부분은 잘 이해가 가지 않았는데, 완벽한 이해를 위해서는 코드를 조금 더 접해봐야 겠다는 생각을 했다. 쓸 수야 있겠지만 스코프를 사용한 복잡한 코드가 나왔을 때 이해될 수 있도록 열심히 개발공부를 해야겠다.