Front-end/JavaScript

CORE JS 객체:기본

ekki88 2022. 6. 20. 00:18

객체

객체형

객체형은 원시형과 달리 다양한 데이터 담을 수 있음

키로 구분된 데이터 집합, 복잡한 개체(entity)저장가능

중괄호를 이용해 만든다

중괄호 안에는 키(key):값(value) 쌍으로 구성된 프로퍼티를 여러개 넣을 수있다

키엔 문자형 값엔 모든 자료형 허용

 

빈객체를 만드는방법 두가지

중괄호를 이요해 객체선언하는 것을 객체 리터럴이라고 부르고 주로 이방법 사용

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

 

 

리터럴과 프로퍼티

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

//불린형 프로퍼티 추가
user.isAdmin = true;

// delete 연산자 사용하여 프로퍼티 삭제
delete user.age;

//여러단어 조합해 프로퍼티 이름 만들경우 따옴표로 묶어야함
let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

//마지막 프로퍼티 끝은 쉼표로 끝날 수 있음
let user = {
  name: "John",
  age: 30,
}

중괄호 안에는 키:값 쌍으로 구성된 프로퍼티가 들어감

콜론을 기준으로 왼쪽에 키 오른쪽엔 값 프로퍼티 키는 이름 혹은 식별자라고도 부름

객체 유저에는 프로퍼티가 두개있다

첫번째 프로퍼티 name(이름)과 john(값) 

두번째 프로퍼티 age(이름)와 30(값) 

서랍장(객체user)안에 파일 두개(프로퍼티 두 개)가 담겨있는데 각파일에 name,age라는 이름표가 붙어있다 생각하면 쉽다!

 

in 연산자로 프로퍼티 존재 여부 확인

문법

'key' in object

in 왼쪽엔 반드시 프로퍼티 이름이 와야함 프로퍼티 이름은 따옴표로 감싼 문자열

 

 

참조에 의한 객체 복사

 

객체와 원시타입의 근보적 차이 중 하나는 객체는 참조에 의해 저장되고 복사된다는것

(원시값(문자열, 숫자, 불린값)은 값 그대로 저장 할당되고 복사)

변수에 객체 그대로 저장되는 것이 아니라 객체가 저장되어있는 메모리 주소인 객체에 대한 참조 값이 저장

 

참조에 의한 비교

객체 비교시 동등연산자와 일치연산자는 동일 동작

비교시 피연산자인 두객체가 동일한 객체인 경우 참을 반환

let a = {};
let b = a; // 참조에 의한 복사

alert( a == b ); // true, 두 변수는 같은 객체를 참조합니다.
alert( a === b ); // true

//두객체 모두 비어있다ㅡㄴ 점에서 같아 보이지만 독립된 개체이기때문에 거짓이 반환
let a = {};
let b = {}; // 독립된 두 객체

alert( a == b ); // false

 

객체는 참조에 의해 할당되고 복사됨

변수엔 ‘객체’ 자체가 아닌 메모리상의 주소인 '참조’가 저장, 따라서 객체가 할당된 변수를 복사하거나 함수의 인자로 넘길 땐 객체가 아닌 객체의 참조가 복사

그리고 복사된 참조를 이용한 모든 작업(프로퍼티 추가·삭제 등)은 동일한 객체를 대상으로 이뤄짐

객체의 '진짜 복사본’을 만들려면 '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign이나 '깊은 복사’를 가능하게 해주는 _.cloneDeep(obj)를 사용하면 됨 이때 얕은 복사본은 중첩 객체를 처리하지 못한다는 점을 기억 !

 

가비지컬렉션

모든객체를 모니터링하고, 도달할 수 없는 객체 삭제

 

메서드와 this

 

메서드

객체는 사용자, 주문등과 같이 실제 존재하는 개체를 표현하고자 할 때 생성

메서드: 객체 프로퍼티에 할당된 함수

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!



let user = {
  // ...
};

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록, 이미 정의된 함수를 이용해서 만들 수 있음
user.sayHi = sayHi;

user.sayHi(); // 안녕하세요!

 

메서드와 this

메서드는 객체에 저장된 정보에 접근 할 수 있어야 제 역할 가능

대부분의 메서드가 객체 프로퍼티값을 활용

메서드 내부에서 this 키워드 사용시 객체 접근 가능

점 앞의 this는 객체를 나타냄 메서드를 호출할 때 사용된 객체!

함수를 선언시 this를 사용가능 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않음

함수를 복사해 객체 간 전달가능 함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조

 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

 

this가 없는 화살표 함수

화살표 함수는 고유한 this를 가지지않음

화살표 함수에서 this 참조시 화살표 함수가 아님 평범한 외부함수에서 this 값을 가져옴

 

 

new 연산자와 생성자 함수

생성자 함수

유사한 객체를 여러개 만들 때 유용하다

함수이름의 첫 글자는 대문자로 시작

반드시 new연산자를 붙여 실행, 호출시 내부에서 this가 암시적으로 만들어지고 마지막엔 this반환

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보미");

alert(user.name); // 보미
alert(user.isAdmin); // false

 

심볼형

심볼

심볼symbol은 원시형 데이터로 유일한 식별자를 만들고 싶을 때 사용

symbol()을 사용하면 심볼값 만들 수 있고 설명(이름)은 선택적 추가 가능

심볼은 이름이 값더라고 값은 항상 다름

심볼 이름은 디버깅시 아주 유용

심볼은 문자형으로 자동 형 변환되지 않음

 

 

 

 

과제

다음 각 동작을 한 줄씩, 코드로 작성해보세요.

  1. 빈 객체 user를 만듭니다.
  2. user에 키가 name, 값이 John인 프로퍼티를 추가하세요.
  3. user에 키가 surname, 값이 Smith인 프로퍼티를 추가하세요.
  4. name의 값을 Pete로 수정해보세요.
  5. user에서 프로퍼티 name을 삭제하세요.
let user = {};
user.name = 'john';
user. surname = 'smith';
user.name = 'pete';
delete user.name;

 

 

저작자표시 (새창열림)