JS - 객체 / 표준 내장 객체

◉ 자바스크립트 객체 다루기 

 

▪︎ 객체란?

 - 자료형의 관점에서 보면, 객체는 키와 값으로 구성된 속성의 집합을 의미 

 

▪︎ 객체 생성 

 - 리터럴 방식으로 객체 생성 : {}을 이용 

 - 다양한 데이터를 값으로 가질 수 있음 

const person = {
	name: ["구름", "하늘"];
    age: 10,
    isAdult: true
};

 

  - 또한, 객체 안에 또 다른 객체나 함수도 가능 

const person = {
	name: {
    	firstName: "Hong",
        lastName: "Gildong"
    },
    age: 10,
    isAdult: true,
    printInfo: function(){
    	console.log('printInfo');
    }
};

 

  - 키에 공백이 들어갈 경우, 따옴표를 꼭 사용해야 함 

const person = {
	"phone number": "010-1234-5678"
};

 

---

◉ 객체 속성 다루기 

 

1. 객체 속성에 접근하기 

① 대괄호 연산자로 접근하기 

 - 객체명 뒤에 대괄호 붙이고, 대괄호 안에 키를 넣음 

    이때, 키는 반드시 큰따옴표나 작은따옴표로 감싼 문자열의 형태로 작성해야 함 

const person = {
	name: "Hong Gildong",
    age: 20
};

console.log(person["name"]);   // Hong Gildong

 

 - 객체의 속성값이 배열이나 객체 리터럴, 함수일 경우 

const person = {
	name: {
    	firstName: "Hong",
        lastName: "Gildong"
    },
   	likes: ["apple", "samsung"],
    printHello: function(){
    	return "hello";
    }
};

  • 객체 리터럴일 경우

console.log(person["name"]["firstName"]);	// Hong

 

  • 배열일 경우

consol.log(person["likes"][0]);	// apple

 

  • 함수일 경우 

console.log(person["printHello")()};	// hello

 

 

② 마침표 연산자로 접근하기 

 - 마침표 연산자 이용 시, 키를 큰따옴표나 작은따옴표로 감싸면 오류 발생 

console.log(person.name.firstName);	// Hong
console.log(person.likes[0]);		// apple
console.log(person.printHello());	// hello

 

 - 객체의 키 식별자에 공백이 있을 경우, 마침표 연산자 사용 불가 → 대괄호 연산자로 접근해야 함 

 

 

 

2. 객체 속성 동적으로 추가하기 

▪︎ 이미 만들어진 객체에 나중에 속성을 추가하는 것을 속성을 동적으로 추가한다고 함 

const person = {};
console.log(person);	// {}
person.name = "Hong Gildong";
console.log(persont);	// { name: "Hong Gildong" }

  - 객체 식별자와 키에 마침표 연산자를 사용하면, 객체의 속성에 접근하게 됨 

  - 속성에 접근해서 할당 연산자로 값을 할당하면 값이 변경되거나 새로운 속성이 추가됨 

  

 

 

3. 객체 속성 동적으로 삭제하기 

▪︎ 객체 속성에 접근할 때 앞에 delete 키워드를 명시하면, 해당 속성이 삭제됨 

const person ={
	name: "Hong Gildong"
}

delete perons.name;	        // 또는 delete person["name"]
console.log(person);		// {}

 

 

 

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

▪︎ 기본 자료형의 데이터 관리 : 깊은 복사(deep copy)

  - 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사하는 것을 의미 

 

▪︎ 참조 자료형의 데이터 관리 : 얕은 복사(shallow copy)

  - 기본형과 달리, 참조 자료형은 변수 공간에 데이터가 할당되는 것이 아니고, 데이터가 위치하고 있는 메모리의 주소 값만 할당됨

    ( 이를 참조한다고 표현 ) 

  - 데이터를 복사했을 때 한쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것을 의미 

 

 

---

◉ 표준 내장 객체 

 

▪︎ 자바스크립트에서 이미 정의된 객체를 표준 내장 객체라고 함 

 

▪︎ 표준 내장 객체의 종류 

종류	설명
String	기본 자료형 중 문자열과 관련있는 속성과 메서드가 정의된 객체
Array	기본 자료형 중 배열과 관련있는 속성과 메서드가 정의된 객체
Date	날짜 및 시간과 관련있는 속성과 메서드가 정의된 객체
Math	수학 연산과 관련있는 속성과 메서드가 정의된 객체

 

 

 

1. String 객체의 주요 속성과 메서드 

const pw = "124";
if(pw.length < 4) {
	console.log("비밀번호는 최소 4자리 이상 입력해주세요.");
}

const email = "test!naver.com";
if( email.includes("@") === false){
	console.log("올바른 이메일 형식이 아닙니다.");
}

const email = "test!naver.com";
if(email.indexOf("@") === -1){
	console.log("올바른 이메일 형식이 아닙니다.");
}

 

 

 

2. Array 객체의 주요 속성과 메서드 

 

 

3. Date 객체의 주요 속성과 메서드 

▪︎ 인스턴스 만들기 

const date = new Date();

 

▪︎ 메서드로 날짜와 시간 정보 가져와서 설정하기 

 

 

4. Math 객체의 주요 속성과 메서드 

▪︎ Math 객체의 주요 메서드