📝 오늘 한 것

1. 속성 접근자 / for in 반복문 / for of 반복문 / 메서드 / 배열과 함수 / property value shorthand / in 연산자 / 객체 복제하기 - Object.assign()

2. 자바스크립트 강의 수강 (object)

📖 학습 자료

1. 드림코딩 유튜브 '자바스크립트' 강의 7편

2. 노마드 코더 유튜브 '바닐라 자바스크립트' 강의 1-10(object)
   → 배열 안에 object를, object 안에 배열을 넣을 수 있다

3. 사전 학습 가이드 STEP 2 Object

📚 배운 것

object(객체)

---

• 우리가 접근할 수 있는 변수, 즉 속성과 그 값의 집합체

  object = { key : value, ... };

• 원시 타입 vs object(객체)

  • 원시 타입 : 변수 하나당 하나의 값밖에 담지 못함
    ex) const person = 'sam'

  • object(객체) : 여러 개의 값을 담을 수 있음
    ex) const person = {...}

• 객체 생성 방법

  • 객체 리터럴 문법 → const obj = {};
  • 객체 생성자 문법 → const obj = new Object();

1) 속성 접근자

• 객체에 저장된 속성 값을 수정하거나 가져오고자 할 때 사용

• 종류

  • 점(.) 표기법 : 객체 이름.속성 이름

  • 대괄호([ ]) 표기법 : 객체 이름['속성 이름']

const niceMan = {
  name : 'thunder',
  age : 15,
  '취미' : 'baseball',
  '주소' : '대한민국'
  // '객체 리터럴 내'의 속성 이름에 '식별자에 허용되지 않은 문자'가 들어간 경우
  // 반드시 따옴표('')를 써줘야 한다
};

// 객체에 저장된 속성 값 수정하기
niceMan.name = 'Muse';
niceMan['age'] = 20;
niceMan.취미 = 'swimming';
niceMan['주소'] = '미국';

// 객체에 저장된 속성 값 가져오기
console.log(niceMan['name']); // Muse
console.log(niceMan.age); // 20
console.log(niceMan['취미']); // swimming
console.log(niceMan.주소); // 미국

• computed properties ❗

  • 위는 이해를 위한 예시일 뿐, 실제 코딩할 때는 보통 점 표기법을 사용한다.

  • 대괄호 표기법은 코딩 당시에는 어떤 key가 필요할지 정확하게 모르고, key가 runtime에 결정될 때 사용한다.

  • 이를 통해 사용자가 입력하는 내용 등 실시간으로 원하는 key(속성)의 이름을 받아올 수 있다. 동적으로 key에 관련된 value를 받아와야 할 때 유용하게 쓰인다.

const syong = {
  name = 'leesyong',
  age = 10
}

// object와 key를 받아서 그 key에 상응하는 value를 출력하는 함수
function printValue(obj, key) {
  console.log(obj[key]); // obj.key 라고 쓰면 undefined 값이 뜬다
}

printValue(syong, 'name'); // leesyong
printValue(syong, 'age'); // 10
// key는 항상 string이어야 한다 ❗ 즉, 따옴표('')를 붙여 써야 한다 ❗

2) 객체의 속성 삭제하기

• delete 객체 이름. 속성 이름;

• delete 객체 이름['속성 이름'];

const vanilla = {
  taste : 'good',
  color : 'green',
  from : 'Mexico'
};

console.log(vanilla); // {taste : 'good', color: 'green', from: 'Mexico'}

delete vanilla.taste;
delete vanilla['color'];

console.log(vanilla); // {from : 'Mexico'}

3) for in / for of

• 반복할 수 있는 객체의 모든 원소를 하나씩 추출하여 변수에 담아 반복문을 수행하는 문법

• 자바스크립트 for 문, for in 문, for of 문 & for in와 for of 비교 - Iteration 참고

(1) for in 반복문

• 해당 객체의 모든 열거할 수 있는 속성에 대해 반복한다

• 배열의 경우, 모든 요소의 index를 출력한다

사용 방법

for (변수 in 객체) {

  // 반복적으로 실행하고자 하는 실행문;

}

예제 분석

// sample이란 객체의 속성과 속성값
const sample = {
  name : syong,
  age : 13,
  gender : F
}

// 루프마다 객체의 열거할 수 있는 속성들의 [이름]을 지정된 변수에 대입
for (let prop in sample) { 
  console.log(prop); // name age gender
  console.log(sample[prop]);
  // syong 13 F → 대괄호를 사용해 객체의 속성 값에 접근 가능
}

최종 출력 값

name
syong
age
13
gender
F

(2) for of 반복문

• 반복할 수 있는 객체(Array, Map, Set, String, TypedArray, arguments 등)에 대해 반복한다

• 배열의 경우, index만큼 반복하여 요소를 변수에 할당한다

사용 방법

for (변수 of 객체) {

  // 반복적으로 실행하고자 하는 실행문;

}

예제 분석 1

// sample이란 객체의 속성과 속성값
const sample = {
  name : syong,
  age : 13,
  gender : F
}

for (let state of sample) {
  console.log(state);
}
// 'sample is not iterable'이라는 error가 뜬다

예제 분석 2 (나머지 매개변수 학습 노트 참고)

// 루프마다 반복할 수 있는 객체의 [값]을 지정된 변수에 대입
function printALL(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

printALL('my', 'name', 'is', 'syong');

최종 출력 값

my
name
is
syong

예제 분석 3 (드림코딩 유튜브 '자바스크립트' 강의 7편 14분~ 참고)

const array = [1, 2, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

위 아래는 출력되는 값이 같다

const array = [1, 2, 4, 5];
for (let value of array) {
  console.log(value);
}

4) 메서드

• 객체의 프로퍼티 값으로 지정되는 함수

표기법 1

const study = {
  book: function () {
    return 'I love you';
  }
};

console.log(study.book()); // I love you

표기법 2

const play = {
  book () {
    return 'I love you';
  }
};

console.log(play.book()); // I love you

이때 book() 함수는 메서드(method)이다

5) 배열과 함수

• 자바스크립트에서는 배열과 함수도 객체의 범주에 포함된다

• 배열과 함수에도 일반 객체와 마찬가지로 원한다면 속성을 추가할 수 있지만, 실제로 그런 경우는 거의 없다

(1) 배열

const arr = [1, 2, 3];

console.log(arr[2]); // 3
console.log(arr.title); // undefined

arr.title = 'arrangement'; // 속성 추가
console.log(arr.title) // arrangement

(2) 함수

function adding (a, b) {
  return a + b;
}

console.log(adding(2, 3));
console.log(adding.title); //undefined

adding.title = 'func'; // 속성 추가
console.log(adding.title); // func

6) property value shorthand

• key(속성)와 value(값)가 같으면 key(속성)를 생략하고 쓸 수 있다

const personA = {name : 'sam', age: 14 };
const personB = {name : 'daniel', age: 13 };
const personC = {name : 'erick', age: 18};

// 다른 계산을 하지 않고 object를 만들어주는 함수 ❗
function makePerson (name, age) {
  return {
    name : name, // name, 라고 줄여 쓸 수 있다
    age : age // age 라고 줄여 쓸 수 있다
  }
}

const personD = makePerson ('tom', 16);
console.log(personD); // {name : 'tom', age : 16}

cf. 생성자 함수 ❗

function Person (name, age) {
  // this = {}; 가 생략됨
  this.name = name;
  this.age = age;
  // return this; 가 생략됨
}

const personD = new Person ('tom', 16);
console.log(personD); // {name : 'tom', age : 16}

7) in 연산자

해당 객체 안에 해당 key가 있는지 확인해준다

console.log('name' in syong); // true

8) 객체 복제하기(cloning)

📌 for in 반복문

고전적인 방법

const user1 = {name : 'lee', age : 24};

const user2 = {};
for (key in user1) {
  user2[key] = user1[key];
}

console.log(user2); // {name : 'lee', age : 24}

📌 Object.assign()

하나 이상의 원본 객체들(source)로부터 모든 열거 가능한 속성들을 대상 객체(target)로 복사해준다

const 대상 객체 이름 = {};
Object.assign(대상 객체 이름, 원본 객체 이름);

💡 여기서 잠깐!

• 자바스크립트에는 기본으로 탑재되어 있는 object들이 있다. 이를 표준 내장 객체라고 한다.
• Object 생성자는 표준 내장 객체 중 하나이다. (이때 생성자란 객체를 만드는 역할을 하는 함수를 의미한다.)
• 그런데 자바스크립트의 모든 object(객체)는 Object 생성자를 상속한다.
• 따라서 어떤 객체든 복제하고자 할 때 Object 생성자의 메서드를 이용할 수 있다.

✔ 원본 객체가 1개인 경우

const user1 = {name : lee, age : 24};

// 이 부분을
const user3 = {};
Object.assign(user3, user1);

console.log(user3); // {name : lee, age : 24}

// 이렇게 써도 된다
const user3 = Object.assign({}, user1);

✔ 원본 객체가 2개 이상인 경우

const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};

const fruit3 = Object.assign({}, fruit1, fruit2);

console.log(fruit3);
// {color: 'blue', size: 'big'}

여러 개의 원본 객체들 가운데 속성은 같으나 값이 다른 경우, Object.assign() 매개변수들 중 뒤에 나오는 원본 객체의 속성 값이 우선한다.

✨ 내일 할 것

1. 드림코딩 유튜브 '자바스크립트' 강의 8편 (배열)

2. 사전 학습 가이드 STEP2 Arrays, Quiz