[2022-11-07 새싹 프론트엔드] 객체

2022-11-07 강의내용

• 객체
• 내장 객체

사전적 의미

실세계에 존재하는 대상 또는 생각할 수 있는 어떠한 개념

 

자바스크립트에게 객체란?

어떤 ㅅ가물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단.

자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'이다

메소드와 함수 의 차이점

• 함수가 메소드를 아우르는 포괄적인 용어이다.
• 함수는 객체로부터 독립적이며, 메소드는 객체에 종속적이다.
• 메소드는 거의 모든 면에서 함수와 동일하지만, 아래의 2가지 포인트에서 다른 점이 있다.
  1.  메소드는 호출된 객체에 암시적으로 전달된다.
  2.  메소드는 클래스 안에 있는 data를 조작할 수 있다.
• 기본적으로 두 용어의 뜻은 동일하나 '객체(클래스)로부터 독립적인가 아닌가'가 함수와 메소드를 나누는 기준이다.

객체 사용법

객체란 '값 또는 기능을 가지고 있는 데이터' 이다

객체가 가진 값or기능을 사용하고 싶다면 뒤에 점을 찍으면 값 또는 기능을 사용할 수 있다

객체가 가진 기능은 메소드 라 한다

객체.데이터	객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사용할 수 있다.
객체.기능()	객체가 가지고 있는 다양한 기능을 수행할 수 있다 (괄호 필수)

 

---

객체의 필요성

• 객체 또는 영어로는 오브젝트(object)라고도 불린다.
  세상에는 단 하나의 데이터로 표현되지 않는 정보가 많다. 나라는 사람을 표현하기 위해서도 이름, 나이, 사는곳 등의 정보가 필요하듯이. 그래서 객체는 관련있는 정보를 묶어서 하나의 데이터를 표현하기 위해 나왔다.
• 객체에는 값 뿐만 아니라 함수도 들어갈 수 있다.

 

호칭↓

 

 

객체의 키:값 호출방법에는 두가지가 있다↓

위 아래 모두 같은 값 호출

변수의 호출↓

.변수명

변수값지정(좌)  결과값(우)

 

 

지정된 변수안에 원하는 입력값만 호출 ↓

.변수안에 원하는 값

변수값 지정(좌)  지정된 변수내용만 호출(우)

Object안에 벼열 넣기↓

---

객체 사용법

객체는 key값으로 찾아야한다.

 

구분	비고
키 (key)	"문자열" 만 사용가능 (JS)는 key 값으로 문자열만 올 수 있다는 것을 알고 있기에 key값 부분에 ""쌍따옴표는 생략이 가능하다. 하지만 key값에 띄어쓰기가 있다면 따옴표를 붙여야하지만 일반적으론 띄어쓰기를 포함하지않는다.
값 (value)	모든 타입의 자료형 사용가능 문자열, 숫자, 블리언, 함수등 모든 자료형이 사용 가능하다
키-값 쌍 구분	쉼표로구분 마지막 키-값 쌍에는 쉼표를 붙이지 않아도 됨
+=	대입연산자를 사용하여 기존에 있는 객체값에 새로운값 추가가능

 

객체 안의 값 접근 방법

 

---

객체 안 값 추가 방법

배열처럼 먼저 빈객체를 만든 다음 나중에 데이터를 추가 할 수 있다.

이 경우 { } 괄호안에 다양한 정보를 한번에 추가 하는게 아니기때문에 , 콤마가 아닌

;세미콜론으로 구분해준다. 

 

---

객체안에 const는 값을 변경할 수 있다.

객체를 사용할땐 화살표함수를 지양하고 function을 사용해야한다.

기준값이 function을 사용한 함수이기때문

 

 

---

생성자 함수

 

---

내장객체

• Date객체
• Math 객체

Date객체

시간 정보를 담는 객체

 

Math 객체

수학 계산을 위한 객체

 

---

배열과 객체의 차이점

배열: 순서가 있어서 [인덱스]를 사용하여 배열을 호출 할 수 있다.

• 하나의 아이템의 단순 정보를 저장하거나 사용하고 싶을 때 사용
• ex) 강아지,고양이,다람쥐 등 과 같이 단순 정보값 저장에 유용함

 

객체: 순서가 없기때문에 인덱스가 아닌 key값 을 사용하여 호출한다.

• 하나의 아이템의 다양한 정보를 저장하고 싶을 때 사용
• ex) 강아지의 나이,이름,사는곳등 하나의 아이템의 여러가지 정보를 담는다.

 

 

 

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