2023-09-06 사전캠프 3일차 TIL

JavaScript Handbook 정리 (09/06)

part 05. 객체 기본문법

1. 객체

- 원시형과 객체형의 차이
원시형 : 오직 하나의 데이터를 담을 수 있음
객체형 : 다양한 데이터를 담을 수 있음


- 객체의 생성
객체 리터럴 문법 :
중괄호 ( {...} )를 이용하여 선언한다. 이를 객체 리터럴이라고 부른다.
중괄호 내에는 키(key), 콜론(:), 값(value)료ㅗ 이루어진 프로퍼티가 여러개 포함된다.
키에는 문자열, 값에는 모든 자료형이 허용된다.

객체 생성자 문법 :
new 키워드와 Object() 생성자 함수를 통해 비어있는 객체를 만들 수 있다.

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

객체는 리터럴 방식으로 주로 선언한다/


- 객체 리터럴과 프로퍼티
리터럴 방식으로 객체를 생성하면 생성과 동시에 프로퍼티를 추가할 수 있다.

let user = {
  name : 'John',
  age : 30
}

위 코드에는 두개의 프로퍼티가 존재한다.
1. 키 : user, 값 : 'John'
2. 키 : age, 값 : 30

이러한 프로퍼티는 추가하고 삭제가 가능하며 읽는 것도 가능하다.
1. 읽는법 
alert(user.name); // 'John'
프로퍼티는 객체 식별자 뒤에 마침표를 찍으면 접근이 가능하다.
마침표 뒤에는 내가 참조하고 싶은 프로퍼티의 키를 써주면 된다.

2. 추가법
user.isAdmin = true;
프로퍼티의 추가는 읽는 법과 비슷하게 접근하다.
객체 식별자 뒤에 마침표를 찍고 그 뒤에 추가하고 싶은 프로퍼티의 키를 입력한다.
값은 변수에 값을 할당하 듯 대입 연산자를 이용하여 값을 준다.

3. 삭제법 
delete user.age;
프로퍼티의 삭제는 동일하게 마침표를 이용하여 원하는 키를 가진 프로퍼티에 접근하고,
맨앞에 delete라는 키워드를 사용하여 삭제한다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};
프로퍼티의 키는 식별자의 역할을 한다.
따라서 자바스크립트 네이밍 규칙을 준수한 이름을 사용하는 것을 권장하며,
자바스크립트 네이밍 규칙을 준수한다면 따옴표 없이 사용가능하다.
다만 네이밍 규칙을 준수하지 않는 이름은 꼭 따옴표를 써야한다.

let user = {
  name: "John",
  age: 30,
}
각 프로퍼티는 쉼표로 구분이 되며, 마지막 프로퍼티 뒤에도 쉼표 작성이 가능하다.

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete
앞에서 배운 const는 상수의 역할을 하여 값을 바꿀 수 없다고 했다.
하지만 const로 선언한 객체는 내부의 프로퍼티를 변경할 수 있다.
이유는 객체의 식별자가 값 자체를 참조하는 것이 아닌 객체 값의 위치를 참조하고 있기 떄문이다. (참조값을 참조)


- 대괄호 표기법
user.likes birds = true // Error
프로퍼티의 키가 자바스크립트 네이밍규칙을 따르지 않는 경우에는 마침표를 통해서 접근할 수 없다.
이 때 사용하는 것이 대괄호 표기 법이다.

위 코드를 대괄호 표기법을 통해 정상적으로 동작하게 만들어 보면 다음과 같다.
user['likes birds'] = true

프로퍼티 생성, 삭제, 참조 간 모두 동일하다.
let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

대괄호 표기법은 자바스크립트 네이밍 규칙을 따른 key와 그렇지 않은 key 모두 접근할 수 있다.
또한 키를 더욱 유연하게 작성이 가능하다.


- 계산된 프로퍼티
객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 계산된 프로퍼티라고 한다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

대괄호 내에 표현식이 들어가며 해당 표현식의 평가 값이 프로퍼티의 키가 되는 것이다.


- 단축 프로퍼티
기존 변수를 객체의 프로퍼티로 만들 때 사용한다.

let name ='kim';
let age =24;

let user = {
  name,  // name: name 과 같음
  age // age: age 과 같음
};

기존에 있던 변수의 이름을 그대로 키로 사용하고 변수 값이 값이 되는 프로퍼티가 간단하게 생성된다.


- in 연산자를 활용한 프로퍼티 존재 확인
자바스크립트에서는 존재하지 않는 프로퍼티를 참조해도 오류가 발생하지 않는다.
존재하지 않는 프로퍼티를 참조 시 undefined가 반환된다.

객체 내에 내가 원하는 키를가진 프로퍼티가 있는지 확인하기 위해서는 in 연산자를 활용한다
"key" in object


- for in 연산자를 활용한 객체 내 모든 프로퍼티 순회
for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

---

2. 참조에 의한 객체 복사

- 객체와 원시타입의 근본적인 차이점
원시타입 : 값에 의한 복사
객체타입 : 참조에 의한 복사

원시타입의 자료형에서는 값 자체를 그대로 할당하고 복사하는 값에 의한 복사를 한다.

반대로 객체타입으로 선언된 자료형에서는 변수에 객체가 그대로 저장되는 것이아닌, 객체가 저장되어있는 메모리 주소 객체를 참조한다.

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

위 코드처럼 user에 객체가 선언되었고 user 라는 변수 차체를 새로운 변수인 admin에 할당하였다.
이때 할당된 것은 객체 값 자체가 아닌 객체 값을 참조하고 있는 참조 값이다.

따라서 user와 admin에는 객체 값을 참조하고있는 참조값을 공통적으로 가지고 있다.
결론적으로 하나의 변수에서 값의 변화가 생기면 다른 변수도 동일한 변화를 가진다는 것이다.

- 객체를 순수하게 복사하는 방법
객체를 참조에 의한 복사가 아닌, 독립되게 복사하는 방법도 있다
1. 새로운 변수를 만들어서 값만 복사한다.
2. Object.assign을 활용한다

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

let clone = Object.assign({}, user);

Object.assign은 여러 객체를 하나의 객체로 병합하는 메서드이다.
Object.assign(dest, [src1, src2, src3...])

---

3. 메서드와 this

메서드 : 객체 내에서 정의된 함수

매서드는 객체내에서 동작을 묘사한다. 
매서드는 객체지향프로그래밍(OOP)에서 중요한 역할을한다.

-메서드의 선언
매서드는 객체내에서 선언되며, 기본적인 형식은 다음과 같다.
user = {
  sayHi: function() {
    alert("Hello");
  }
};

위 코드를 단축할 수 있는 방법이 있다.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

function을 생략하고 메서드를 정의할 수 있다.

- 메서드와 this
메서드는 객체 내의 정보, 즉 프로퍼티에 접근하여 사용될 때 그 역할을 다한다고 할 수 있다.
이때 메서드 내부의 정보, 내부의 프로퍼티에 접근하기 위해서 this 키워드를 사용한다. 
let user = {
  name: "John",
  age: 30,

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

};

user.sayHi(); // John

이 때 this는 객체 자신을 나타낸다.

- this
this는 화살표 함수를 제외한 모든 함수에서 사용된다.
이때 this가 가리키는 것은 참조하는 객체를 나타낸다.

---

4. new 연산자와 생성자 함수
비슷한 형태의 객체를 여러개 만들어야 할 때 new 연산자와 생성자 함수를 사용하여 쉽게 만들 수 있다.

- 생성자 함수
생성자 함수는 일반 함수와 기술적인 차이는 없으며,
구분하기 위해서 규칙을 따른다
1. 함수의 첫글자는 대문자
2. 반드시 new 연산자 사용

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

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

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

위 생성자 함수는 다음과 같은 로직을 따른다.

1. 빈 객체를 만들어 this에 할당합니다.
2. 함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정합니다.
3. this를 반환합니다.

- new.target 프로퍼티
new.target은 생성자 함수가 new를 이용해서 선언되었는지 확인 하는 프로퍼티로
new를 이용하여 생성되었다면 함수 자체를 반환하고 아니면 undefined를 반환한다.
이를 통해 우리는 예외처리(?)를 할 수 있다.

function User(name) {
  if (!new.target) { // new 없이 호출해도
    return new User(name); // new를 붙여줍니다.
  }

  this.name = name;
}

let bora = User("보라"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(bora.name); // 보라


- 생성자와 return 문
생성자 함수에 보통 return을 사용하지 않으며, 
반환해야할 대상은 this에 저장한다.
(this는 자동으로 반환된돠)
하지만 return이 되어있는 경우 다음의 규칙을 따른다.

1. 객체를 return 한다면 this 대신 객체가 반환됩니다.
2. 원시형을 return 한다면 return문이 무시됩니다.

또한 인수가 없는 생성자함수는 괄호 생략이 가능하다. 다만 권장하는 방법은 아니다.

---

Part 06.객체 심화 문법
Map 자료 구조 : 객체와 유사한 자료구조로 차이점으로는 Key에 다양한 자료형이 올 수 있다.
Set 자료 구조 : 중복을 허용하지 않으며 순서가 없는 리스트
Array 자료구조

위 3가지 자료구조는 keys(), values(), entries() 메서드를 사용할 수 있다.

위 자료구조가 아닌 일반 객체에서도 유사하게 메서드를 사용할 수 있다
Object.keys(obj), Object.values(obj), object.entries(obj)

두 문법의 차이점은 다음과 같다.

호출문법 
- 맵 : map.keys() / 일반객체 Object.keys(obj)
 
반환값
- 맵 : iterable 객체 (나열되는 형태) / 일반객체 : '진짜'배열

---

---

- 프로젝트 복습

Album Project

깃허브 주소 : https://github.com/kms99/myAlbum

배포 주소 : https://kms99.github.io/myAlbum/

My Album