[TIL-009] 20.07.30

1. Summary(3 Line)

프리코스 4일차(3줄 요약)

- 9시~ 18시... 시간이 훅 간다

- 배열, 객체 자체 개념은 쉽지만 관련 메소드를 활용을 어찌해야될지...

- 습득력과 이해력이 좋으신 나의 페어

 

---

2. Today's Todo

• 배열
  - 조회, 변경
  - Array.isArray
  - push, pop, unshift, shift

• 객체
  - Dot Notation / Bracket Notation
  - 객체의 값 추가
  - 객체의 값 삭제(delete) 
  - 객체의 키 값 확인(in)

 

#1 배열

: 배열은 순서가 있는 값. 배열의 순서를 인덱스(index)라고 부른다. 

 

1. 인덱스를 이용해 값에 접근 방법

let myNumber = [73, 98, 86, 61, 96];

[3번째 인덱스 조회]  myNumber[3];  // 61
[3번째 인덱스 변경]  myNumber[3] = 200;   =>  myNumber;  // [73, 98, 86, 200, 96];
[인덱스(요소) 길이] myNumber.length      => 5

 

 

2. Array.isArray() : 배열인지 아닌지 확인하기 

let words = [ '피', '땀', '눈물' ];

Array.isArray('문자열');  // false
Array.isArray(123);  // false
Array.isArray(words);  // true
Array.isArray([ 1, 2, 3 ])  // true
Array.isArray([ ])  // true

 

 

3. 배열 요소 추가 및 삭제(push, pop, unshift, shift)

let array = ['code', 'states', 'zzang'];

array.push('add'); // 4
console.log(array) // ['code', 'states', 'zzang', 'add'];

array.pop(); // 'add'
console.log(array) // ['code', 'states', 'zzang'];

array.shift(); // 'code'
console.log(array) // ['states', 'zzang'];

array.unshift('start'); // 3
console.log(array) // ['start', 'states', 'zzang'];

 

 

4. 배열 요소 포함 여부 확인(indexOf, includes)

let array = ['code', 'states', 'zzang', '있는단어'];

// 해당 요소가 몇번째 있는지 인덱스 번호를 출력
words.indexOf('zzang'); // 2
words.indexOf('code'); // 0
words.indexOf('states'); // 1
words.indexOf('있는단어'); // 3

// 해당 요소가 몇번째 있는지 인덱스 번호를 출력하는데 없다면 -1 출력
words.indexOf('apple'); // -1
words.indexOf('없는단어') // -1

words.indexOf('있는단어') !== -1 // true;
words.indexOf('없는단어') !== -1 // false;

// 해당 요소가 있는지 없는지 true false로 판별함
words.includes('있는단어'); // true
words.includes('없는단어'); // false

 

#2 객체

: 객체는 키와 값으로 이루어져 있으며, 주소록이나 회원정보 등에 적합한 자료 구조이다.

 

1. 객체 값 사용 방법 2가지

let user = {
  firstName: '김',
  lastName: '개똥',
  email: 'ieb6721@naver.com',
  city: 'incheon'
};


// 방법1 : Dot Notation
user.firstName; // '김'
user.city; // 'incheon'

// 방법2 : Bracket Notation
user['firstName']; // '김'
user[city]; // Reference Error
user['city']; // 'incheon'

user['firstName'] === user.firstName; // true

 

 

2. 객체에 값 추가

let user = {
  firstName: '김',
  lastName: '개똥',
  email: 'ieb6721@naver.com',
  city: 'incheon'
};

user['tel'] = '8120'
user.isPublic = true;
user.tags = ['ppap', 'apple'];

 

 

3. 객체의 키 삭제(delete)

let user = {
  firstName: '김',
  lastName: '개똥',
  email: 'ieb6721@naver.com',
  city: 'incheon'
};

// createAt 키-값 쌍을 지운다.
delete user.email;
// user은 { firstName: '김', lastName: '개똥', city: 'incheon' }

 

 

4. in 연산자를 이용해 해당하는 키가 있는지 확인

let user = {
  firstName: '김',
  lastName: '개똥',
  email: 'ieb6721@naver.com',
  city: 'incheon'
};

'email' in user; // true
'tel' in user; // false