원시값, 객체값, 스코프

원시값

• 변경이 불가능한 값
  • 생성된 원시값은 읽기 전용이라 변경이 불가능하다.
• 변수에 할당될 때 값 자체가 변수에 저장된다.
• Number, String, null, boolean, undefined 등의 데이터 타입을 뜻한다.
• 재할당 외에는 변수 내에 값을 변경할 수 있는 방법이 없다.

var origin = 10;
var copy = origin;

console.log(origin, copy); // 1번 콘솔
copy = 20;
console.log(origin, copy); // 2번 콘솔

• 1번 콘솔: 10과 10이 출력된다.
• 2번 콘솔: 20과 20이 출력된다.
• 원시값은 서로 다른 메모리 공간에 저장되기 때문에 어느 한 쪽에서 재할당을 해도 서로 간섭이 불가하다.
• 변수안에 할당된 원시값의 주소가 10이라는 값의 주소에서 20이라는 값의 주소를 가리키는 것으로 바뀌는거지 실제 값이 바뀌는 것이 아니다.

객체값

• 여러 property를 가질 수 있으며, key와 value를 가진다.
• 객체는 변수에 참조된다.
• 즉, 변수에는 객체의 주소가 저장된다.
• 객체의 프로퍼티를 읽거나 변경할 때, 주소를 사용한다.

var student = {
  name: "Jay",
  age: 16,
};

var copied = student;
copied.name = "Young";

console.log(student.name); // 1번 콘솔
console.log(student === copied); // 2번 콘솔

• 1번 콘솔: Young이 출력된다.
• 2번 콘솔: True가 출력된다.
• student와 copied에는 같은 주소를 가리키는 객체가 저장된다.
• 같은 주소에 프로퍼티를 변경했기 때문에 copied.name의 value를 바꾸면 student.name도 함께 변경된다.
• 객체를 비교할 때는 값이 아닌 참조 즉, 주소를 비교한다.

차이

let g = 10;
let h = 10;

let gam = [1, 2, "a"];
let ham = [1, 2, "a"];

console.log(g === h); // 1번 콘솔
console.log(gam === ham); // 2번 콘솔

• 1번 콘솔: 원시값 비교 → 값을 비교하기 때문에 true 출력
• 2번 콘솔: 객체값 비교 → 주소를 비교하기 때문에 false 출력
• 원시값은 10이라는 같은 값을 비교하기 때문에 true이다.
• 객체는 gam과 ham내에 프로퍼티가 같다고 해도 서로 다른 주소에 객체가 생성된 것이기 때문에 false이다.

스코프

• 변수와 함수의 유효 범위를 나타내는 개념
• 코드 내에서 변수나 함수의 이름을 참조할 때 해당 이름이 유효한 범위를 결정
• 스코프를 이해해야 이름 충돌을 방지할 수 있고, 코드의 가독성 및 유지 보수성 증가

변수의 선언 위치로 스코프 결정

• 전역 스코프: 어디서든 참조 가능한 전역 변수로 사용 가능
• 지역 스코프: 특정 지역 안에서 선언한 변수는 지역 밖에서는 유효하지 않음
• 동일한 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 동일한 이름의 식별자 사용 가능
• 블록 스코프: for, if같이 블록으로 감싸있는 함수를 뜻함

let global = "global";

function jay() {
let local = "local";
console.log(global); // 1번 콘솔
console.log(local); // 2번 콘솔
}

jay(); // 1, 2번 콘솔 출력

console.log(global); // 3번 콘솔
console.log(local); // 4번 콘솔

• 1번 콘솔: global은 전역 스코프로 어디서든 참조가 가능하여 “global”출력
• 2번 콘솔: local은 지역 스코프로 해당 함수 내에서 참조가 가능하기 때문에 jay(); 에서 참조 가능 → “local”출력
• 3번 콘솔: global은 전역 스코프라 함수 밖에서도 “global”출력
• 4번 콘솔: local은 지역 스코프라 지역 밖에서는 유효하지 않기 때문에 undefined

우선순위

const number = 10;

function zzalng() {
  const number = 20;
  console.log(number); // 1번 콘솔 
}

zzalng(); // 1번 콘솔 출력
 
console.log(number); // 2번 콘솔 

• 1번 콘솔: number가 전역과 지역에 모두 존재하지만 지역 내에서는 지역 스코프의 우선 순위가 높기 때문에 20을 출력
• 2번 콘솔: 함수 내에서 선언한 number는 밖에서는 참조할 수 없기 때문에 전역 변수 number 값 10을 출력
• 지역 스코프의 우선순위가 더 높다.