[JavaScript] 데이터 타입 (Data Type)

정진우·2024년 4월 24일
JavaScript
0

JavaScript

목록 보기
1/20
post-thumbnail

데이터 타입 (Data Type)

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 여러 가지 형태의 데이터를 분류한 것입니다. 이는 숫자, 문자열, 불리언 등을 포함하며, 이들 각각의 데이터 타입은 특정 연산이나 처리를 위해 사용됩니다.

JavaScript의 데이터 타입 종류

  • 원시 타입 (Primitive type)
    - number (숫자형)
    - string (문자열)
    - boolean (논리값)
    - undifined
    - null
    - symbol
  • 참조 타입 (Reference type)
    - object (객체)
    - array (배열)
    - funtion (함수)

원시 타입 (Primitive type)

자바스크립트에서 원시 타입은 값 자체를 직접 메모리에 저장하는 기본적인 데이터 타입입니다. 이 값은 한 번 설정하면 변경할 수 없습니다. 이를 불변성(Immutability)이라고 합니다. 값이 생성되면, 그 값을 변경할 수 없으며, 값이 바뀌는 것처럼 보이는 경우 실제로는 새로운 값을 생성하는 것입니다. 메모리에 직접 저장되므로 참조 타입보다 처리 속도가 빠릅니다.

number (숫자형)

  • 자바스크립트는 다른 언어와는 달리, 정수(-1, 0, 1)와 실수(2.75, -1.5, 3.14)를 구분하지 않고 모든 숫자를 하나의 실수로 표현하는 것을 의미합니다. 이는 소수점이 있는 숫자나 없는 숫자 모두를 같은 방식으로 처리한다는 것입니다.
  • 숫자형은 메모리에 직접 저장되기 때문에 처리 속도가 빠르고, 계산, 비교, 논리 연산 등 다양한 작업에 활용됩니다.
  • 자바스크립트에서는 Infinity, -Infinity, NaN 등을 특수 숫자 값으로 취급합니다. Infinity는 어떤 수보다도 큰 특수 값으로, 어떤 수를 0으로 나누려고 하거나 너무 큰 값을 계산할 때 반환됩니다. -Infinity는 Infinity의 반대값입니다. NaN(Not a Number)은 계산 중에 오류가 발생했음을 나타내는 값으로, 숫자가 아닌 값을 숫자로 변환하려고 할 때 반환됩니다.
  • PEMDAS - 수학에서 우선 순위를 결정하는 규칙을 나타내는 약자입니다. 괄호(Parentheses), 지수(Exponents), 곱셈과 나눗셈(Multiplication and Division), 덧셈과 뺄셈(Addition and Subtraction) 순으로 연산을 수행해야 한다는 것을 의미합니다.
// 숫자형 변수 선언 및 초기화
let num1 = 42; // 정수
let num2 = 3.14; // 부동 소수점 숫자

// 덧셈 연산
let sum = num1 + num2;
console.log("덧셈 결과:", sum); // 출력: 45.14

// 곱셈 연산
let product = num1 * num2;
console.log("곱셈 결과:", product); // 출력: 131.88

// 나눗셈 연산
let quotient = num1 / num2;
console.log("나눗셈 결과:", quotient); // 출력: 13.414...

// 정수 나눗셈
let integerDivision = Math.floor(num1 / num2);
console.log("정수 나눗셈 결과:", integerDivision); // 출력: 13

// 제곱 연산
let square = Math.pow(num1, 2);
console.log("제곱 결과:", square); // 출력: 1764

// 곱셈을 먼저 계산
let num3 = 3 + 1 * 9;
console.log(num3); // 출력: 12

// 괄호안에 내용을 먼저 계산
let num4 = (3 + 1) * 9;
console.log(num4); // 출력: 36

string (문자열)

문자열은 작은따옴표(''), 큰따옴표(""), 백 틱( )으로 둘러싸인 문자의 집합을 의미한다.

// 문자열 변수 선언 및 초기화
let str1 = "Hello"; // 작은 따옴표로 감싸진 문자열
let str2 = "world"; // 큰 따옴표로 감싸진 문자열
let str3 = "John";

// 템플릿 리터럴 사용
let greeting = `Hello, ${name}!`; // 출력 Hello, John!
// 백틱으로 감싸진 문자열
// ${} 기호를 사용하여 변수나 표현식을 삽입할 수 있습니다.

// 문자열 연결(Concatenation)
let greeting2 = str1 + ", " + str2 + "!";
console.log("인사말:", greeting2); // 출력: Hello, world!

// 문자열 길이(Length)
let length = str1.length;
console.log("문자열 길이:", length); // 출력: 5

// 문자열 일부 추출(Slice)
let part = str2.slice(0, 3);
console.log("일부 문자열:", part); // 출력: wor
// 0부터 3 직전까지의 부분 문자열을 가져옵니다.

// 문자열 대체(Replace)
let replaced = str1.replace("Hello", "Hi");
console.log("문자열 대체:", replaced); // 출력: Hi
// (대체할 대상 문자열, 대체될 새로운 문자열)

// 문자열 검색(Search)
let position = str2.indexOf("world");
console.log("문자열 위치:", position); // 출력: 0 (첫 번째 위치부터 검색하여 "world"를 찾음)

문자열 메서드

trim()

문자열 양쪽 끝의 공백을 제거합니다.

let str5 = "   Hello, world!   ";
console.log(str5.trim()); // "Hello, world!"

toUpperCase()

문자열을 대문자로 변환하여 반환합니다.

let msg = "leave me alone right now i hate you plz";
let result2 = msg.toUpperCase();
  
console.log(result2); // LEAVE ME ALONE RIGHT NOW I HATE YOU PLZ

toLowerCase()

문자열을 소문자로 변환하여 반환합니다.

let msg = "HELLO WORLD";
let result2 = msg.toLowerCase();
  
console.log(result2); // hello world

indexOf()

문자열에서 특정 문자열이 처음 나타나는 위치의 인덱스를 반환합니다.

let msg = "haha that is so funny!";

// 문자열에서 "h"의 인덱스 위치를 콘솔에 출력합니다. 결과는 0입니다.
console.log(msg.indexOf("h")); // 0

// 문자열에서 "!"의 인덱스 위치를 콘솔에 출력합니다. 결과는 21입니다.
console.log(msg.indexOf("!")); // 21

// 문자열에서 "$"의 인덱스 위치를 콘솔에 출력합니다. "$" 문자가 없으므로 결과는 -1입니다.
console.log(msg.indexOf("$")); // -1

// 문자열에서 "is"의 인덱스 위치를 콘솔에 출력합니다. 결과는 10입니다.
console.log(msg.indexOf("is")); // 10

slice()

문자열의 일부분을 추출하여 새로운 문자열을 반환합니다.

let msg = "haha that is so funny!";

// 문자열의 6번째 문자부터 끝까지 출력합니다. ("that is so funny!")
console.log(msg.slice(5));

// 문자열의 6번째 문자부터 9번째 문자까지 출력합니다. ("that")
console.log(msg.slice(5, 9));

// 문자열의 6번째 문자부터 10번째 문자까지 출력합니다. ("that ")
console.log(msg.slice(5, 10));

// 문자열의 11번째 문자부터 12번째 문자까지 출력합니다. ("is")
console.log(msg.slice(10, 12));

// 문자열의 뒤에서 6번째 문자부터 끝까지 출력합니다.
console.log(msg.slice(-6));
  • 음수의 경우에는 뒤에서부터 시작합니다.

replace()

문자열에서 특정 문자열 또는 정규 표현식과 일치하는 부분을 다른 문자열로 대체할 때 사용됩니다.

let msg = "haha that is so funny!";

// 문자열에서 "haha"를 찾아 "lololololo"로 대체하고, 그 결과를 콘솔에 출력합니다.
console.log(msg.replace("haha", "lololololo"));

repeat()

문자열을 주어진 횟수만큼 반복하여 결합한 새로운 문자열을 반환합니다.

let msg = "안녕하세요";

// 안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요
console.log(msg.repeat(5));

boolean (논리형)

  • Boolean 타입은 논리 요소를 나타내며 참, 거짓을 표현하는 데이터 타입이다. True 혹은 False 두 가지의 값을 가질 수 있다
// 불리언 변수 선언 및 초기화
let isRaining = true; // 비가 오고 있는지 여부를 나타내는 변수

// 조건문을 사용하여 불리언 값에 따른 처리
if (isRaining) {
  console.log("우산을 가져가세요."); // 출력: 우산을 가져가세요.
} else {
  console.log("우산은 필요 없어요.");
}

// 불리언 값을 반환하는 함수 정의
function isEven(number) {
  return number % 2 === 0; // 짝수이면 true, 홀수이면 false 반환
}

// 함수 호출 및 결과 출력
console.log("10은 짝수인가요?", isEven(10)); // 출력: true
console.log("7은 짝수인가요?", isEven(7)); // 출력: false

undefined

  • 값이 할당되지 않아 타입이 정해지지 않은 것을 의미합니다.
  • 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환됩니다.
// 변수 선언만 하고 값을 할당하지 않은 경우
let x;
console.log("변수 x의 값:", x); // 출력: undefined

// 함수에서 반환값을 지정하지 않은 경우
function greet(name) {
  console.log("Hello, " + name);
}
let message = greet("Alice"); // 함수는 Hello, Alice를 출력하고, 반환값이 없으므로 message는 undefined가 됨
console.log("함수의 반환값:", message); // 출력: undefined

// 객체에서 존재하지 않는 속성에 접근한 경우
let person = {
  name: "John",
  age: 30,
};
console.log("직업:", person.job); // 출력: undefined

// 배열에서 존재하지 않는 요소에 접근한 경우
let colors = ["red", "green", "blue"];
console.log("세 번째 색상:", colors[2]); // 출력: blue
console.log("네 번째 색상:", colors[3]); // 출력: undefined

null

  • 의도적으로 '값이 없음'을 명시하기 위해 할당하는 값입니다.
// 변수에 명시적으로 null 할당
let user = null;
console.log("사용자 정보:", user); // 출력: null

// 객체 속성에 null 할당
let person = {
  name: "John",
  age: 30,
  job: null,
};
console.log("직업:", person.job); // 출력: null

// 함수의 반환값으로 null 반환
function findUser(id) {
  if (id === 123) {
    return { id: 123, name: "Alice" };
  } else {
    return null; // 사용자를 찾을 수 없을 때 null 반환
  }
}
let foundUser = findUser(456);
if (foundUser === null) {
  console.log("사용자를 찾을 수 없습니다."); // 출력: 사용자를 찾을 수 없습니다.
} else {
  console.log("사용자 정보:", foundUser); // 출력되지 않음
}

symbol

  • ES6에서 추가된 원시 데이터 타입으로, 고유하고 변경 불가능한 값입니다.
// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol("key");
console.log(typeof key); // symbol

var obj = {};
obj[key] = "value";
console.log(obj[key]); // value

참조 타입 (Reference type)

자바스크립트에서 참조 타입은 값이 메모리에 직접 저장되는 것이 아니라, 그 값을 저장하는 메모리 위치를 참조하는 데이터 타입입니다. 참조 타입의 변수는 메모리 위치를 참조하므로, 원시 타입과는 다르게 값을 변경할 수 있습니다. 이를 가변성(Mutability)이라고 합니다. 객체, 배열, 함수 등이 이에 해당하며, 메모리에 직접 저장되는 원시 타입에 비해 처리 속도가 느립니다.

object (객체)

  • 객체형은 원시형과 달리 key : value 쌍으로 구성된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있습니다.
  • 객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 키(key): 값(value) 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, key엔 문자형, value엔 모든 자료형이 허용됩니다.
// 객체 생성
let person = {
  name: "John", // 문자열 속성
  age: 30, // 숫자 속성
  isStudent: false, // 불리언 속성
  address: {
    // 중첩된 객체
    city: "New York",
    zipCode: "10001",
  },
  hobbies: ["reading", "traveling", "photography"], // 배열 속성
};

// 객체 속성에 접근
console.log("이름:", person.name); // 출력: John
console.log("나이:", person.age); // 출력: 30
console.log("학생 여부:", person.isStudent); // 출력: false
console.log("도시:", person.address.city); // 출력: New York
console.log("취미:", person.hobbies[0]); // 출력: reading

// 객체 속성 추가 및 수정
person.gender = "male"; // 속성 추가
person.age = 31; // 속성 수정

console.log("성별:", person.gender); // 출력: male
console.log("나이:", person.age); // 출력: 31

array (배열)

  • 여러 개의 항목을 하나의 변수에 저장할 수 있게 해주는 데이터 타입입니다.
  • 배열은 대괄호([])를 사용해 생성하며, 각 항목은 쉼표(,)로 구분합니다.
  • 배열에 저장된 항목 각각은 고유한 인덱스를 가지고 있으며, 이 인덱스를 통해 배열의 항목에 접근하거나 수정할 수 있습니다.
// 배열 생성
let colors = ["red", "green", "blue", "yellow"];

// 배열 요소에 접근
console.log("첫 번째 색상:", colors[0]); // 출력: red
console.log("세 번째 색상:", colors[2]); // 출력: blue

// 배열 길이
console.log("배열 길이:", colors.length); // 출력: 4

// 배열 순회
console.log("모든 색상:");
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}
// 출력:
// red
// green
// blue
// yellow

// 배열 요소 추가
colors.push("orange");
console.log("새로운 색상 추가 후:", colors);
// 출력: ["red", "green", "blue", "yellow", "orange"]

// 배열 요소 제거
let removedColor = colors.pop();
console.log("마지막 색상 제거 후:", colors); // 출력: ["red", "green", "blue", "yellow"]
console.log("제거된 색상:", removedColor); // 출력: orange

function (함수)

  • 함수는 특정한 작업을 수행하는 코드의 집합인데, 이 작업을 수행하기 위해 이름이 지정되어 있습니다. 이 이름을 호출하면 코드가 실행됩니다.
  • 함수는 코드를 재사용하게 해주며, 코드를 더 읽기 쉽고 관리하기 쉽게 만들어 줍니다.
// 함수 정의
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 함수 호출
greet("Alice"); // 출력: Hello, Alice!
greet("Bob"); // 출력: Hello, Bob!

참고

profile
정진우
내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥
다음 포스트

[JavaScript] 변수(Variable)

0개의 댓글