[SEB FE] section 1 unit 10 (1) 원시자료형과 참조자료형 + 종합퀴즈

 

 

원시자료형

"hello world!"
"hello codestates!"
// "hello world!" 와 "hello codestates!"는 모두 변경할 수 없는 고정된 값입니다.

let word = "hello world!"
word = "hello codestates!"
// 하지만, word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능합니다.

const num1 = 123;
num1 = 123456789; // 에러 발생
// const 키워드로 선언하면, 재할당은 불가합니다.

• 변수에는 하나의 데이터만 담는다
• string, number, bigint, boolean, undefined, symbol, (null)

let a = 1;
a = b;
b = 2;
a; // ==> 2

 

 

참조자료형

• 크기가 동적으로 변하는 데이터 보관함
• 원시자료형이 할당될 때에는 변수에 값(value)자체가 담기고, 참조 자료형이 할당될 때에는 보관함의 주소(reference)가 담김.
• 그래서 참조자료형은 고정된 크기의 보관함이 아니라 동적으로 크기가 변하는 특별한 보관함 사용
• array, object, function

let e = [10, 20];
lef f = e;
f[0] = 50;
e; // ==> [50, 20]

 

 

 

 

종합퀴즈

3. 다음 코드가 실행된 후, 콘솔에 찍히는 값은 각각 무엇인지 고르세요.

console.log('codestates' === 'codestates');
console.log(3.14 === 3.14);
console.log([1,2,3] === [1,2,3]);
console.log({ foo: 'bar' } === { foo: 'bar' });

답 : true true false false

자바스크립트는 머리를 씁니다. 그러면 메모리에 공간은 내가 알아서 부여하고, 변수는 그 공간의 주소만 참조하도록 하자! 그래서 참조 자료형이 탄생하게 됩니다.

 

값의 크기가 수시로 변하는 것을 처리하기 위해서 참조자료형은 heap이라는 별도의 메모리 저장공간 사용

참조 자료형의 ===(strict equality)는 주소값이 같은지를 확인

console.log([1,2,3] === [1,2,3]);

이 코드를 읽으면서 컴퓨터는 이미 두개의 heap 저장 공간의 주소 확보

미리 주소값과 메모리 값을 잡아둔다 --> [] === [] 도 true 가 나오지 않음

 

 

 

 

4. 다음 코드가 실행된 후, x.foo의 값은 무엇인지 고르세요.

let x = { foo: 3 };
let y = x;
y = 2;

답 : 3

let x = { foo: 3 };
let y = x;				// 여기서 y는 x의 주소값 할당
y = 2;					// 하지만 다시 2를 할당

이 과정에서 참조 자료형 {foo : 3}에는 아무런 영향을 미치지 않았기 때문에

x.foo는 그대로 3

 

 

 

 

5. 다음 코드가 실행된 후, myArray의 값은 무엇인지 고르세요.

let myArray = [2, 3, 4, 5];
let ourArray = myArray;
ourArray[2] = 25;
ourArray = undefined;

답 : [2, 3, 25, 5]

• 변수 ourArray에 myArray의 주소값이 할당
• ourArray 주소값에 위치한 배열의 2번째 요소를 25로 변경
  (ourArray와 myArray의 주소값은 같음으로 현재 myArray는 [2, 3, 25, 5])
• 변수 ourArray에 원시 자료형 undefined가 할당되었기 때문에, myArray에 접근x
  (하지만 myArray는 그대로 [2, 3, 25, 5])

 

 

 

 

6. 다음 코드가 실행된 후, player.score의 값은 무엇인지 고르세요.

let player = { score: 3 };
function doStuff(obj) { 
  obj.score = 2;
}

doStuff(player);

답 : 2

doStuff(player);

• 함수 doStuff에 변수 player를 인자로 전달하여 호출

function doStuff(obj) { 
  obj.score = 2;
}

• 함수가 호출되면 (실행되면) 매개변수 obj에 변수 player의 값이 할당 - { score: 3 }의 주소값
• obj.score에 2를 할당하면, obj와 player는 같은 주소값을 가지고 있기 때문에, player.score도 2

 

 

 

 

 

 

7. 다음 코드가 실행된 후, score 의 값은 무엇인지 고르세요.

let score = 80;
function doStuff(value) {
  value = 90;
}

doStuff(score)

답 : 80

doStuff(score)

함수 doStuff에 score의 값을 인자로 전달하여 실행

function doStuff(value) {
  value = 90;
}

• 매개변수 value에 score의 값 80이 전달되고, value = 90에서 value에 90이 할당
• 다만 변수 score의 값 80은, 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달
• 따라서 함수에서 어떤 일이 발생했던가와 관련이 없이 score는 초기에 할당된 값 80이 그대로 유지