본문 바로가기

JS/JavaScript

16. 기본, 참조 자료형 / 배열 함수 map()

기본 자료형(number, string, boolean)

const num1 = 1; // 기본형
const num2 = number; 
console.log(num2) // 결과: 1

number, string, boolean은 모두 기본 자료형으로, 값을 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다. 

 

 

참조 자료형(배열, 객체)

const person = {
  name : "Kim"
};

const secondPerson = person;

console.log(secondPerson); 
// 결과
//[object Object] {
//  name: "Kim"
//}

person과 같은 값을 출력하지만, 값을 복사한 것이 아니라 객체 person은 메모리에 저장되어 있고,

상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다.

const person = {
  name : "Kim"
};

const secondPerson = person;

person.name = "Lee"

console.log(secondPerson);
// 결과
//[object Object] {
//  name: "Lee"
//}

person의 name 값을 바꾸었는데, secondPerson의 값도 같이 바뀐 것을 알 수 있다. 

위에서 말한 듯, 단지 포인터를 복사했기 때문에 secondPerson에는 값이 복사된 것이 아니라, person을 가리키는 것일 뿐이기 때문이다. 그래서, 이러한 참조자료형의 값을 이런식으로 복사한다면 추후에 오류가 생길 수 있기 때문에, 포인터를 저장하는 것이 아니라 정말 값을 복사하여야 하는데, 이 때 Spread Operator를 사용하여 복사할 수 있다. 

const person = {
  name : "Kim"
};

const secondPerson = {
  ...person
};

person.name = "Lee"

console.log(secondPerson);
// 결과
//[object Object] {
//  name: "Kim"
//}

 


배열 함수 map()

const numbers = [1, 2, 3]; 
const doubleNumArray = numbers.map((num) => {
  return num * 2;
});
// map(): 내장된 배열 함수 메서드, 배열의 각 원소에서 이 함수가 실행됨. 


console.log(numbers)		// 결과: [1,2,3]
console.log(doubleNumArray) // 결과: [4,5,6]

 

'JS > JavaScript' 카테고리의 다른 글

18. 콜백함수  (0) 2023.05.18
17. 배열 내장 함수  (0) 2023.05.18
15. Spread & Rest Operator / Destructuring  (0) 2023.03.25
14. 클래스  (0) 2023.03.24
🥸 To Do List 만들기  (0) 2023.03.08