1. 자료형이란?
프로그램에서 다룰 수 있는 값의 종류
let a = 30; // a는 number 타입 변수
let b = "bar"; // b는 string 타입 변수
let c = true; // c는 boolean 타입 변수
let d; // undefined 타입 변수 2. 자료형의 종류
최신 ECMAScript 표준은 다음과 같은 7가지 자료형을 정의하고 있다.
1) 기본 자료형(Primitive)
- 객체를 제외한 모든 값은
변경 불가능한(메모리에 올라간 값이 변경되지 않는)값이다. - Boolean
- Null
- Undefined
- Number
- String
- Symbol
2) 객체 자료형
- 자바스크립트는 객체기반의 스크립트 언어이다.
- 자바스크립트를 이루고 있는 거의 모든 것은 객체이다.
- 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 key-value pair를 저장할 수 있는 구조
3. 기본 자료형
1) Boolean
true,false두 가지의 값을 가질 수 있다.
let a = true;
let b = false;2) Null
null하나의 값만 가질 수 있다.- 존재하지 않는 값, 비어있는 값, 알수 없는 값을 의미한다.
let name = null;
console.log(name); // null
console.log(typeof name); // object3) Undefined
- 값을 할당하지 않은 변수는
undefined값을 가진다. - 타입이 정해지지 않은 것
- 즉, 변수 선언은 했지만 값을 할당하지 않은 상태
let name;
console.log(name); // undefined4) Number
- 자바스크립트는 다른 언어와 달리 정수와 실수를 따로 구분하지 않고 모든 수를 실수 하나로 표현
let num = 123;5) String
- 자바스크립트에서 문자열을 표현할 때는 따옴표를 사용한다.
- 따옴표 종류 3가지
- 큰 따옴표 “”
- 작은 따옴표 ‘’
- 백틱 ``
- 백틱으로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 포맷팅할 수 있다.
let str = "apple"
let str2 = "orange"
let result = `${str}+${str2}`6) Symbol
- ECMAScript 6부터 새롭게 추가된 타입
- 고유하고 변경 불가능한 원시 값
- 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.
const sym1 = Symbol();
console.log(sym1); // Symbol()
console.log(typeof sym1); // symbol4. 객체(Object)
1) 객체 구문
let user = new Object();
let user = {};let user = {
name : "mark"
}2) 객체 특징
- 객체는 변수이다. 그러나 많은 값이 포함될 수 있다.
- 객체는 중괄호 표기를 이용하여 만들 수 있다.
- 객체는 각각의 key/value에 대한 정보를 나열할 수 있다.
- key는 문자열 또는 기호여야 한다.
- value는 모든 유형이 될 수 있다.
- 객체는 한 쌍의 key/value 뒤에 쉼표를 이용하여 그 뒤에 오는 key/value와 구분해야 한다.
- 객체에서 명명된 값을 properties라고 한다.
- 객체는 어떠한 이름이어도 상관없다.
- 객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않는다.
let user = { name : 'mark' };
let admin = user; // 참조가 복사되고 객체가 복제되지 않는다. 3) 객체의 종류
- 배열
- 함수
- 객체
- 날짜
- 수학
- 정규표현식
- Boolean은 객체일 수 있다. (new 키워드로 정의된 경우)
- 숫자는 객체가 될 수 있다. (new 키워드로 정의된 경우)
- 문자열은 객체가 될 수 있다. (new 키워드로 정의된 경우)
4) 객체가 아닌 기본 데이터 유형
- String
- Number
- Boolean
- Null
- Undefined
5. JavaScript의 객체 구성
1) 내장 객체
자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트 코드 어디에서든 사용 가능하다.
- global
- object
- string
- number
- boolean
- date
- array
- math
2) 브라우저 내장 객체
브라우저 내장 객체 또한 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체들이다.
브라우저 내장 객체는 자바스크립트 엔진을 구동하는 것들에서 build되는 객체들이다.
BOM과 DOM이 있다. 이 객체들은 자바스크립트 내장 객체가 구성된 후에 구성된다.
3) 사용자 정의 객체
사용자가 생성한 객체들로 생성자 함수 또는 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 객체들.
내장 객체들이 구성된 이후에 구성된다.
6. 프로퍼티
프로퍼티란 속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.
프로퍼티는 key: “value” 의 형식으로 객체 안의 쉼표(,)로 구분되어 할당된다.
특정객체가 가지고 있는 정보를 품고 있어 그 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다.
- key : 빈 문자열을 포함한 모든 문자열 또는 symbol 값
- value : 모든 값
let foo = {}; // foo 객체 생성
foo.a = 1; // .연산자를 이용하여 a라는 이름의 프로퍼티를 생성하면서 1이라는 값 할당
let sum = foo.a+10; // .연산자를 이용하여 foo 객체의 a프로퍼티에 접근하여 값 활용 가능
// 출력
117. 메소드(Method)
메소드란 객체가 가지고 있는 동작이며 객체 내의 함수를 칭한다.
메소드와 함수의 차이점
- 메소드는 객체가 가지고 있는 동작, 메소드를 수행하기 위해서는 객체를 통해 해당 메소드를 수행해야하며 그 동작을 수행하는 주체는 객체이다.
8. 객체 생성 방법
1) 객체 리터를을 사용하여 단일 객체를 정의
- 객체 리터럴 : 중괄호({}) 안에 key:value의 목록
let info = {
name : "mark"
age : "10"
}2) new 키워드를 사용하여 단일 객체 정의
let info = new Object();
info.name = "mark";
info.age = "10";3) 객체 접근 방법
let info = {
name : "mark"
age : "10"
}
// 접근 방법1
let myName = info.name;
let myAge = info.age;
// 접근 방법2
let myName = info['name'];
let myAge = info['age'];4) 객체에 key/value 추가
let info = {
name : "mark"
}
// 추가1
info.age = 10;
info['age'] = 10;5) 객체에 key/value 수정
let info = {
name : "mark"
}
// 추가1
info.name = "alice";
info['name'] = "alice";6) 객체 key/value 삭제
let info = {
name : "mark"
}
// 추가1
delete info.name = "alice";
console.log(info.name); // undefined(더이상 존재하지 않는 key/value)참고 자료
https://velog.io/@surim014/웹을-움직이는-근육-JavaScript란-무엇인가-part-7-Object-35k01xmdfp
https://allinone-it.tistory.com/6
https://developer.mozilla.org/ko/docs/Web/JavaScript/Datastructures#bigint타입
개인 공부 정리