JavaScript 데이터 유형에 대한 이해: 원시 및 비원시-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 데이터 유형에 대한 이해: 원시 및 비원시

王林

Sep 03, 2024 pm 09:08 PM

Day nderstanding JavaScript Data Types: Primitive vs. Non-Primitive

JavaScript에서 데이터 유형은 기본 및 비기본(참조) 유형의 두 가지 주요 범주로 나뉩니다. 이러한 구별은 데이터가 메모리에 저장되고 액세스되는 방식을 이해하는 데 필수적입니다. 각 유형을 세분화하여 어떻게 작동하는지 살펴보겠습니다.

기본 데이터 유형

JavaScript에는 7가지 기본 데이터 유형이 있습니다.

문자열

"Hello World"와 같은 텍스트 데이터를 나타냅니다.
숫자

정수와 부동 소수점 숫자(예: 100, 100.3)를 모두 나타냅니다. 다른 언어와 달리 JavaScript는 정수와 부동 소수점을 구분하지 않습니다. 모두 숫자일 뿐입니다.
```
const score = 100;
const scoreValue = 100.3;
console.log(typeof scoreValue); // Output: number
```

부울

논리값(true 또는 false)을 나타냅니다.

const isLoggedIn = true;
console.log(typeof isLoggedIn); // Output: boolean

기호

고유 식별자를 나타냅니다. 동일한 설명으로 두 개의 심볼을 생성하더라도 서로 다릅니다.
```
const id = Symbol('123');
const anotherId = Symbol('123');
console.log(id === anotherId); // Output: false
```

무효

의도적으로 객체 값이 없음을 나타냅니다.

const outsideTemp = null;
console.log(typeof outsideTemp); // Output: object

정의되지 않음

선언되었지만 아직 값이 할당되지 않은 변수를 나타냅니다.
```
let weather;
console.log(typeof weather); // Output: undefined
```
빅인트

임의의 정밀도로 정수를 나타내므로 Number의 안전한 정수 제한을 초과하는 큰 숫자로 작업할 수 있습니다.
```
const bigNumber = 23873847283748289483n;
console.log(typeof bigNumber); // Output: bigint
```

기본 데이터 유형: 값별 호출

기본 유형은 변수와 관련된 메모리 위치에 직접 저장됩니다. 기본 값을 다른 변수에 할당하면 해당 값의 새 복사본이 생성됩니다.

let myName = "Aman";
let myOtherName = myName;
myOtherName = "Dawn";
console.log(myName);       // Output: Aman
console.log(myOtherName);  // Output: Dawn

위 예에서는 값의 새 복사본이 생성되었으므로 myOtherName을 변경해도 myName에는 영향을 미치지 않습니다.

비원시 데이터 유형

참조 유형이라고도 하는 비원시 유형에는 다음이 포함됩니다.

배열

모든 유형의 요소 컬렉션을 목록으로 저장합니다.

const heros = ["ironman", "spiderman", "batman"];
console.log(typeof heros); // Output: object

객체

키가 문자열 또는 기호이고 값은 모든 유형일 수 있는 키-값 쌍의 컬렉션입니다.
```
let myObj = {
    name: "Ayush",
    age: 21,
};
console.log(typeof myObj); // Output: object
```

기능

특정 작업을 수행하도록 설계된 코드 블록으로, 변수에 저장할 수 있습니다.

const myFunction = function() {
    console.log("Hello World");
};
console.log(typeof myFunction); // Output: function

비원시 데이터 유형: 참조에 의한 호출

비원시 유형은 힙에 저장되며 변수는 실제 데이터에 대한 참조(메모리 주소)를 보유합니다. 기본이 아닌 유형을 다른 변수에 할당하면 두 변수 모두 동일한 메모리 위치를 가리킵니다.

let userOne = {
    email: "user1@google.com",
    upi: "user@ybl"
};
let userTwo = userOne;
userTwo.email = "aman@google.com";
console.log(userOne.email);  // Output: aman@google.com
console.log(userTwo.email);  // Output: aman@google.com

위의 예에서 userTwo.email을 수정하면 userOne.email도 변경됩니다. 두 변수 모두 메모리에서 동일한 개체를 참조하기 때문입니다.

주요 시사점

기본 유형은 값을 직접 저장하는 간단한 데이터 유형입니다. 이는 변경할 수 없으며 각 변수는 자체 데이터 복사본을 보유합니다.
비원시 유형은 더 복잡하며 변수는 데이터에 대한 참조를 저장합니다. 하나의 변수를 변경하면 동일한 데이터를 참조하는 다른 변수에 영향을 미칠 수 있습니다.
JavaScript에서 효율적이고 버그 없는 코드를 작성하려면 이러한 차이점을 이해하는 것이 중요합니다.

즐거운 코딩 하시고 다음편에서 만나요!!!

위 내용은 JavaScript 데이터 유형에 대한 이해: 원시 및 비원시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

PHP 튜토리얼

1528

276

Related knowledge

고급 JavaScript 스코프 및 컨텍스트 Jul 24, 2025 am 12:42 AM

JavaScript의 범위는 변수의 접근성 범위를 결정하며, 이는 글로벌, 기능 및 블록 수준 범위로 나뉩니다. 컨텍스트는 이것의 방향을 결정하고 함수 호출 방법에 따라 다릅니다. 1. 스코프에는 글로벌 범위 (어디서나 액세스 가능), 함수 스코프 (함수 내에서만 유효 함) 및 블록 레벨 범위 ({} 내에서 유효 함)가 포함됩니다. 2. 실행 컨텍스트에는 가변 객체, 스코프 체인 및 이것의 값이 포함되어 있습니다. 이것은 일반 함수에서 글로벌 또는 정의되지 않은 것을 가리키며, 메소드 호출은 통화 객체를 가리키고 생성자는 새 객체를 가리키며 Call/Apply/Bind에 의해 명시 적으로 지정 될 수 있습니다. 3. 폐쇄는 외부 범위 변수에 액세스하고 기억하는 기능을 말합니다. 종종 캡슐화 및 캐시에 사용되지만

JavaScript에서 유형 강요 규칙 탐색 Jul 21, 2025 am 02:31 AM

유형 주조는 한 유형의 값을 자바 스크립트의 다른 유형으로 자동 변환하는 동작입니다. 일반적인 시나리오는 다음과 같습니다. 1. 연산자를 사용하는 경우 한쪽이 문자열 인 경우 다른 쪽은 '5'5와 같은 문자열로 변환됩니다. 결과는 "55"입니다. 2. 부울 맥락에서, 비-비안 값은 비어있는 문자열, 0, null, undefined 등과 같은 부울 유형으로 암시 적으로 변환 될 것이다. 3. NULL은 수치 연산에 참여하고 0으로 변환되며 정의되지 않은 것은 NAN으로 변환됩니다. 4. 숫자 (), String () 및 boolean ()과 같은 명백한 변환 함수를 통해 암시 적 변환으로 인한 문제를 피할 수 있습니다. 이 규칙을 마스터하면 도움이됩니다

VUE 3 구성 API vs. 옵션 API : 세부 비교 Jul 25, 2025 am 03:46 AM

Vue3의 CompositionApi는 복잡한 논리 및 유형 파생에 더 적합하며 옵션 API는 간단한 시나리오 및 초보자에게 적합합니다. 1. OptionsApi는 데이터 및 방법과 같은 옵션에 따라 코드를 구성하며 명확한 구조를 가지지 만 복잡한 구성 요소는 조각화됩니다. 2. CompositionApi는 설정을 사용하여 관련 논리를 집중시킵니다.이 논리는 유지 관리 및 재사용에 도움이됩니다. 3. CompositionApi는 Composable 기능을 통해 충돌이없고 매개 변수화 가능한 논리 재사용을 인식합니다. 4. CompositionApi는 TypeScript와보다 정확한 유형 도출에 대한 더 나은 지원을 가지고 있습니다. 5.이 둘의 성능과 포장량에는 큰 차이가 없다. 6.

JavaScript 동시성 패턴 마스터 링 : 웹 작업자 대 Java 스레드 Jul 25, 2025 am 04:31 AM

동시 처리에서 JavaScript의 웹 워크와 Javathreads 사이에는 필수적인 차이가 있습니다. 1. JavaScript는 단일 스레드 모델을 채택합니다. 웹 워크 사람들은 브라우저에서 제공하는 독립 스레드입니다. UI를 차단하지는 않지만 DOM을 작동 할 수없는 시간 소모적 작업을 수행하는 데 적합합니다. 2. Java는 스레드 클래스를 통해 생성 된 언어 수준의 실제 멀티 스레딩을 지원하며 복잡한 동시 논리 및 서버 측 처리에 적합합니다. 3. 웹 워크는 postMessage ()를 사용하여 주 스레드와 통신하는데, 이는 매우 안전하고 고립된다. Java 스레드는 메모리를 공유 할 수 있으므로 동기화 문제에주의를 기울여야합니다. 4. 웹 워크는 이미지 처리 및와 같은 프론트 엔드 병렬 컴퓨팅에 더 적합합니다.

JS에서 요소를 생성하고 추가하는 방법? Jul 25, 2025 am 03:56 AM

새로운 요소를 생성하려면 document.createElement ()를 사용하십시오. 2. TextContent, 클래스리스트, SetAttribute 및 기타 방법을 통해 요소를 사용자 정의합니다. 3. DOM에 요소를 추가하기 위해 AppendChild () 또는보다 유연한 Append () 메소드를 사용하십시오. 4. 삽입 위치를 제어하기 위해 (), 이전 () 및 기타 방법을 선택적으로 사용합니다. 완전한 프로세스는 → Customize → Add를 작성하는 것이며 페이지 컨텐츠를 동적으로 업데이트 할 수 있습니다.

node.js로 CLI 도구 구축 Jul 24, 2025 am 03:39 AM

프로젝트를 초기화하고 package.json을 만듭니다. 2. Shebang을 사용하여 Entry Script Index.js를 만듭니다. 3. package.json의 빈 필드를 통한 명령을 등록합니다. 4. Yargs 및 기타 라이브러리를 사용하여 명령 줄 매개 변수를 구문 분석하십시오. 5. NPMLINK 로컬 테스트 사용; 6. 경험을 향상시키기 위해 도움말, 버전 및 옵션을 추가하십시오. 7. 선택적으로 NPMPUBLISH를 통해 출판; 8. 선택적으로 Yargs와의 자동 완료를 달성합니다. 마지막으로 합리적인 구조 및 사용자 경험 설계를 통해 실제 CLI 도구를 작성하고, 자동화 작업을 완료하거나 위젯을 배포하고 완전한 문장으로 끝납니다.

JS의 날짜를 포맷하는 방법은 무엇입니까? Jul 20, 2025 am 12:10 AM

JavaScript의 형식 날짜는 기본 방법 또는 타사 라이브러리를 통해 구현할 수 있습니다. 1. 기본 날짜 객체 스티칭 사용 : Getlylyear, GetDonth, GetDate 및 기타 방법을 통해 날짜 부분을 가져 와서 수동으로 YYYY-MM-DD 및 기타 형식으로 연결하여 가벼운 요구에 적합하며 타사 라이브러리에 의존하지 않습니다. 2. Tolocaledatestring 방법 사용 : 지역 습관에 따라 MM/DD/YYYY 형식과 같은 출력을 출력하고 다국어를 지원할 수 있지만 다른 환경으로 인해 형식이 일치하지 않을 수 있습니다. 3. Day.js 또는 Date-FNS와 같은 타사 라이브러리 사용 : 간결한 구문 및 풍부한 기능을 제공합니다.

TypeScript의 고급 조건부 유형 Aug 04, 2025 am 06:32 AM

TypeScript의 고급 조건 유형은 TextEndsu? x : y 구문을 통해 유형간에 논리적 판단을 구현합니다. 핵심 기능은 분산 조건 유형, 유추 유형 추론 및 복잡한 유형 도구의 구성에 반영됩니다. 1. 조건부 유형은 베어 유형 매개 변수에 분산되며 문자열 [] | 번호 []를 얻기 위해 ToArray와 같이 조인트 유형을 자동으로 분할 할 수 있습니다. 2. 분포를 사용하여 필터링 및 추출 도구를 구축하기 위해 : textendsu를 통해 유형을 제외하고 textendu? t : never 및 null/undefined를 통해 공통점을 추출합니다. 3

See all articles

JavaScript 데이터 유형에 대한 이해: 원시 및 비원시

기본 데이터 유형

기본 데이터 유형: 값별 호출

비원시 데이터 유형

비원시 데이터 유형: 참조에 의한 호출

주요 시사점

핫 AI 도구

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제