Javascript_객체

YOOJIN PARK·2021년 12월 6일
0

js공부하기

목록 보기
7/12

객체

원시값을 제외한 나머지 값은 모두 객체 이다.
객체는 관련된 데이터와 함수로 이루어지는데, 이는 객체안에서 프로퍼티랑 메소드라 부른다.

1. 원시값과 객체

원시값은
string, number, boolean, undefined, symbol, null
변경 불가능한 값(변수가 아니라 값-불변성)
변수를 할당하면 실제값이 저장된다.
원시값을 갖는 변수를 다른 변수에 할당하면 원시 값은 복사되어 전달된다.(값에 의한 전달_pass by value)

객체는
원시값을 제외함 함수, 배열, 정규표현식등 나머지 모든것
변경 가능한 값
변수를 할당하면 참조값이 저장 된다
다른 변수에 할당하면 참조 값이 복사되어 전달 된다.(참조에 의한 전달_pass by reference.. 사실은 값에 의한 전달...뒤에 설명)

1-1) 원시값

  • 원시값은 숫자는 8바이트, 문자는 문자열의 크기에 따라 개당 2바이트가 필요하다.
  • 문자열은 유사배열 객체(인덱스나 length) 이면서 이터러블 이므로 배열과 유사하게 작용한다.

불변성

  • 한번 생성된 원시값은 읽기 전용으로, 변경할 수 없다.
  • 실제로 변수에 값을 재할당하면 그 값이 변하는게 아니라 변수가 참조하던 공간의 주소가 바뀜
  • 원시 타입은 크기가 브라우저마다 다를 수 있다.
let x = 10;
function test(a) {
    a = 10000;
}
test(x)
x   /10

값에 의한 전달

  • 원시값을 갖는 변수를 다른 변수에 할당하면 원시 값은 복사되어 전달된다.(값에 의한 전달_pass by value)
var cost =1000;
var bread = cost;
cost = 2000;

bread
1000
  • 이 둘은 같은 같지만, 다른 메모리 공간에 저장된 별개의 값이다.
var score = 80;
var copy = score;
console.log(score,copy)
  • 그래서 두 변수의 원시값은 서로 다른 메모리 공간에 저장된 별개값이 되어, 어느 하나가 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

1-2) 객체

  • 객체는 동적으로 추가되고 삭제될 수 있다.
  • 그렇기 때문에 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다.
  • 그렇기 때문에 객체의 경우는 랜덤한 주소에 메모리를 할당하고, 그 속성을 다루기 위해서는 그 주소(참조값)에 접근

객체 관리 방식

  • 해시 테이블 (키 - 해시펀션-벨류) (?? 히든 클래스??)

단점

  • 참조에 의한 전달은 참조값을 복사하므로, 동일한 객체를 가리킨다.

  • 여러개의 식별자가 하나의 객체를 공유할 수 있다 .

  • 그렇기 때문에 어느 한쪽이 객체를 변경하면 서로 영향을 받는다.

  • 얕은 복사: 중첩되어 있는 객체의 참조값을 복사

  • 깊은 복사: 중첩되어 있는 객체까지 모두 복사해서 원시값처럼 만듬

2.객체생성

보통 객체지향 언어들은 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.

인스턴스
객체가 메모리에 저장되어 실제로 존재하는 것

자바스크립트는 프로토타입 기반 객체지향 언어로, 다양한 객체 생성 방법을 지워한다.

1-1) 객체 리터럴

객체를 생성하기 위한 표기법
중괄호 이용

  • 객체리터럴의 중괄호는 코드 블록을 의미하지 않는다.(중괄호 뒤 세미콜론 필요)
let person = {
  //key: value
  name: '제니',
  age: 10,
  height : 30,
  weight : 40,
  이력 : {'첫번째직장' : '하나', '두번째직장' : '둘'}
}
  • 객체 생성한 이후에 프로퍼티를 추가하는 것도 가능하다.
 var 먹고싶은거 = {};
 var key = '지금';

먹고싶은거[key] = '감자튀김';

console.log(먹고싶은거)
{지금: '감자튀김'}
  • 객체 리터럴 이후에 객체 생성 방식은 모두 함수를 사용해 객체를 생성한다.
  • 프로퍼티 키에 문자열이나 심벌 값외의 값을 사용하면 문자열로 타입 변환을 한다.(따옴표가 붙진 않는다)

1-2) 프로퍼티

프로퍼티: 객체의 값 또는 상태
메서드: 프로퍼티를 조작할 수 있는 동작
프로퍼티는 식별자 네이밍을 따라야 한다
만약에 이를 지키지 않으면 꼭 따옴표를 쓰자!

<프로퍼티 접근>

person.이력.첫번째직장   //하나
person['이력'].첫번째직장  //하나

1번은 마침표 프로퍼티 접근 연산자를 사용한 마침표 표기법

  • 식별자 네이밍을 준수하지 않는 이름은 대괄호 표기법을 이용하자.
  • 마침표 연산자는 점이 찍힌 식별자 안에서 찾기때문에 따옴표를 안적어도 된다.

2번은 대괄호 프로퍼티 접근 연산자를 사용한 대괄호 표기법

  • 대괄호 프로퍼티 접근 연산자 내부는 따옴표로 감싸야 한다. 아니면 변수인줄 안다.
  • 이때 프로퍼티키가 숫자인 경우는 따옴표를 생략할 수 있다.

✔️ 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

✔️ 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고, 프로퍼티 값이 할당 된다.

var dinner = {
    menu: 'pizza'
};

dinner.place = 'seoul';
console.log(dinner)

{menu: 'pizza', place: 'seoul'}

✔️ 프로퍼티 삭제

delete 연산자를 이용해 객체의 프로퍼티를 삭제한다.

delete dinner.menu;

console.log(dinner)
{place: 'seoul'}

✔️ 프로퍼티 축약 표현

프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일때, 프로퍼티 키를 생략할 수 있다.

let a = 100;
let b = 200;

let 오브 = {
    a:a,
    b:b
};

console.log(오브)
{a: 100, b: 200}
  • 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
let 오브 = {a,b};
  • 변수 이름과 프로퍼티 키가 같다면 위와 같이 표현할 수도 있다.

✔️ 계산된 프로퍼티 이름

문자열이나 문자열로 변환할 수 있는 표현식이 키로 올 수 있다.
이때는 대괄호로 묶어야 한다.

1-3) 메서드

자바스크립트의 함수는 일급 객체이다.
그러므로 프로퍼티 값으로 이용할 수 있고, 이를 일반 함수와 구분하기 위해 메서드 라 부른다.

아무래도 메서드는 따로 정리해야 겠다.
엄청 많다.. 객체안에서 정리할 수 있는 문제가 아니다!!


뭔가 틀이 잡히는데 자세히 보면볼수록 더 알아가야 하는게 많은 자바스크립트
그래도 재밌다!!😆

profile
개발자를 꿈꾸는 개린이입니다.

0개의 댓글