javascript

Javascript(객체)

소리소리솔소리 2022. 10. 12. 11:07

*객체

자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합

이름과 값이 한 쌍을 이룬 것을 프로퍼티

 

 

객체 리터럴로 생성하는 방법

객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법

let memberInfo = {
    name : "유나",
    age : 20,
    addr : "경기도 수원시",
    gender : "여성"
};
console.log(memberInfo);

 

 

 

생성자로 생성하는 방법

new 연산자를 사용하여 객체를 생성하고 초기화 

이때 사용되는 메소드를 생성자(constructor)

이 메소드는 새롭게 생성되는 객체를 초기화하는 역할

function MemberInfo(name, age, addr, gender) {
    this.name = name;
    this.age = age;
    this.addr = addr;
    this.gender = gender;
}
let memberInfo = new MemberInfo("유나", 20, "경기도 수원시", "여성");
console.log(memberInfo);

 

 

 

Object.create로 생성하는 방법

지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어 준다.

사용자가 프로토타입 객체를 직접 명시할 수 있으므로 유용하게 사용

 

 

 

프로토타입

생성자 안에서 this 뒤에 메서드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가

메서드를 포함한 생성자로 인스턴스를 여러 개 생성하면 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 결과적으로 그 만큼의 메모리를 소비하게 된다.

자바스크립트에서는 함수도 객체이므로 함수 객체가 기본적으로 prototype 프로퍼티를 갖고 있다.

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용할 수 있다.

 

 

 

this 키워드

해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킨다.

메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리킨다.

객체 내부에서 사용된 this 키워드는 객체 자신을 가리킨다.

this는 변수가 아닌 키워드 이므로, 사용자가 임의로 가리키는 값을 바꿀 수 없다.

 

 

 

 

 

객체 속성에 접근하기

console.log(person.name);
console.log(person.isAdult);

 

 

객체의 데이터 관리 방법 이해하기

const 키워드는 값을 변경하거나 추가, 삭제 등을 할 수 없는 상수

하지만 const로 선언된 객체의 속성을 추가 또는 삭제가 가능한 이유는 객체의 자료형이 참조형이기 때문

 

 

기본 자료형의 데이터 관리 : 깊은 복사

기본 자료형은 변수에 데이터를 할당 할 때 데이터 그 자체가 할당

이렇게 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치 않게 복사되는 것을 깊은 복사라고 한다.

let num = 10;
let copyNum = num;
num  = 20;
console.log(num);
console.log(copyNum);

 

참조 자료형의 데이터 관리 : 얕은 복사

변수 공간에 데이터가 할당되는 것이 아니고, 데이터가 위치하고 있는 메모리의 주소값만 할당

const car = {
    name : "sonata"
};
car = {
    name : "santafe"
};

 

 

 

표준 내장 객체

자바스크립트에는 개발 편의를 위해 수많은 객체가 미리 만들어져 있다.

이렇게 만들어진 객체는 자바스크립트에 기본으로 내장되어 있어서 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용

 

 

 

 

Number 객체

Number.parseFloat() 메소드

문자열에 포함된 숫자 부분을 실수 형태로 반환

문자열에 여러 개의 숫자가 존재하면, 그중에서 첫 번째 숫자만을 실수 형태로 반환

 

Number.parseInt() 메소드

문자열에 포함된 숫자 부분을 정수 형태로 반환

 

 

 

배열을 다루는 Array 객체

 

 

 

날짜와 시간을 다루는 Date 객체

Date 객체에는 날짜 및 시간과 관련 있는 메서드가 정의

const date = new Date();
console.log(date);

 

 

 

Set 객체

중복을 허용하지 않는 특성

 

Set 생성자 - new Set() 생성자를 사용해서 생성

add() - add()라는 함수를 사용해서 데이터를 추가

has() - 데이터가 저장되어 있는지 확인하려면 has() 함수

 

 

 

Map 객체

Object와 매우 유사

키와 값을 맵핑시켜서 값을 저장하며 저장된 순서대로 각 요소에 접근할 수 있다.

 

Map 생성자 - Map 객체 생성은 new Map() 생성자를 사용

set() - 객체에 데이터를 저장할 때 사용(키와 값)

get() - 객체에 저장된 데이터를 읽을 때 get()함수에 파라미터로 키를 전달

has() - 특정키에 값이 저장되어 있는지 확인

delete() - 특정 데이터를 삭제하려면 delete() 함수를 사용

clear() - 저장되어 있는 모든 데이터를 한 번에 삭제하려면 clear() 함수를 사용

forEach() - Map에 저장되는 모든 데이터를 읽을 때는 forEach() 함수를 사용

 

 

 

수학 연산을 다루는 Math 객체

 

'javascript' 카테고리의 다른 글

Javascript(JSON, ajax)  (0) 2022.10.13
Javascript(정규 표현식)  (0) 2022.10.13
Javascript(이벤트 다루기, 브라우저 객체 모델)  (0) 2022.10.13
Javascript(DOM)  (0) 2022.10.12
Javascript(함수)  (0) 2022.10.12