JavaScript 자료형

Flex·2022년 3월 4일

HTML/CSS/JS

JavaScript 모음

목록 보기

4/8

JavaScript 자료형에 관한 정리글입니다.
함수(메서드), Number, String(문자열), Array(배열) 에 대해 다룹니다.

🥚 들어가기 전에

1. 함수(function) 란?

함수 정의는 다양한 방법으로 가능하며, 함수 표현식처럼 함수를 정의하여 변수에 저장할 수 있습니다.

// --------------- 함수 선언식
function add_1(x, y) {
  return x + y;
}

// --------------- 함수 표현식
const add_2 = function (x, y) {
  return x + y;
};

// --------------- 화살표 함수
const add_3 = (x, y) => x + y;

const add_4 = add_1; // 메모리 주소 복사. add_1 의 주소를 동일하게 가리킴.

console.log(add_4(1, 3)); // 4

console.log(add_1 == add_2); // false : 동일한 주소에 들어있지 않음.
console.log(add_1 == add_4); // true : 동일한 주소를 가리킴.

2. 함수의 속성

아래와 같이 배열의 요소(element) 혹은 객체의 속성(property)에 함수를 정의하여 저장할 수도 있습니다.
JavaScript에서의 배열은 Object 즉, 객체로 취급되기 때문에 가능합니다.
자세한 내용은 본문의 Array 챕터를 확인하세요!

let list = [
  "john",
  27,
  function hello_func() {
    console.log("hello");
  },
]; // List에 함수 저장

let obj = {
  name: "john",
  age: 27,
  hello_func() {
    console.log("hello");
  },
}; // Object에 함수 저장

function hello_func() {
  console.log("hello");
} // 일반 함수

// 셋 모두 같은 결과값이 출력됨.
hello_func(); // hello
obj.hello_func(); // hello
list[2](); // hello

console.log(typeof hello_func); // function
console.log(typeof obj.hello_func); // function
console.log(typeof list[2]); // function

🥚 method

객체에 저장된 값이 함수인 경우, 이를 메서드(method) 라고 부릅니다.
메서드는 기본적으로 특정 주소값을 가리키며, 해당 공간에 메모리를 할당받아 함수가 저장되어있습니다.

function hello_func() {
  console.log("hello");
}

function hi_func() {
  console.log("hi");
}

let obj = {
  name: "john",
  age: 27,
  func: hello_func,
};

hello_func(); // hello 출력
hi_func(); // hi 출력
obj.func(); // hello 출력

obj.func = hi_func; // Object의 func를 hi_func 함수로 변경.
obj.func(); // 변경 후 hi 출력

🍳 this

this는 메서드에서 객체 내부의 속성(property) 값을 접근할 수 있는 지시자입니다.
Object 객체 내에서 해당 객체의 속성을 불러올 때 사용할 수 있습니다.
this를 사용하는 메서드는 추가 가능하며, 이 때 this는 런타임에 결정되어 호출한 객체에 따라 달라집니다.

let user = { name: "john" };
let admin = { name: "admin" };

function hello_func() {
  console.log("hello " + this.name);
}

user.func = hello_func; // name == user.name == "john"
admin.func = hello_func; // name == admin.name == "admin"

user.func(); // john 출력
admin.func(); // admin 출력

🥚 Number

JavaScript에서 일반적인 숫자는 64비트 형식의 IEEE-754 표준 기반 형태로 저장되는 자료형입니다.
10진수 외에도 16진수, 2진수, 8진수의 다양한 진수를 사용합니다.
- 16진수(Hexadecimal) 표기: 0xFF
- 8진수(Octal) 표기: 0o71
- 2진수(Binary) 표기: 0b1101
대표 상수 값
- [MAX|MIN]_VALUE, [MAX|MIN]_SAFE_INTEGER, [POSITIVE|NEGATIVE]_INFINITY, NaN
대표 메서드
- 문자열로 변환: Number.toString()
- 특정 자리수까지 제한하여 숫자 표현: Number.toFixed(), Number.toPrecision()
- 타입 확인: Number.isNaN(), Number.isFinite()

💻 Number 메서드 예제 보러가기

🍳 지수/진법

지수 표기법: 아주 큰 숫자나 아주 작은 숫자를 표기하기 위해 지수 표기법(e)으로 0의 개수를 대체 표기할 수 있습니다.

let billion_1 = 1000000000; // 10억
let billion_2 = 1e9; // 1 + 0 9개
let us = 1e-6; // micro sec, 왼쪽으로 6번 소수점 이동

console.log(billion_1); // 1000000000 출력
console.log(billion_2); // 1000000000 출력
console.log(us); // 0.000001 출력

진법 표기법: 진법 표기를 지원하기 위해 0x(16진수), 0o(8진수), 0b(2진수)로 N진수 표기가 가능합니다.

console.log(0x0f); // 15
console.log(0o17); // 15
console.log(0b1111); // 15

🍳 Number 상수값

지수로 표기되는 양수 최대/최소 값: Number.MAX_VALUE, Number.MIN_VALUE
안전하게 표기되는 최대(양수)/최소(음수) 값: Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER
무한대 양수/음수 값: Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY
부동 소수점 산술에서 정의되지 않거나 표현할 수 없는 값으로 해석될 수 있는 숫자 데이터 유형: Number.NaN

🥚 String

텍스트 길이에 상관없이 문자열 형태로 저장되는 자료형입니다.
JavaScript에서는 글자 하나만 저장할 수 있는 char 자료형이 없습니다.
JavaScript에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다.
대표 속성(property)과 메서드(method)
- 문자열 길이: String.length
- 문자열 접근: String.charAt(index), String.charCodeAt(index)
- 문자열 검색: String.indexOf(), String.lastIndexOf(), String.includes(), String.startsWith(), ...
- 문자열 변환: String.toUpperCase(), String.toLowerCase()
- 문자열 치환: String.replace()
- 문자열 추출: String.slice(), String.substring(), String.substr()
- 문자열 분할: String.split()

🍳 문자 정의/표기

String 정의 방법: 큰따옴표(""), 작은 따옴표(''), String()
문자열과 변수 혼합 표현 = 백틱 (`)
문자 표기 방법: \n, \r, \, \t, \u{}, ...

🍳 문자열 길이/접근

길이 확인 방법: String.length
개별 문자 접근 방법: String.charAt(index), String.charCodeAt(index), String[index]

🍳 문자열 검색/변환

문자열 검색(index): String.indexOf(substr, pos), String.lastIndexOf(substr, pos)
문자열 검색(bool): String.includes(substr, pos), String.startsWith(substr, pos), String.endsWith(substr, pos)
ㄴ Boolean 값을 리턴합니다.
대소문자 변환: String.toUpperCase(), String.toLowerCase()

💻 String 접근/검색 메서드 사용예제 보러가기

🍳 문자열 치환

처음 만나는 요소 문자열 치환(치환된 문자열 반환): String.replace(origin_str, change_str)
정규 표현식 활용 문자열 치환: 치환 문자열에 정규 표현식 기입
--> /치환문자열/g(전체)i(대소문자 구분 X)
📝 MDN 정규표현식 문서
📝 한층 쉬운 정규표현식 정리글

🍳 문자열 추출

위치 기반 문자열 추출: String.slice(start, end), String.substring(start, end)
ㄴ start index 이상, end index 미만 문자열을 추출합니다.
길이 기반 문자열 추출: String.substr(start, length)
ㄴ start index 로부터 length 개의 문자열을 추출합니다.

🍳 문자열 분할

배열로 문자열 분할: String.split(Separator, limit)

💻 String 추출/분할 메서드 사용예제 보러가기

🥚 Array (배열) ⭐️

여러 개체(Entity)값을 순차적으로 나열한 자료 구조입니다.
✅ 알고리즘 내 사용 빈도가 아주 높습니다.
배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근합니다.
각각의 공간이 할당되어있어 다양한 자료형들을 하나의 배열 내에 위치시킬 수 있습니다.
인덱스는 0부터 시작합니다.
대표 속성(property)과 메서드(method)
- 배열 크기 및 배열 여부 확인: Array.length / .isArray()
- 배열 추가/삭제: Array.push() / .pop(), / .shift() / .unshift() / .splice() / .slice() / ...
- 배열 탐색: Array.indexOf() / .includes()
- 배열 변형(callback 미사용): Array.sort() / .reverse() / .join()