6. 자바스크립트의 자료형+객체

방은혜·2024년 12월 5일
자바스크립트

JavaScript

목록 보기
6/15

1. 자바스크립트의 자료형

  • 자바스크립트에서 어떤 값의 형태를 표현하는 여러 데이터들이 있는데, 데이터 타입을 분류한 것
    (= 데이터의 형태 = 값의 유형 = 변수의 종류)
  • 자바스크립트에는 2가지의 타입이 있는데
    기본 타입(primitive type)과 참조 타입(reference type)이 있다.
  • 기본 타입은 가장 기본적인 값을 나타내며, 값이 직접 변수에 저장되고
    참조 타입은 값이 저장된 메모리의 참조(주소에 접근하는 방법)가 변수에 저장된다.
  • 기본 타입이 아닌 자료형은 모두 참조 타입이다.

기본타입

- 더 이상 나눌 수 없는 명확한 값. 지정한 값으로 저장한다.

1) 문자열

일반 문자열

  • 문자열은 작은따옴표( ' ' ) 또는 큰따옴표( " " )로 감싸서 생성할 수 있다.
  • 따옴표 종류에 따른 차이는 없다.
  • 자바스크립트에서는 주로 작은따옴표로 문자열을 생성한다.
    const str1 = 'Hi'
    const str2 = "Hi"

템플릿 리터럴(template literal)

  • 여러 변수의 값으로 문장을 만들때 백틱 사용이 편리하다.
  • 템플릿 리터럴은 백틱( ` , backtick)으로 감싸서 생성할 수 있다.
  • 템플릿 리터럴 내에 변수(표현식)를 삽입할 수 있으며, 줄 바꿈을 자유롭게 할 수 있다.
  • 백틱으로 문자열 전체를 감싸고, 변수는 ${}로 감싸서 구분한다.
  • 복잡한 문자열 연결 작업을 간결하게 처리할 수 있다.
const month = 12;
const day = 9;
const anni = '생일';
console.log(month + '월' + day + '일은' +anni + '입니다');
const month = 12;
const day = 9;
const anni = '생일';
console.log(`${month}월 ${day}일은 ${anni}입니다.`);
//결과
12월 9일은 생일입니다.
  • 탬플릿 리터럴 내에서 줄 바꿈을 쉽게 표현할 수 있다.
const song = `동해 물과 백두산이 마르고 닳도록
하나님이 보우하사 우리나라 만세`;
console.log(song);
//결과
동해 물과 백두산이 마르고 닳도록
하나님이 보우하사 우리나라 만세

줄 바꿈을 표현하는 다른 방법

  • `이스케이프 문자`: 문자열 내에서 특별한 의미로 해석되는 기호
  • 백슬래시( \ )와 다른 문자를 결합한 형태로 사용된다.
  • 문자열 내에서 줄 바꿈, 탭(Tab) 등의 특수 문자를 표현할 때 필요하다.
  • 문자열 내에 ' \n '을 포함시키면, 해당 위치에서 줄 바꿈이 이루어진다.
  • 템플릿 리터럴을 사용하지 않고 줄 바꿈을 하기 위해선 반드시 ' \n '이 필요하다.
    ' \n ' 외에도 다양한 이스케이프 문자들이 존재한다. 
const song = `동해 물과 백두산이 마르고 닳도록\n하나님이 보우하사 우리나라 만세`;
console.log(song);
//결과
동해 물과 백두산이 마르고 닳도록
하나님이 보우하사 우리나라 만세

2) 숫자형

숫자형

  • 소수점이 없는 정수형과 소수점이 있는 실수형이 있는데
    자바스크립트에서는 따로 구분하지 않고 모두 같은 숫자형으로 본다.
  • Infinity, -Infinity, NaN 같은 특수 숫자 값도 표현할 수 있다.
    let number 1 = 123;
    let number 2 = 123.45;

infinity

  • Infinity는 양의 무한대를, -Infinity는 음의 무한대를 의미한다.
  • 0을 제외한 숫자를 0으로 나누는 경우, Infinity 또는 -Infinity가 반환된다.
console.log(1 / 0);
console.log(-1 / 0);
console.log(Infinity);
console.log(1 / Infinity);
// 결과
Infinity
-Infinity
Infinity
0

NaN

  • NaN은 Not a Number(숫자가 아님)를 의미한다.
  • 잘못된 산술 연산 또는 수학적으로 정의되지 않는 연산을 할 때 발생한다.
  • NaN을 포함한 연산은 항상 NaN을 반환한다.
console.log('문자열' / 3);
console.log(NaN + 1);
// 결과
NaN
NaN

숫자형 더 깊이 이해하기 보충학습 하기

3) 논리형, undefined와 null

논리형

논리구조에 따라 작성할 때 참인지 거짓인지 알아야 한다.
예) 좌항 > 우항의 대소비교를 통해 연산결과를 true/false로 표시한다.

  • 논리형(boolean)은 참(true)과 거짓(false)을 나타내는 자료형이다.
  • 비교 연산은 결과로 논리형을 반환한다.
const a = 5;
const b = 2;
console.log(a > b);
// 결과
true

typeof 연산자

연산의 결과가 어떤 타입인지 모르겠을 때 도움이 될만한 연산자로 데이터 타입을 확인하고 싶을 때 사용할 수 있다 :)

typeof operand;
  • typeof 연산자는 피연산자의 자료형(데이터 타입)을 문자열로 반환한다.

사용방법은?
1 typeof 작성
2 한 칸 띄워 값 입력
3 값의 타입을 확인한다!

const num = 5;
console.log(typeof num);
결과: number (값의 타입)
const str = 'JavaScript';
console.log(typeof str);
// 결과
string
const bool = true;
console.log(typeof bool);
// 결과
boolean
let undef; // 초기화 안 함
console.log(typeof undef);
// 결과
undefined

undefined와 null

  • 둘은 의미는 모두 값이 없음을 나타내지만 구체적 의미는 다르다.
    undefined: 변수를 선언하고 값을 지정하지 않았을 때 자동으로 부여되는 값
  • undefined는 아직 값이 할당된 적이 없음을 나타낸다.
  • 변수 선언 후 초기화하기 전에 시스템이 자동으로 할당하는 변수의 기본값이다.
let foo;
console.log(foo);
// 결과
undefined
console.log(typeof undefined);
// 결과
undefined

null: 의도적으로 매기는 값

  • null은 ‘값이 없음’을 나타내기 위해 개발자가 명시적으로 할당하는 값이다.

  • ‘빈 값’ 또는 ‘유효하지 않은 값’을 설정할 때 사용한다.

  • null의 타입이 object로 표시되는 것은 언어 설계 초기의 버그 때문이다.

  • 변수의 값이 null인지 확인할 때는 일치 연산자( === )로 null과 같은지 명시적으로 확인한다.

  • 둘은 의미는 모두 값이 없음을 나타내지만 구체적 의미는 다르다. 

let bar = null;
console.log(bar);
// 결과
null
console.log(typeof null); 
// 결과
object

(@빠진 내용 보충하기)

참조타입

변수에 여러 개의 정보가 덩어리처럼 담겨있다.

  • 쉽게 이해하기:
    기존에는

    1. 상자에 이름을 쓰고
    2. 원하는 물건을 넣으면
    3. 이름으로 값을 찾을 수가 있었어
      상자가 작아서 물건은 하나씩 밖에 안들어감
      (=변수는 하나만 들어갈 수 있어)
      그러다보니 많은 물건을 한 상자에 다 넣기가 어렵지

    상자에 물건을 직접 넣지 말고
    관련있는 물건들 끼리 모아서 책장에 두고
    상자에는 어느 책장에 꽃아놨는지 쪽지(객체)에 작성해서 담아놓 는다
    이 쪽지를 담는 상자를= 참조 변수(reference variable)라고 해.

  • 변수에 실제 데이터 값이 아닌 메모리 주소(참조, reference)를 저장하는 데이터 타입.객체의 주소를 참조한다.

  • 변수에 저장된 메모리 주소를 참조해서 실제 데이터를 찾고, 읽어 올 수 있다.

  • 객체(object), 배열(array), 함수(function) 등을 포함한다.

  • 하나의 변수에 기본 타입보다 더 많은 정보를 담을 수 있다.

  • 참조 타입을 통해 복잡한 데이터 구조를 효율적으로 다룰 수 있다.

참조 타입이 필요한 이유

  • 기본 타입만으로 데이터를 관리하는 것은 한계가 있다.
  • 참조 타입을 사용하면 하나의 변수 안에 관련된 데이터를 묶어서 저장할 수 있다.

객체

'다양한 타입의 데이터 값'을 데이터 구조 안에 저장할 수 있다

  • 중괄호 '{ }'로 감싸며 프로퍼티(property,속성)의 집합이다.
  • 다양한 타입의 데이터를 하나의 데이터 구조 안에 저장할 수 있다.
    = 하나의 변수에 여러개의 값을 넣을 수 있다.
  • property는 키와 값의 한쌍으로 이루어 진다.
  • 개수 제한 없이 추가할 수 있다.
  • 키와 값은 콜론(:)으로 구분된다.
  • 키는 프로퍼티의 이름으로, 문자열을 주로 사용한다.
  • 값은 모든 타입이 될 수 있다. 
const person = {
  name: 'HongGilDong',
  age: 30,
};

console.log(person);
// 결과
{ name: 'HongGilDong', age: 30 }
  • 객체의 주소를 변수에 담아 주소를 통해 정보를 얻는 방식
  1. name과 age라는 정보를 가진 객체의 주소를 변수에 담아두고
  2. 주소를 통해 객체를 찾을 수 있다.
  • person 객체는 name 프로퍼티와 age 프로퍼티로 구성되어 있다.
  • name이라는 키에 대응하는 값은 문자열 'HongGilDong'.
  • age라는 키에 대응하는 값은 숫자 30이다.
  • typeof 연산자로 객체의 데이터 타입을 확인하면 object가 나옵니다.
console.log(typeof person);
// 결과
object
profile
방은혜
이전 포스트

5. coding convention(코딩규칙)

다음 포스트

7. 계산에 필요한 연산자

0개의 댓글