[JS/Node] 핵심 개념과 주요 문법

hosik kim·2021년 9월 15일
0

With CodeStates

목록 보기
34/45
post-thumbnail

💡원시 자료형


: primitive date types

📌개념 및 종류

개념

  • JavaScript 에서 원시 자료형 혹은 원시 값이라고 한다.
  • 객체가 아니면서 메소드도 가지지 않는 데이터
  • 모든 원시 값은 불변하여 변형이 불가하다.
  • 모두 하나의 정보, 즉 데이터를 담고 있다.

종류

1. String
2. Number
3. BigInt
4. Boolean
5. undefined
6. Symbol
7. null

원시 자료형 명칭의 유래

  • 아주 초창기에 코드를 어떻게 작상하였는지를 돌아보면, 그 때는 데이터 저상소(메모리)의 용량이 제한되어 변수 하나에
    데이터 용량이 제한된 하나의 자료밖에 담을 수 없었다.
  • String 을 포함한 7가지 자료형태들이 변수 하나에 하나의 데이터를 담는 것은 원시적인 시대에 사용되던 형태에 해당하므로
    원시 자료형이라는 명칭이 붙음

원시 값과 할당한 변수

  • 혼동하면 안된다.
  • 원시 자료형의 경우, 변수에 데이터의 크기와 관계 없이 하나의 데이터만 담을 수 있다.
  • 원시 값은 값 자체에 대한 변경이 불가능하지만, 변수는 새로운 값을 다시 할당할 수 있다.

변수와 데이터

  • 원시 자료형은 변수에 하나의 데이터만 담는다.
  • 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.

💡참조 자료형


: Reference data types

📌개념 및 종류

개념

  • 원시 자료형에 해당하지 않는 것은 모두 참조 자료형이다.
  • 원시형 데이터의 집합
  • 데이터의 크기가 정해져 있지 않다.
  • 변수에 할당할 때에는 변수에 값이 아닌 데이터에 대한 참조(주소)를 저장한다.

종류

1. 배열 : [ ]
2. 객체 : { }
3. 함수 : function( ) { }

배열의 시초

  • 컴퓨터가 처음 사용되던 시기에는 배열, 즉 리스트라는 개념을 구현하기 어려웠다.
  • 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현하기 시작
    ex) csv(comma-seperated values)

💡 Primitive & Reference CheckPoint


☑️문제 1

  • 코드가 실행된 후, x의 값은 무엇일까?
let x = 2;
let y = x;
y = 3;
// x = 2;

풀이

  • 원시 자료형을 할당하는 경우, 값 자체를 변수에 할당한다.
  • 즉, 값을 복사하여 변수에다가 저장한다고 생각하면된다.
  • 변수 x 를 변수 y 에 할당하는 경우, 변수 x 값인 2가 y 에 복사되어 할당되고 이후 3이 할당된 것이다
  • 따라서 x = 2, y = 3

☑️문제 2

  • 코드가 실행된 후, x.foo의 값은 무엇일까?
let x = { foo: 3 };
let y = x;
y.foo = 2;
// x.foo = 2;

풀이

  • 원시 자료형이 아닌 것은 모두 참조 자료형이며, 대표적으로 배열, 객체, 함수가 있다.
  • 참조 자료형을 할당하는 경우, 변수에 데이터가 저장되는 곳의 주소를 할당한다.
  • 변수 x 를 변수 y 에 할당하는 경우, 변수 x 값인 {foo: 3} 의 주소를 y에 할당한다.
  • 따라서 변수 x 와 변수 y 는 같은 주소를 참조하므로, y.foo 가 2가 되면 x.foo도 2가된다.

☑️문제 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 이라는 별도의 메모리 저장 공간을 사용한다.
  • 참조 자료형의 경우, 컴퓨터가 코드를 읽으면서 이미 두 개의 heap 저장 공간의 주소를 확보해두므로 엄격한 동등 비교(===)시
    같을 수가 없다.

☑️문제 4

  • 코드가 실행된 후, x.foo의 값은?
let x = { foo: 3 };
let y = x;
y = 2;
//x.foo = 3

풀이

  • 변수 y 에 x 의 주소값을 할당하고나서 2를 할당한 경우, 참조 자료형에는 영향이 없으므로 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 의 주소값은 같으므로, 동일하게 [2, 3, 25, 5] 로 바뀐다.
  • ourArray 에 undefined 를 할당한 경우, 원시 자료형을 할당한 것이므로 기존의 ourArray 는 변경되는 부분이 없으므로 [2, 3, 25, 5]

☑️문제 6

  • 코드가 실행된 후, player.score 의 값은?
let player = { score: 3 };
function doStuff(obj) { 
  obj.score = 2;
}

doStuff(player); 
//player.score = 2

풀이

  • 함수 doStuff 에 변수 player 를 인자로 전달하여 호출(실행)
  • 함수가 호출(실행)되면 매개변수 obj 에 변수 player 값이 할당
  • 즉, { score: 3 } 의 주소값이 할당되는 되는 것이다.
  • obj.score 에 2를 할당하면, obj 와 player 는 같은 주소값을 가지고 있으므로 player.score 도 2가 된다.

☑️문제 7

  • 코드가 실행된 후, score 의 값은?
let score = 80;
function doStuff(value) {
  value = 90;
}

doStuff(score);
// score = 80

풀이

  • 함수 doStuff 에 score 의 값을 인자로 전달하여 호출(실행)
  • 매개변수 value 에 score 의 값 80 전달
  • value = 90 에서 value 에 90 할당
  • score 의 값 80 은 참조 자료형이 아니기 때문에 주소값을 전달하지 않고, 값 자체를 복사하여 전달
  • 함수 doStuff 에서 어떤 일이 발생했든 상관 없이 score 는 초기 할당값인 80 유지
profile
안되면 될 때까지👌

0개의 댓글