[JS] 11장: 자바스크립트 객체 다루기

개요

오늘 다룰 내용은 교재의 11장, 자바스크립트의 객체 다루는 방법이다. 딱 저번 내용인 함수부터 슬슬 미묘한 언어 간 차이점 때문에 헷갈리기 시작했는데, 오늘 공부할 내용도 비슷하면서 미세하게 다른 점이 많아 객체를 다루는 많은 연습이 필요해 보인다. 길벗의 커리큘럼 상에는 JS가 어렵다고 판단했는지 4개의 챕터로 이루어진 11장을 2번에 걸쳐 공부하도록 했지만 오히려 CSS보다 JS가 나한테는 쉽고 빠르게 배울 수 있어서 진도가 조금 밀려도 따라잡을 수 있을 것 같다.

객체란

자바스크립트에서의 객체 : 키와 값으로 구성된 속성의 집합.

const person = {}; //리터럴 방식으로 객체 생성
const person = new Object(); //객체 생성자를 사용하여 객체 생성

이 외에도 function을 사용하기, object.create()를 사용하기, 클래스를 사용하기 등의 방법으로 객체를 생성할 수 있다.

속성 : 키와 값으로 구성된다. 

가독성을 위해 속성을 추가할 때 줄 바꿈을 해주는 편이 좋다.

객체는 또 다른 객체나 함수를 포함한 모든 자료형의 데이터를 값으로 가진다. 

객체의 키는 일반적으로는 문자열이어도 따옴표가 필요하지 않지만, 공백을 포함한다면 따옴표가 필요하다.

객체의 속성으로 들어간느 함수(function)는 메서드(method)라고 불린다. 

객체 속성 다루기

객체 속성에 접근하기

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

const person = {
    name: "Hong Gildong",
    age:20
};
console.log(person["name"]);
console.log(person["age"]);

 대괄호 연산자로 객체 속성에 접근할 수 있다.

const person2 = {
    age: 20,
    name: {
        firstname: "gildong",
        lastname: "hong"
    }
};
console.log(person2["name"]); //{ firstname: 'gildong', lastname: 'hong' }
console.log(person2["name"]["firstname"]); //gildong

객체의 속성값이 배열, 객체 리터럴, 함수일 때는 다음과 같이 출력된다.
배열이라면 index로 접근, 함수라면 대괄호 뒤에 ()를 붙이면 된다.

#마침표 연산자

/**마침표 연산자 */
const person3 = {
    name: {
        firstname: "gildong",
        lastname: "hong"
    },
    age: 20,
    likes:["apple", "samsung"],
    PrintHello:function() {
        return "hello";
    }
};
console.log(person3.name.firstname); //gildong
console.log(person3.age); //20
console.log(person3.likes[1]); //samsung
console.log(person3.PrintHello()); //hello

마침표 연산자는 배열과 달리 따옴표로 감싸면 오류가 발생한다. 따라서 속성이 공백을 포함한다면, 마침표 연산자로 불러올 수 없다.

객체 속성 값 변경하기

변수에 정의된 값을 바꾸는 것과 같은 방식이다.

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

위의 속성 변경에서, 만약 없는 키라면 속성이 새로 추가된다.

const person4 = {};
person4.name = "gildong";
console.log(person4); //{ name: 'gildong' }

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

const person4 = {};
person4.name = "gildong";
console.log(person4); //{ name: 'gildong' }
delete person4.name;
console.log(person4); //{}

위와 같이 delete 키워드를 사용하면 속성을 삭제할 수 있다. 

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

const로 선언한 상수 변수는 재할당이 불가능한데, 위에서 변경, 추가, 삭제를 배웠다 이와 같은 작업이 가능한 이유는, 참조 때문이다.

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

참조 자료형의 데이터 관리 : 얕은 복사 => 주소 값만 할당.

이 둘의 차이는 데이터를 복사할 때 확연이 나타나는데, 복사된 변수를 변경했을 때 기존 변수의 값 변경 여부에 따라 그 차이를 보인다.

표준 내장 객체 사용하기

표준 내장 객체 : 개발 편의를 위해 미리 만들어진 객체. 기본적으로 내장되어 있어서 모든 영역에서 공통으로 사용할 수 있다.

문자열을 다루는 String 객체

기본 자료형의 문자열을 다룬다.

주요 속성과 메서드: 

let str = " @asdfasdfasdf ";
console.log(str.length); //15\n
console.log(str.includes("a")); //true\n
console.log(str.includes("b")); //false\n
console.log(str.replace("asdf", "abc")); // @abcasdfasdf \n
console.log(str.replaceAll("asdf", "abc")); // @abcabcabc \n
console.log(str.split('a')); //[ ' @', 'sdf', 'sdf', 'sdf ' ]\n
console.log(str.toUpperCase()); // @ASDFASDFASDF \n
console.log(str.trim());//@asdfasdfasdf
console.log(str.indexOf("d"));//4

 

배열을 다루는 Array 객체

배열을 다루는 객체.

let array = ['3', '1', '2'];
console.log(array.length); // 배열 길이: 3

array.push(4); 
console.log(array); // ['3', '1', '2', 4]

array.pop(); 
console.log(array); // ['3', '1', '2']

array.unshift(0); 
console.log(array); // [0, '3', '1', '2']

array.shift(); 
console.log(array); // ['3', '1', '2']

array.sort(); 
console.log(array); // ['1', '2', '3'] (문자열로 정렬됨)

array.reverse(); 
console.log(array); // ['3', '2', '1'] (배열 뒤집기)

// forEach(): 각 요소를 순회하며 작업 수행
array.forEach((element, index) => {
    console.log(`Index ${index}: ${element}`);
});
// 출력:
// Index 0: 3
// Index 1: 2
// Index 2: 1

// filter(): 특정 조건에 맞는 요소만 필터링하여 새로운 배열 반환
const filteredArray = array.filter(element => element > '1');
console.log(filteredArray); // ['3', '2'] (문자열 '1'보다 큰 요소만 선택)

// find(): 조건을 만족하는 첫 번째 요소 반환
const foundElement = array.find(element => element === '2');
console.log(foundElement); // '2' (찾은 첫 번째 요소)

// findIndex(): 조건을 만족하는 첫 번째 요소의 인덱스 반환
const foundIndex = array.findIndex(element => element === '2');
console.log(foundIndex); // 1 (문자열 '2'의 인덱스)

// includes(): 배열에 특정 요소가 포함되어 있는지 여부 반환
const hasTwo = array.includes('2');
console.log(hasTwo); // true ('2'가 배열에 포함되어 있음)

// join(): 배열 요소를 하나의 문자열로 합치기
const joinedString = array.join(', ');
console.log(joinedString); // '3, 2, 1'

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

Date 인스턴스 생성 방법:

const date0 = new Date();
const date1 = new Date(2022, 11, 25, 18, 30, 50);
const date2 = new Date("2022-12-25/18:30:50");
const date3 = new Date("2022/12/25/18:30:50");

0번처럼 아무것도 적지 않는다면 현재 시간을 출력한다.

get, set + (날짜 영단어)로 날짜를 불러오거나 설정할 수 있다. (연, 월, 일, 시간, 분, 초, 밀리초, getTime).

수학 연산을 다루는 Math 객체

const floatNum = 10.52;
console.log(Math.floor(floatNum)); //10
console.log(Math.ceil(floatNum)); //11
console.log(Math.round(floatNum)); //11
console.log(Math.random()); //난수

random은 0이상 1 미만의 난수를 반환하는데, 수학을 잘 활용하면 원하는 범위의 정수를 출력하도록 할 수도 있다.

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(5, 20));

대제목 설명

브라우저 객체 모델 사용하기

브라우저 객체 모델 : 웹 브라우저에서 제공하는 객체

window - document(문서 관련), location(주소/url), history(방문기록), navigator(웹 브라우저 정보), screen(화면 정보)

window 객체의 속성과 메서드

window 객체에는 웹 브라우저의 기능과 요소들을 제어할 수 있는 여러 속성과 메서드가 있다. 

• innerWidth, innerHeight : 화면의 너비와 높이 조정
• outerWidth, outerHeight : 창의 너비와 높이 조정
• screenTop/screenY : 위쪽 면과 모니터의 간격
• screenLeft/screenX : 왼쪽면과 모니터의 간격
• pageXOffet/scrollX : 수평 스크롤 위치
• pageYOffset/scrollY : 수직 스크롤 위치
• alert() : 알림창 표시
• confirm() : 확인창 표시
• prompt() : 입력창 표시
• open() : 새로운 웹 브라우처 창 열기
• close() : 웹 브라우저 창 닫기
• setTimeOut() : 일정 시간 뒤에 콜백 수 한번 실행
• setInterval() : 일저 시간마다 콜백함수 반복 실행
• clearInterval : setInterval 중지
• scrollTo() : 웹 브라우저의 스크롤을 특정 위치만큼 이동
• scrollBy() : 웹 브라우저의 스크롤을 현재 위치에서 상대위치로 이동

참고 : 2개씩 묶여있는 메서드들은 호환성 차이다. 전자들이 호환성이 좋다.

window 객체의 기본 속성 사용하기

위 이미지의 속성들로 직접 코딩해보면 더 확실하게 기능을 체감할 수 있다.

웹 브라우저에서 새 창 제어하기

형식 : window.open(경로, 이름, 속성);

팝업을 열 수 있다. width, height, left, top의 속성을 통해 창의 크기와 위치를 설정할 수 있다.

웹 브라우저의 스크롤 이동하기

ScrollTo는 절대 위치, ScrollBy는 상대 위치만큼 이동하게 한다.