[새싹 프론트엔드] 11/7 (객체)

새싹 프론트엔드

[새싹 프론트엔드] 11/7 (객체)

sognociel 2022. 11. 7. 15:03

01. 객체

자바스크립트 객체는 여러 개의 프로퍼티(property)와 메소드로 구성되어있다.

프로퍼티 : 객체의 고유한 속성
메소드(method) : 함수

배열과 차이점

배열은 원소에 접근할 때 숫자를 사용하지만 객체는 원소에 접근할 때 문자열을 사용한다.
- 문자열은 키(key) 또는 프로퍼티(property)라 부름
- 문자열이 가리키는 원소를 값이라 함
객체의 키는 순서가 없기 때문에 키의 순서가 중요할 때는 객체를 사용하지 않는다. (배열에는 순서가 있음)
배열은 여러 개체를 표현할 때 사용
ex.) 여러 동물의 이름이 나열된 배열
객체는 다양한 특성이나 속성이 있는 하나의 개체를 표현할 때 사용
ex.) 한 동물과 관련된 여러 정보를 저장

객체 생성 방법

let cat = {
  다리: 4, // js는 객체의 키값이 문자열이라는 것을 알기 때문에 "" 안에 넣지 않아도 된다.
  이름: "야옹이",
  색깔: "얼룩무늬",
};

키	문자열만 가능. 숫자를 넣어도 문자로 인식한다. 키 이름에 공백을 넣을 경우는 " " 안에 작성해야 한다.
값	모든 타입의 자료형 사용 가능
키-값 쌍 구분	쉼표로 구분

객체 안의 값 접근

객체["키값"] | 배열처럼 대괄호를 사용해서 접근
객체.키값 | 따옴표를 생략하고 접근(점 표기법)

객체에 원소 추가

배열["키값"] = 값;

let cat = {};

cat["다리"] =  4;
cat["이름"] =  "야옹이";
cat.색깔 =  "얼룩무늬"; // 점 표기법으로 추가할 수도 있다.

객체 안의 키값에 해당하는 값을 변경할 수도 있다.

빌려준돈 = {}

// 빈 객체에 키와 값 추가
빌려준돈["a"] = 3000;
빌려준돈.b = 5000;

빌려준돈.a += 5000; // 값 업데이트

객체와 배열의 결합

객체 안의 값으로 배열을 넣을 수 있다. 접근법은 배열[인덱스]["키값"] 또는 배열[인덱스].키값

let arrayObj = [
  {
    이름: "티라노사우르스",
    연대: "백악기 후기",
  },
  {
    이름: "스테고사우르스",
    연대: "쥐라기 후기",
  },
  {
    이름: "플라테오사우르스",
    연대: "트라이아스기",
  },
];

arrayObj[0].이름
<< 티라노사우르스

배열과 객체의 결합

객체의 변수 이름들을 배열에 담아 각 값에 접근할 수 있다. 단, 객체의 변수 이름을 "문자열" 처럼 묶으면 안된다.

let a = {
  이름: "a",
  나이: 11,
  행운의숫자: [2, 4, 8, 16],
};

let b = {
  이름: "b",
  나이: 15,
  행운의숫자: [3, 9, 40],
};

let c = {
  이름: "c",
  나이: 19,
  행운의숫자: [1, 2, 30],
};

let friendArr = [a, b, c];

객체 안 객체

키에 영화 이름, 값에 영화정보를 객체로 다시 넣은 경우

let 영화 = {
  "니모를 찾아서": {
    개봉연도: 2003,
    상영시간: 100,
    출연진: ["앨버트 브룩스", "엘런 드제너러스", "알렉산더 굴드"],
    형식: "DVD",
  },
  "스타워즈에피소드6-제다이의귀환": {
    개봉연도: 1983,
    상영시간: 134,
    출연진: ["마크 해밀", "해리슨 포드", "캐리 피셔"],
    형식: "DVD",
  },
  "해리포터와 불의 잔": {
    개봉연도: 2005,
    상영시간: 157,
    출연진: ["다니엘 레드클리프", "엠마 왓슨", "루퍼트 그린트"],
    형식: "블루레이",
  },
};

위 객체에 값을 추가하는 방법

영화 정보 객체를 생성한 후, 키를 생성하며 그 값으로 만들어놓은 객체를 할당한다.

let 카정보 = {
  개봉연도: 2006,
  상영시간: 117,
  출연진: ["오웬 윌슨", "보니 헌트", "폴 뉴먼"],
  형식: "블루레이",
};

영화["카"] = 카정보; 또는 영화.카 = 카정보;

const로 생성된 객체의 값 변경하기

const dog = {
  name: "백구",
  legs: 4,
  color: "white",
};

console.log(dog);

dog.name = "황구";
dog.color = "brown";

console.log(dog);

값을 변경할 수 없는 const에서 값이 변경되는 이유는 메모리 주소만 참조하기 때문이다. (값 참조x)

const a = {} 가 생성되며 0x11이라는 주소를 할당받는다. 이 0x11은 0x15의 값을 가져오는데, 이 0x15에 객체 a에 담긴 키, 값들이 들어있는 것.

할당된 주소 0x11의 변경(재할당)은 불가능하지만, 값을 참조하여 들고 오는 0x15는 변경할 수 있다.

객체 생성문 축약

객체 안 함수

let person = {
  firstName: "홍",
  lastName: "길동",
  sayHello: function () {
    document.write(`Hello<br />My name is ${this.lastName} ${this.firstName}`);
  },
};

// 함수 호출 시
person.sayHello();

cf.) 객체 안 함수에서 화살표 함수를 사용한다면 객체 자신을 가리키는 this를 사용할 수 없다. (함수 선언식은 상관 없음)

객체 안 화살표 함수에서 this를 출력하면 아래와 같이 나온다 (Window를 가리킴)

생성자 함수

유사한 객체를 여러 개 생성 할 수 있음

함수 이름의 첫 글자는 대문자로 시작
new 연산자를 붙여서 실행

function Animals(name, legs) {
  this.name = name;
  this.legs = legs;
  this.display = function() {
    return `이름 : ${this.name}<br /> 다리 : ${this.legs}`
  }
}

// this.display를 아래와 같이 작성할 수도 있다. 대신 this를 제외해야 한다.
this.display = function() {
  document.write(`이름 : ${name}<br /> 다리 : ${legs}`)
}

let dog = new Animals("바둑이", 4);
let bird = new Animals("쨱쨱이", 2);

객체 관련 메소드

Object.keys(객체 이름) | 객체 내의 모든 키 목록

Object.values(객체 이름) | 객체 내의 모든 값 목록

JSON.stringify() | 자바스크립트의 값을 JSON 문자열로 변환

02. 내장객체

Date 객체
Math 객체

Date 객체

시간 정보를 담는 객체

let now = new Date();
let day = new Date(2017, 3, 1); // 2017년 4월 1일의 날짜 정보를 기록하는 객체 생성

Date 객체에서 월(month) 값은 0부터 시작한다. (0은 1월, 11은 12월)

객체 생성 방법	설명
new Date()	y	년
	m	월 (0~11)
	d	일 (1~31)
new Date(y, m, d, hour, min, sec)	y	년
	m	월 (0~11)
	d	일 (1~31)
	hour	시
	min	분
	sec	초

Date 객체의 메소드

getFullYear()	4자리 연도 리턴
getMonth()	0~11 사이의 정수 리턴
getDate()	한 달 내의 날짜 리턴(1~31)
getDay()	한 주 내 요일을 정수로 리턴 일요일=0, 월요일=1, 토요일=6
getHours()	0~23 사이의 정수 시간 리턴
getMinutes()	0~59 사이의 정수 분 리턴
getSeconds()	0~59 사이의 정수 초 리턴
getMiliseconds()	0~999 사이의 정수 밀리초 리턴
toLocaleString()	객체에 든 시간 정보를 로컬 표현의 문자열로 리턴
toUTCString()	객체에 든 시간 정보를 UTC 문자열로 리턴

cf.) Date.now() | UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환한다. 겹치지 않는 id 생성 시 자주 사용함

Math 객체

수학 계산을 위한 객체. new Date 와 달리 new Math 로 객체를 생성하지 않음

Math.프로퍼티 또는 Math.메소드() 로 사용한다.

Math.random() | 0과 1 사이의 숫자 하나를 무작위로 선택해서 반환하며 1 미만의 숫자만 반환한다. 더 큰 숫자를 원한다면 Math.random()이 반환한 값에 곱셈

Math.floor() | 소수점 이하의 숫자를 버리고 정수를 생성

Math.floor(Math.random()*length) // 로 응용할 수 있다.

Math.max() | 최대값

Math.min() | 최소값

Math.round() | 소수 첫째자리 반올림

Math.floor() | 소수 첫쨰자리 내림

Math.ceil() | 소수 첫째자리 올림

Math.abs() | 절댓값

Math.PI | 원주율

Math.sqrt() | 제곱근을 구해준다

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅'

저작자표시