JavaScript 기초8 자료형(type)과 스코프(scope)

 

 

• 학습 내용 

이번 시간 살펴볼 내용은 두 자료형의 차이와 스코프와 그 범위 그리고 자바스크립트에서 사용하는 변수 키워드들의 차이, 그리고 변수 선언할 때의 주의할 점에 무엇이 있는지이다. 

 

• 원시 자료형(primitive type)과 참조 자료형(reference type)

자바스크립트의 자료형은 크게 원시 자료형(primitive type)과 참조 자료형(reference type)으로 구분된다. 먼저 원시자료형에 대해 살펴보면 원시자료형이 원시자료형으로 불리는 이유는 옛날에 사용하던 코드 작성 방법과 유사하기 때문이다. 원시자료형의 경우 메모리의 한 공간에 하나의 데이터만 담는다. 예를 들어 변수 a를 선언하면 stack이라는 공간에 a라는 이름표를 붙이고 a에 값을 할당하면 그 값이 a라는 이름표가 붙은 메모리 공간에 저장된다.

출처: 코드스테이츠

원시타입 데이터는 이러한 이유로 immutable하다. stack이란 공간에서 재할당은 가능하지만 데이터를 변경하는 것은 불가능하기 때문이다. 만약 새로운 변수에 기존 변수를 할당한다고 하면 그 값을 복사해오지만 두 변수가 연결되는 것은 아니다. 여전히 독립된 공간에 같은 값을 가진 변수로 따로 저장된다. 그래서 둘 사이에 어떠한 영향도 주고받을 수 없다. 예를 들어 위의 a를 새로운 변수 d에 할당해서 a의 값을 d로 가져와 새로운 공간에 담았다고 하자. 그리고 d변수에 다시 4를 재할당하면 a는 여전히 1인 것이다. 서로 영향을 주지 않는다. 이러한 원시자료형에 속하는 타입은 string, number, boolean, undefined, (null)이 있다. 여기에 bigint와 symbol 역시 포함될 수 있다.

 컴퓨터가 처음 사용되던 시절에 구현하기 어려웠던 개념은 배열, 즉 리스트였다. 배열이나 객체의 개수가 무한정으로 늘 수 있기 때문에 그때마다 한 공간씩 부여하기에는 한정적인 메모리가 그 양을 감당하기 어려웠기 때문이다. 또 저장하는 순서나 위치의 변동이 지속적으로 생길 수 있기 때문에 효율이 떨어지는 것 역시 마찬가지였다. 그래서 이것을 해결하기 위해 heap이라는 특별한 공간을 개발했다. heap은 동적(dynamic)으로 변하는 공간이다. 즉, 배열이나 객체를 담기 효과적으로 구현했다. heap은 stack의 이름과 값 대신 주소를 담아 그 주소를 통해 연결된다. 그렇게 하여 heap에는 주소 단위로 데이터를 저장한다. 이러한 방식을 채택하는 자료형이 바로 참조 자료형이다.

출처: 코드스테이츠

이와 같은 방법을 사용하기 때문에 참조타입은 mutable하다. 참조타입의 값에 복사는 주소에 대한 복사이기 때문에 서로 다른 변수가 하나의 주소를 공유하는 상황이 된다. 그래서 주소에 연결된 heap공간에 있는 내용을 변경하면 두 변수의 값이 동일하게 변경되는 것이다. 그래서 두 변수는 서로 영향을 주고받는다.

 

• 스코프(scope)

스코프(scope)는 "범위"라는 의미를 가지고 있다. 더 자세하게 프로그래밍적 요소로 사용되는 의미로는 "변수 접근 규칙에 따른 유효 범위"로 정의할 수 있다. 변수에는 접근할 수 있는 범위가 존재한다. 변수가 중괄호(블록)나 함수 안쪽에 선언되었는지, 바깥쪽에 선언되었는지에 따라 범위가 달라진다. 이런 범위를 스코프라고 한다. 기본적으로 블록이나 함수 안의 스코프의 변수는 밖의 스코프에서 접근할 수 없고, 안쪽 스코프에서는 밖의 변수에 접근할 수 있다.

출처: 코드스테이츠

스코프는 중첩 또한 가능하다. 블록 안에 블록을 함수 안에 함수를 두 개를 교차해서도 당연히 사용이 가능하다. 여기서 가장 밖의 스코프를 전역 스코프(Global Scope)라고 부르고 안쪽의 스코프들을 지역 스코프(local scope)라고 부른다. 

출처: 코드스테이츠

마지막으로 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다는 것이다.

let name = 'Kim';

function showName() {
  let name = 'Lee';
  console.log(name); // Lee
}

console.log(name);  // Kim
showName();
console.log(name); // Kim

 

• let, var, const 키워드 비교

출처: 코드스테이츠

 

• 변수 선언 시 주의할 점

1) var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다. 브라우저에 window라는 객체가 존재하는데, 브라우저 창을 대표하는 객체라고 할 수 있다. 그러나 창과 상관없이 전역 영역을 담고 있다.

2) 전역 변수에 너무 많은 변수 선언을 하면 안 된다. 많이 만들게 되면 side effect(부수 효과)가 생길 수 있는데, 대부분 앱을 만드는 것은 협업으로 이뤄지기 때문에 의도치 않게 이미 선언된 변수에 접근해서 원하지 않는 오류를 낼 수 있다. 이런 문제를 side effect라고 한다. 당연히 전역 변수에 많은 변수 선언을 하게 되면 이런 부수 효과가 커지게 된다. 이런 문제를 방지할 필요가 있다.

3) var 키워드의 단점으로 var는 블록 스코프를 무시하고 재선언을 해도 에러를 내지 않는다. 그리고 var로 선언한 전역 변수가 window기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다. 이러한 실수를 방지하기 위해 Strick Mode를 사용할 수 있는데, Strick Mode는 브라우저가 보다 엄격하게 작동하도록 만들어준다. js파일 상당에 'use strick'이라고 입력하면 Strick Mode를 사용할 수 있다.