에뛰드 블로그
article thumbnail

🩷 06-1 객체의 기본

🩵 객체

객체 (object) : 속성을 가진 자바스크립트의 기본 데이터 타입

  • 자바스크립트에서 여러 자료를 다룰 때 객체 사용
  • 배열도 여러 자료를 다룰 수 있음
  • 객체 선언 : 중괄호 { ... } 로 생성, 자료를 쉼표 ( , ) 로 연결해서 입력
키 : 값

 

  • 객체 요소 접근 : 객체 뒤에 [ ... ] 를 사용하고 키를 입력
객체 [ 키 ]

 

  • 온점 ( ... ) 사용
    • 보조 기능을 활용할 수 있음
객체 . 키

 

🩵 속성과 메소드

요소 (element) : 배열 내부에 있는 값

속성 (property) : 객체 내부에 있는 값

 

🤍 속성과 메소드 구분하기

메소드 (method) : 객체 속성 중 함수 자료형인 속성

 

🤍 메소드 내부에서 this 키워드 사용하기

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때 자신이 가진 속성임을 분명하게 표시해야 함

자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드 사용

 

🩵 동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다' 고 표현

 

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

JSON.stringify( ) 메소드 사용

 

🤍 동적으로 객체 속성 제거하기

delete 키워드 사용

delete 객체.속성

 

🩵 메소드 간단 선언 구문

  • function ( ) { } 형태로 메소드 선언할 수 있음
  • function () { } 형태로 선언하는 익명함수( ) => { } 형태로 선언하는 화살표 함수
    • 객체의 메소드로 사용될 때 this 키워드를 다루는 방식 다름

 

🩷 06-2 객체의 속성과 메소드 사용하기

🩵 객체 자료형

객체 자료형 (object) : 객체를 기반으로 하는 자료형, new 키워드를 활용해서 생성

  • 배열, 함수 객체
    • 배열인지 확인하려면 Array.isArray( ) 메소드 사용 
  • 일급 객체 (first-class object) : 다른 객체들에게 적용가능한 연산을 모두 지원하는 객체

🩵 기본 자료형

기본 자료형 (primitive types) : 실체가 있는 것 (undefined 와 null 등이 아닌 것) 중에 객체가 아닌 것

  • 숫자, 문자열, 불이 기본 자료형

 

🩵 기본 자료형을 객체로 선언하기

const 객체 = new 객체 자료형 이름 ( )

 

숫자 객체, 문자열 객체, 불 객체를 생성할 수 있음

 

🩵 프로토타입으로 메소드 추가하기

객체 자료형 이름.prototype.메소드 이름 = function( ) {

}

 

  • 최신 자바스크립트에는 제곱 연산자 (**) 가 있음 
    • 이를 사용하면 숫자를 n 제곱할 수 있음
  • 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하려면 valueOf( ) 메소드 사용
  • 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인하려면 indexOf( ) 메소드 사용 

 

🩵 Number 객체

🤍 toFixed( )

toFixed( ) : 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용

 

🤍 isNaN( ), isFinite( )

Number.isNaN( ), Number.isFinite( ) : 어떤 숫자가 NaN (Not a Number) 인지 또는 Infinity (무한) 인지 확인할 때 사용 

 

🩵 String 객체

🤍 trim( ) 

trim( ) 메소드 : 문자열 앞뒤 공백 (띄어쓰기, 줄바꿈) 등을 제거할 수 있음

 

🤍 split( )

split( ) 메소드 : 문자열을 매개변수 (다른 문자열로) 잘라서 배열을 만들어 리턴하는 메소드

 

🩵 JSON 객체

JSON (JavaScript Object Notation) : 자바스크립트의 객체처럼 자료를 표현하는 방식

  • 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있음 (함수 등은 사용 불가)
  • 문자열은 반드시 큰따옴표로 만들어야 함
  • 키 (key) 에도 반드시 따옴표를 붙어야 함

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify( ) 메소드 사용

JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse( ) 메소드 사용

 

🩵 Math 객체

Math 객체 : 수학과 관련된 기본적인 연산

  • pi, e와 같은 수학 상수 있음
  • Math.sin( ), Math.cos( ), Math.tan( ) 와 같은 삼각함수도 있음
  • 랜덤한 숫자를 생성할 때는 Math.random( ) 메소드 사용

 

🩵 외부 라이브러리

외부 라이브러리 : 다양한 함수와 클래스를 묶어서 제공해주는 것

  • 유틸리티 라이브러리
    • 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리
    • undersoce, Lodash 등 다양한 라이브러리가 있음 

 

🩷 06-3 객체와 배열 고급

🩵 배열 기반의 다중 할당

다중 할당 구문

[식별자, 식별자, 식별자, ...] = 배열

 

 

🩵 객체 기반의 다중 할당

객체 속성 꺼내서 다중 할당하기

{ 속성 이름, 속성 이름 } = 객체
{ 식별자 = 속성 이름, 식별자 = 속성 이름 } = 객체

 

🩵 배열 전개 연산자

얕은 복사 (참조 복사) : 참조 타입 데이터가 메모리 주소 값을 복사한 것

깊은 복사 : 새로운 메모리 공간을 확보해 완전히 복사하는 것 

 

전개 연산자를 사용한 배열 복사

[ ...  배열 ]

 

전개 연산자를 사용한 배열 요소 추가

[ ... 배열, 자료, 자료, 자료 ]

 

🩵 객체 전개 연산자

전개 연산자를 사용한 객체 복사

{ ... 객체 }

 

전개 연산자를 사용한 객체 요소 추가

{ ...객체, 자료, 자료, 자료 }
profile

에뛰드 블로그

@MISU 미수

매일 1px씩 성장하는 개발자입니다! 성장하면서 알게 된 저의 지식을 공유하기 위한 블로그입니다

검색 태그