[SEB FE] Section 1

Unit9 - [JavaScript] 배열, 객체

• 객체

---

회고

오늘은 자바스크립트의 객체까지 배움으로써 언어의 문법 중 가장 기본인 변수, 배열, 조건문, 반복문, 함수까지 개념을 학습하고 문제까지 풀었습니다.

자바스크립트의 객체는 자바와 다르게 그렇게까지 어려운 개념은 아닌 거 같지만 그래도 모든 게 그렇듯 응용을 하면 한도 끝도 어려워지기에... (코플릿 21번 문제 어려웠다능)

까먹지 않도록 복습을 열심히 하도록 하겠습니다! 주말에도 쉬지 않고 평일처럼 Go!🫡

---

객체

학습목표

• 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
• 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

개념학습

• 객체의 선언 예시

let user = {
	firstName: 'Steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'Seoul'
};

• 객체는 키와 값 쌍(key-value pair)으로 이루어져 있다.

lastName
- 키(key)

'Lee'
- 값(value)

:
- 키, 값 사이는 콜론(:)으로 구분한다.

{}
- 중괄호(curly bracket)를 이용해서 객체를 만든다.

,
- 키-값 쌍(key-value pair)은 쉼표(comma)로 구분해준다.

• 객체의 값을 사용하는 방법은 두 가지가 있다.

    - 방법 1: **Dot notation**
---
let user = {
	firstName: 'Steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'Seoul'
};

user.firstName; // 'Steve'
user.city; // 'Seoul'

---

    - 방법 2: **Bracket notation**
---
let user = {
	firstName: 'Steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'Seoul'
};

user['firstName']; // 'Steve'
user['city']; // 'Seoul'

---

- Bracket notation을 사용하여 값을 조회할 때는 key를 따옴표(''. "")로 감싸주어야 한다.
- 백틱(`)도 사용이 가능하다.

• 키 값이 변수일 때 또는 키 값이 동적으로 변할 때는 Dot notation이 아닌 Bracket notation을 이용한다.

tweet {
	writer: "stevelee",
    createdAt: "2019-09-10 12-03:33",
    content: "프리코스 재밌어요!"
};

let keyname = 'content';

tweet[keyname] // "프리코스 재밌어요!"

• 정리

tweet {
	writer: 'stevelee',
    createdAt: '2019-09-10 12-03:33',
    content: '프리코스 재밌어요!'
};

tweet['content'] === tweet.content; // true

• Dot/Bracket notation을 이용해 값을 추가할 수도 있다.

tweet {
	writer: 'stevelee',
    createdAt: '2019-09-10 12-03:33',
    content: '프리코스 재밌어요!'
};

tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

• delete 키워드를 이용해 삭제도 가능하다.

tweet {
	writer: 'stevelee',
    createdAt: '2019-09-10 12-03:33',
    content: '프리코스 재밌어요!'
};

// createAt 키-값 쌍을 지운다.
delete tweet.createdAt;

• in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다.

let tweet = {
	writer: 'stevelee',
    createdAt: '2019-09-10 12:03:33',
    content: '프리코스 재밌어요!'
};

'content' in tweet; // true
'updatedAt' in tweet; // false