오늘 배운 것

1. Data type

자바스크립트에서 변수는 데이터를 두 타입으로 나누어 저장하는데, 하나는 Primitive type(원시 타입) 다른 하나는 Reference type(참조 타입)이다.

A. Primitive type

원시 타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을 보관한다.

숫자, 문자열, Boolean, Null, Undefined와 같은 값이 Primitive type에 속한다.

let x = 2;
let y = x;
y = 3;

console.log(x);		

// 정답은 2다. 
// 변수 y에 x가 할당되었는데, 
// 이 때 y에는 x 변수 자체가 아니라 
// x에 저장되어 있는 2라는 데이터 값이 할당된 것이기 때문에,
// y에 다른 값을 할당하여도 x의 값에는 변화가 없다.

B. Reference type

참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다.

Object(Object, Array, Function)가 Reference type에 속한다.

let x = [1, 2, 3, 4];
let y = x;
y.push(5);

console.log(x);

// 정답은 [1, 2, 3, 4, 5]다. 
// 마찬가지로 변수 y에 x가 할당되었는데,
// 이 때 y에 x배열의 데이터 자체가 아니라, 데이터가 저장되어 있는 참조 값이 할당된다.
// 결국 x와 y는 데이터가 저장되어 있는 같은 참조 값을 공유하고 있는 것이며,
// y 변수에 대해 push 메소드를 이용해 데이터를 변형시키면, 
// 이 값을 함께 공유하고 있는 x에도 영향을 미치게 된다. 

2. Spread operator & Rest parameter

A. Spread operator

Spread operator는 배열 또는 객체 앞에 ...을 붙여 사용하며, 대상 배열 또는 객체를 개별 요소로 분리한다.

-예제 1

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes'];

console.log(lyrics);

// ["head", "shoulders", "knees", "and", "toes"]
// 배열 ['shoulders', 'knees']의 각 요소가 분리되어 lyrics 배열에 추가 되었다.


-예제 2

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; 

console.log(arr1) 

// [0, 1, 2, 3, 4, 5]

B. Rest parameter

Rest parameter는 Spread 연산자를 사용하여 함수의 파라미터를 작성한 형태를 말한다.

Rest parameter를 사용하면 파라미터의 값을 배열로 전달받게 된다.

-예제 1

function myFun(a, b, ...manyMoreArgs) {
  console.log(a); 
  console.log(b);
  console.log(manyMoreArgs);
}

myFun("one", "two", "three", "four", "five");

// one
// two
// [three, four, five]	

//	파라미터가 배열 값으로 전달된 것을 알 수 있다.


-예제 2

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}

var arr = multiply(2, 1, 2, 3); 
console.log(arr); // [2, 4, 6]

// 파라미터가 배열 값으로 전달되기 때문에 map, reduce등 배열 메소드를 사용할 수 있다.

오늘 하루

1. 간만에 자전거 말고 런닝! 허벅지 아프다..
2. 코드스테이츠 IM 18기 데모데이를 유튜브로 봤다. 나도 몇 개월 뒤면 저렇게 웹을 만들 수 있을까.. 두렵기도 기대도 된다. 그나저나 기업협업하면 재밌을 것 같다!!
3. https://www.freecodecamp.org/learn 자바스크립트 문제모음.