TIL | #04 | 자바스크립트 기초 | 23.12.02.(토)

23.12.02.(SAT).TIL.

Part.05. 객체 기본문법

객체

배열 : 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조

리터럴과 프로퍼티

중괄호 {...} 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어간다.

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

'콜론(:)'을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티  ‘이름’ 혹은 '식별자’라고도 부른다.

대괄호 표기법

'점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 한다. 또한 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수 문자가 없어야 한다.
키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.

계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property) 라고 부른다.

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

let bag = {

[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 온다.

};

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

단축 프로퍼티

위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일하다. 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔한데, 프로퍼티 값 단축 구문(property value shorthand) 을 사용하면 코드를 짧게 줄일 수 있다.
name:name 대신 name만 적어주어도 프로퍼티를 설정할 수 있다.
function makeUser(name, age) {
return {
name, // name: name 과 같음
age,  // age: age 와 같음
// ...
  };
}

한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능하다.
let user = {
name,  // name: name 과 같음

    age: 30

};

프로퍼티 이름의 제약사항

프로퍼티 이름엔 특별한 제약이 없다. 어떤 문자형, 심볼형 값도 프로퍼티 키가 될 수 있다.

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

자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것이다.

'for...in' 반복문

for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다. for..in은 앞서 학습했던 for(;;) 반복문과는 완전히 다르다.

for..in 반복문에서도 for(;;)문처럼 반복 변수(looping variable)를 선언(let key)했다는 점에 주목해 주시기 바란다.

반복 변수명은 자유롭게 정할 수 있다. 'for (let prop in obj)'같이 key 말고 다른 변수명을 사용해도 괜찮다.

객체 정렬 방식

정수 프로퍼티?

'정수 프로퍼티’라는 용어는 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미한다.

참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것이다.

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

참조에 의한 비교

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

객체 복사, 병합과 Object.assign

객체 복사, 병합과 Object.assign

객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다는 걸 배웠다.
그런데 객체를 복제하고 싶다면 어떻게 해야 할까? 기존에 있던 객체와 똑같으면서 독립적인 객체를 만들고 싶다면 말이다.
정말 복제가 필요한 상황이라면 새로운 객체를 만든 다음 기존 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사하면 된다.

Object.assign를 사용하는 방법도 있다.

문법과 동작 방식은 다음과 같다.
Object.assign(dest, [src1, src2, src3...])
- 첫 번째 인수 dest는 목표로 하는 객체이다.
- 이어지는 인수 src1, ..., srcN는 복사하고자 하는 객체이다. ...은 필요에 따라 얼마든지 많은 객체를 인수로 사용할 수 있다는 것을 나타낸다.
- 객체 src1, ..., srcN의 프로퍼티를 dest에 복사한다다. dest를 제외한 인수(객체)의 프로퍼티 전부가 첫 번째 인수(객체)로 복사된다.
- 마지막으로 dest를 반환한다.

중첩 객체 복사

깊은 복사 시 사용되는 표준 알고리즘인 Structured cloning algorithm을 사용하면 위 사례를 비롯한 다양한 상황에서 객체를 복제할 수 있다.

자바스크립트 라이브러리 lodash의 메서드인 \_.cloneDeep(obj)을 사용하면 이 알고리즘을 직접 구현하지 않고도 깊은 복사를 처리할 수 있으므로 참고하시기 바란다.

메서드와 this

메서드 만들기

객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(object-oriented programming, OOP) 이라 부른다.

메서드 단축 구문

// 아래 두 객체는 동일하게 동작합니다.

user = {
    sayHi: function() {
        alert("Hello");
    }
};

// 단축 구문을 사용하니 더 깔끔해 보인다.
user = {
    sayHi() { // "sayHi: function()"과 동일하다.
    alert("Hello");
}

};

메서드와 this

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

자유로운 this

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다. 자바스크립트에선 모든 함수에 this를 사용할 수 있다.

this가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않는다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다다.

new 연산자와 생성자 함수

생성자 함수

1. 함수 이름의 첫 글자는 대문자로 시작한다.

2. 반드시 'new' 연산자를 붙여 실행한다.

new.target과 생성자 함수

일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환한다. 반면 new와 함께 호출한 경우엔 new.target은 함수 자체를 반환한다.

생성자와 return문

생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

그런데 만약 return 문이 있다면 어떤 일이 벌어질까? 아래와 같은 간단한 규칙이 적용된다.
객체를 return 한다면 this 대신 객체가 반환된다.
원시형을 return 한다면 return문이 무시됩니다.

생성자 내 메서드

class 문법을 사용하면 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 만들 수 있습니다. class에 대해선 추후 학습하도록 하겠습니다.

 

* 출처 : 내배캠 깃북