객체
객체의 기본
실제로 존재하는 사물을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입.
객체는 중괄호로 생성하며 키 : 값 과 같은 형태의 자료를 쉼표 ,로 연결해서 입력합니다.
const product = {
제품명 : '아이스아메리카노',
유형 : '음료',
성분 : '원두, 얼음, 물',
원산지 : '과테말라'
}객체의 요소에 접근하는 방법
product['제품명'], product['유형'], product['성분'], product['원산지']
product.제품명, product.유형, product.성분, product.원산지
객체 내부에 있는 값을 속성이라고 하고 속성은 모든 형태의 자료형을 가질 수 있다.
속성과 메소드 구분하기
객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부른다.
다음 코드에서 객체 pet은 name 속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부른다.
const pet = {
name : '멍멍이',
eat : function (food) { }
}
pet.eat()메소드 내부에서 this 키워드 사용하기
자기자신이 가진 속성이라는 것을 표시할때는 this키워드를 사용한다.
동적으로 객체 속성 추가/제거
객체를 처음 생성한 후 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가한다.,동적으로 속성을 제거한다라고 한다.
동적으로 객체 속성 추가 -
객체.속성 = '값'
동적으로 객체 속성 제거 -delete 객체.속성
객체의 속성과 메소드 사용하기
자바스크립트에서 사용하는 자료
기본자료형- 숫자, 문자열, 불
객체자료형- 함수, 배열,...,이외 전부
객체자료형
속성과 메소드를 가질 수 있는 모든 것이 객체이다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급객체에 속한다고 표현하기로 한다.
new 키워드를 활용해서 생성한다.
기본자료형
실체가 있는 것중에 객체가 아닌것을 기본자료형(숫자,문자열,불)이라고 한다.
이러한 자료형은 객체가 아니므로 속성을 가질 수 없다.
기본자료형을 객체로 선언하기
const 객체 = new 객체 자료형 이름()기본자료형의 일시적 승급
자바스크립트는 사용의 편리성을 위해 기본자료형의 속성과 메소드를 호출할때 일시적으로 기본자료형을 객체로 승급시킨다. 그래서 속성과 메소드를 사용할 수 있다.이러한 승급은 일시적인 것이다. 따라서 기본자료형의 경우 속성과 메소드를 사용할 수는 있지만 속성과 메소드를 추가로 가질 수는 없다.
프로토타입으로 메소드 추가하기
객체 자료형 이름.prototype.메소드 이름 = function() {
}객체별 메소드
Number 객체
.toFixed() - 숫자 n번째 자릿수까지 반올림해서 출력하기.
.isNaN(),isFinite() - NaN과 Infinity 확인하기. isFinite() 메소드가 false인 경우는 양의 무한대, 음의 무한대 총 2가지 경우이다.
String 객체
.trim() - 문자열 양쪽 끝의 공백 없애기
.split() - 문자열을 특정 기호로 자르기
.length(),.indexOf()
JSON 객체
JSON은 JavaScript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식이다.
{
"name": "Kim",
"price" : "10000",
"publisher" : "Mr.Lee"
}JSON 추가규칙
- 값을 표현할때는 문자열, 숫자, 불자료형만 사용한다. (함수X)
- 문자열은 반드시 큰따옴표를 붙여야한다.
- 키에도 반드시 따옴표를 붙여야한다.
JSON.stringify() 자바스크립트 객체 -> JSON 문자열
JSON.parse() JSON 문자열 -> 자바스크립트 객체
Math 객체
객체속성 pi, e 와 같은 수학 상수, 메소드로는 Math.sin(),cos(),tac()
Math.random() - 0이상 1미만의 랜덤한 숫자 생성할때 사용.
객체와 배열 고급
속성 존재여부 확인
객체 내부에 어떤 속성이 있는지 확인해보는 코드는 굉장히 자주 사용하는 코드이다.
내가 직접 코드를 작성할때도, 남이 만든 코드를 이해할때도 필요하다.
if(object.name !== undefined) {
console.log('name 속성이 있습니다.')
} else {
console.log('name 속성이 없습니다.')
}더 간단하게 표현하면💥
if(object.name) {
console.log('name 속성이 있습니다.')
} else {
console.log('name 속성이 없습니다.')
}이것보다 더 간단하게 표현하면💥💥
object.name || console.log('name 속성이 없습니다.')배열 기반의 다중할당
배열과 비슷한 장성 방법으로 한번에 여러개의 변수에 값을 할당하는 다중 할당 가능.
[식별자, 식별자, 식별자, ...] = 배열객체 기반의 다중할당
객체 내부에 있는 속성을 꺼내서 변수로 할당할때 다음과 같은 코드 사용가능.
{ 속성 이름, 속성 이름 } = 객체
{ 식별자 = 속성 이름, 식별자 = 속성 이름 } = 객체배열 전개연산자
배열은 복사해도 다른 이름이 붙을 뿐이다. 이러한 것을 얕은복사(참조복사)라고 한다.
깊은 복사
복사한 두 배열이 완전히 독립적으로 작동한다.
[... 배열] - 전개연산자를 사용한 배열복사
[...배열,자료,자료,자료] - 전개연산자를 사용한 배열 요소 추가
객체 전개연산자
객체도 깊은 복사를 할때 전개연산자를 사용할 수 있다.
{...객체} - 전개연산자를 사용한 객체복사
{...객체,자료,자료,자료} - 전개연산자를 사용한 객체요소 추가
TIL 6 day
공부를 하다보니 개념은 이해가 되지만 실제 코드에 적용시키는 부분에서 막히는 경우가 많았다...
시간이 조금 더 걸리더라도 하나하나 직접 쳐보면서 코드의 필요한부분에 적용시킬 수 있도록 내것으로 만들어야겠다.
공부하면서 막힐때 검색을 통해 많은 사람들의 기술블로그를 보는게 큰 도움이 된다.
나중에 누군가에게 내 기술블로그도 조금이나마 도움이 될수 있었으면...😭
그 전까지는 제가 열심히 도움을 받아보겠습니다 ㅎㅎㅎ..🙏🏻
