원시자료형 & 참조자료형

ROCKBELL·2022년 11월 7일

자바스크립트

목록 보기

23/25

원시자료형 & 참조자료형

원시자료형

원시자료형(Primitive) 은 변수 할당시 메모리에는 변수이름과 값이 각각 할당됩니다
타입종류는 String, Number, Boolean, Undefined, Null, Synbol, Bigint 등이 있습니다
원시자료형은 하나의 정보만 담고 있으며, 다른 변수에 재할당할 경우 참조가 되는 것이 아닌 값이 복사가 됩니다

자바스크립트는 동적 언어이기때문에 값의 타입은 언제든지 바꿀 수 있습니다

 let a = 'string'; // string  
 a = 1234 ; // number

Number 타입에는 Infinity, -Infinity, NaN 같은 특수 숙자 값도 포함됩니다

 let a = 1 / 0; // Infinity
 let b = "Hello" / 2 + 5 ; // NaN

Bigint 타입은 정수 끝에 n 을 붙이면 만들 수 있습니다

 const bigInt = 123456789n;
 console.log(typeof bingInt); // bigint;

String 타입은 큰따음표, 작은따음표, 역따옴표(백틱) 모두 가능합니다

const a = 'rockbell89';
const b = "hello";
const c = `hello!, ${name}`;

Boolean 타입은 true 와 false 값을 나타내며, 논리연산자의 피연산자로 주로 사용됩니다

let checkTrue = true;
let checkFalse = false;
let isGreater = 4 > 1; // true

Null 타입은 어느 자료형에도 속하지 않는 값을 말합니다. (존재하지 않는 값 empty)

let age = null;

Undefined 타입은 변수는 선언되었으나 값이 할당되지 않은 상태를 말합니다

let age;

console.log(typeof age); // undefined

참조자료형

참조자료형(Reference) 는 배열,객체 등 데이터가 복잡하기때문에 heep 이라는 별도의 공간을 마련하여, 메모리에는 변수이름과 해당 hepp을 참조하는 주소값을 할당합니다
타입종류는 Array, Object, Function 등이 있습니다
참조자료형은 값이아닌 주소 값을 저장하고 있기때문에 다른 변수에 할당하게 되면 같은 주소를 참조하게 되고, 해당 변수의 내부 값을 변경하게되면 같이 변경되게 됩니다

참조자료형은 동적으로 크기가 변하는 데이터 보관함이 존재합니다 (heep)
참조자료형은 주소를 참조하기때문에, 참조한 객체 속성 값을 변경시 기존 객체 속성 값도 변경된다

let x = { nickname : 'rockbell89', age: 34 }
let y = x;
y.age = 20;

console.log(x.age); // 20

참조한 객체의 속성(배열의 요소) 값이 아닌, 해당 변수 자체의 값을 변경했을 경우에는 해당 객체의 속성(배열의 요소)값을 변경한것이 아니기때문에, 기존 객체(배열) 값은 변하지 않는다

let x = { nickname : 'rockbell89', age: 34 }
let y = x;
y = 20;

console.log(x.age);// 34
console.log(y); // 20

함수도 마찬가지로 매개변수로 객채의 속성 값(배열의 요소)을 변경할 수 있다

let user = {nickname: 'rockbell89'};
function changeNickname(user) {
	user.nickname = 'bongbong89'
}
changeNickname(user);
console.log(user.nickname); // bongbong89

함수의 매개변수가 참조값이 아닌 원시 값을 변경하는 거라면 기존 변수 값은 바뀌지 않는다

let age = 30;
function changeAge(value) {
	value = 20;
    console.log(value); // 20 - 매개변수로 넘겨받은 인자의 값
} 
changeAge(age);
console.log(age); // 30

스코프 (scope)

변수에 접근할 수 있는 범위

블록 스코프 (block scope)

{ } 중괄호로 둘러싼 범위
()=>{} 화살표 함수로 둘러싼 범위 (함수스코프와 다르게 블록스코프로 취급)
var 키워드는 블록 스코프를 무시하고 함수스코프를 따릅니다 - 화살표함수 예외
var키워드는 블록 스코프 기준을 무시하므로, let 키워드 사용 권장
함수 내에서 선언 키워드 없는 선언은, 함수의 실행 전까지 선언되지 않은 것으로 취급

if(true) {
	var nickname = 'ria'
}
console.log(nickname); // ria

if(true){
	let nickname = 'ria'
}

console.log(nickname); // ReferenceError

함수 스코프 (function scope)

함수 내부에 선언한 변수는 해당 함수 내에서만 접근 가능
함수 외부는 global socpe를 가지고, 함수 내부는 자식스코프이기때문에 함수 내부 변수에 접근이 불가능하다
함수가 새로 생성될때마다 새로운 스코프가 발생한다

function showName() {
	var nickname = 'ria';
}

console.log(nickname); // ReferenceError

shadowing

함수밖에서 선언된 변수의 이름과 같은 이름의 변수를 사용하는 경우
함수밖의 변수는 잠시 가려집니다
함수안에서 해당 변수를 사용, 함수 밖의 변수 값은 변하지 않습니다
만약, 값이 유지되어야 하는경우 함수 안에서 선언키워드(var, let, const)를 이용해야합니다.

지역스코프에서 새로 선언되지 않으면 같은 변수로 인식

let nickname = 'rockbell89';
function showNickname(nickname) {
	nickname = 'bongbong89'
    console.log(nickname); // 2) bongbong89
}
console.log(nickname); // 1) rockbell89
showNickname();
console.log(nickname); // 3) bongbong89

let 키워드를 사용 - 지역변수가 우선순위를 가짐

let nickname = 'rockbell89';
function showNickname(nickname) {
	let nickname = 'bongbong89'
    console.log(nickname); // 2) bongbong89
}
console.log(nickname); // 1) rockbell89
showNickname();
console.log(nickname); // 3) rockbell89