원시 자료형, 참조 자료형

JS를 처음 배울때 데이터 type에 관한 내용을 배운적이 있다.
string, number, boolean, array, object.... 여러가지 type에 대해 배웠는데
이들을 또 2가지의 큰 분류로 나눌 수 있다는 걸 알게 되었다.

1. 원시 자료형

primitive data types에는 우리가 자주쓰이는 것으로 5가지가 있다

string, number, boolean, undefined, null

primitive type은 모두 하나의 정보만을 담고 있다.

let a = 'name';
let b = 3;
let c = true;
let d = undefined;

이렇게 데이터를 변수에 할당하게 되면,
value를 저장할 수 있는 사물함 칸 마다 a,b,c,d라는 이름이 붙게되고,
이름표가 붙은 사물함에 해당되는 'name, 3, true, undefined의 데이터가 각각 저장된다.

2. 참조 자료형

reference data types에는 대표 3인방이 있다.

array([]), object({}), function

이들의 공통점은 많은양의 데이터를 활용하는데 용이한 데이터 타입이라는 것이다.
즉 primitive type과는 다르게 여러 데이터가 담기게 된다.

const colors = ['Blue', 'Green', 'Red', 'Pink']; 
const person = {
  name: 'Daekuen',
  age: 34
  nation: 'korea'
  city: seoul
}

때문에 이들은 정해진 크기의 사물함에 저장되는 것이 아니고,
데이터의 양에 따라 사물함의 크기도 달라지는, 즉 dynamic한 저장소가 필요하다.
dynamic한 저장소를 heap이라 칭하며 이 곳에 reference type이 저장되게 된다.

reference type은 데이터가 위치한 곳을 가리키는 주소가 변수에 저장된다.
주소로 인해 데이터 cloning을 할 경우 원시 자료형과 참조 자료형간에 차이가 발생한다.

변수간에 primitive type 데이터를 복사 할 경우,
데이터 값이 복사 되기 때문에 기존 데이터에 영향이 가지 않는다.

let a =1;
let b=a;
b=2

console.log(a); // output = 1
console.log(b); // output = 2

하지만 reference type 데이터는 복사 할 경우,
주소를 복사하게 된다, 때문에 복사한 데이터에서 원소를 변경하게 된다면.
주소안의 데이터가 바뀌게 되고, 같은 주소를 사용하기 때문에 기존 데이터에 영향을 주게 된다.

let e = [10, 20, 30];
let f = e;  // e와 f는 동일한 reference 를 가지게 된다.
f[0] = 50;

console.log(e); // output[50, 20, 30]
console.log(f); // output[50, 20, 30]

Scope

scope의 사전적의 의미는 '범위'이다. 컴퓨터 공학, JS에서도 범위를 뜻한다.

Block scope와 Function scope

• Block scope

변수 unsername은 중괄호 {} 밖에서 선언이 되었고,
변수 message는 중괄호 {} 안에서 선언이 되었다.
cosole.log(message)를 괄호 안에서 실행했을 땐 잘 되지만, 괄호 밖에서는 에러가 발생.
이는 변수 message는 중괄호 안에서 사용 가능하지만, 밖에서는 사용 할 수 없기 때문이다.
이렇게 중괄호 {}를 기준으로 범위가 나뉘는 것을 block scope라 한다.

let username = 'Messi';
if (username) {
  let message = `Hello, ${username}!`;
  console.log(message); // output 'Hello, Messi!'
}

console.log(message); // output ReferenceError

• Function scope
  변수 greeting은 함수 greetSomeone 밖에서 선언이 되었고,
  변수 firstName은 함수 greetSomeone안에서 선언이 되었다.
  cosole.log(greetSomeone)으로 함수를 실행했을 때, return 값이 잘 나오는 걸 확인할 수 있다.
  하지만 console.log(firstName)의 경우 에러가 발생하는데,
  이는 함수에 의해 범위가 나뉘어 졌으므로 함수 밖에서 변수 firstName은 사용할 수 없다.
  이렇게 함수에 의해 범위가 나뉘어 지는 것을 function scope라 한다.

let greeting = 'Hello';
function greetSomeone() {
  let firstName = 'Son';
  return greeting + ' ' + firstName;
}

console.log(greetSomeone()); // output 'Hello Son'
console.log(firstName); // output ReferenceError

Grobal scope와 Local scope

가장 바깥쪽의 scope를 전역 스코프 (grobal scope),
그 안에 형성된 scope를 모드 지역 스코프 (local scope)라 한다.
정말 이해하기 좋은 그림이기에 공부 자료에서 가져왔다. codestate에게 양해의 말씀...감사합니다.

• 안에서는 밖을 볼 수 있지만 밖에서는 안을 볼 수 없다.
  스코프를 설명 할 때 가장 쉽고 명확한 말인거 같다.
  전역 스코프에서는 로컬 스코프에서 선언된 변수를 사용 할 수 없지만,
  로컬 스코프에서는 전역 스코프에서 선언된 변수를 사용 할 수 있기 때문!.

부족한 점...

음.. 자료형의 종류와 , 스코프에 대해서 이전에 혼자 공부한적은 있지만 정확하게 알게 된거 같아 좋음.
그러나 클로저 라는 개념이 아직 정확하게 이해가 되지 않았다.
오늘 클로저에 대해서도 배웠지만 다시 한번 따로 공부하고 이해한 뒤에 포스팅하도록 하겠다.