SMALL
1. JavaScript에서 데이터를 나타내는 2가지 방법
JavaScript에서 데이터를 나타내는 두 가지 주요 유형이 있습니다.
바로 '기본 타입'과 '객체'입니다. 각각의 특징과 차이를 살펴보겠습니다.
|
|
| 간단히 말해, 원시값은 단순한 값이며 변경되지 않는 반면, 객체값은 복합적인 데이터 구조를 갖고 있고 직접 변경될 수 있습니다. 이러한 차이로 인해 원시값은 값에 의한 복사가 일어나고, 객체값은 참조에 의한 복사가 일어납니다. |
2. 기본 타입( Primitive Type )
- 래퍼 객체(Wrapper Objects):
JavaScript에서 기본 타입에는 해당하는 래퍼 객체가 있습니다.
이 래퍼 객체들은 해당 기본 타입의 값에 접근하여 프로퍼티나 메서드를 사용할 수 있도록 합니다.
예를 들어, 문자열의 경우 String 객체가 그 역할을 합니다.
|
const str1 = 'apple'; // 기본 타입인 문자열 const str2 = new String('apple'); // 문자열을 감싼 래퍼 객체 console.log(typeof str1); // 출력: "string" console.log(typeof str2); // 출력: "object" console.log(str1.length); // 출력: 5 console.log(str2.length); // 출력: 5 |
| 하지만 주로 기본 타입을 래퍼 객체로 변환하는 것은 권장되지 않습니다. 왜냐하면 이는 불필요한 오버헤드를 초래하고 코드를 복잡하게 만들 수 있기 때문입니다. 따라서 보통은 기본 타입을 그대로 사용하는 것이 더 효율적입니다. |
- 래퍼 객체 예시:
- string -> String
- number -> Number
- bigint -> BigInt
- boolen -> Boolean
- symbol -> Symbol
3. 원시값과 객체값 비교
- 원시값
|
<body>
<h2> 원시값 </h2> <script>
// 원시값: 값에 의한 복사 발생
function display(num){
num = 10
console.log(num)
}
const value = 5;
display(value); //10
console.log(value); //5
</script>
</body>
|
- 객체값
|
<script>
// 객체값: 참조에 의한 복사 발생(메모리 주소) function displayObj(obj){
obj.age = 14
console.log(obj)
}
const Rucy = {name: '루시', age: 10};
displayObj(Rucy); // {name: '루시', age: 14}
console.log(Rucy); // {name: '루시', age: 14}
</script>
|
- 새로운 객체를 생성하여 값을 변경
( 객체의 값을 직접 변경하는 것은 좋지 않은 알고리즘 )
|
<script>
function changAge(obj){
return {...obj, age: 14}
}
// {...obj}: obj 객체의 모든 속성을 새로운 객체에 복사합니다 // age:14 : 새로운 객체에 age 속성을 추가하고 값을 14로 설정합니다. const Rucy={name:'루시', age:10};
Ppomi=changeAge(Rucy);
console.log(Ppomi);
// {name:'루시', age: 14} </script>
|
|
return { ..[복사야할 object], [변환값 입력]}
|
4. 동등 연산자(===)로 비교
- 기본 타입으로 생성된 변수와 new 키워드를 사용하여 명시적으로 생성된 .wrapper 객체는 서로 타입이 다름
|
'JavaScript' === 'JavaScript' // true 'JavaScript' === new String('JavaScript') // false let num1=10; let num2=new Number(10); num1===num2 // false |
'Web > JavaScript' 카테고리의 다른 글
| 11. 이벤트(Event) (0) | 2024.04.18 |
|---|---|
| 10. 정규표현식(Regular Expression: Regex) (0) | 2024.04.16 |
| 09. 문서객체모델, 노드(Node) (0) | 2024.04.16 |
| 08. 내장객체 (0) | 2024.04.16 |
| 07. 객체(Object) (0) | 2024.04.16 |
