20210213_JavaScript05 ,Object, Array

JavaScript05

• JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.)
  • 드림코딩by엘리 - JavaScript

Object (dict in python)

• one of the JavaScript's data types.

• a collection of related data and/or functionality

• Nearly all objects in JavaScript are instances of Object

• 오브젝트가 없으면

  • 일일이 변수들을 선언해 주어야 하고 코드의 중복이 많아짐
  • 정리가 어려워 찾기가 어려움 (접근하기도 불편해짐)
  • 즉, 자료의 검색, 정렬, 삭제, 추가가 어려움

// old way (변수가 모두 따로 따로 정의)
const name = 'raccoon';
const age = 4;
print(name, age); 
// 접근하기 편하게 하기위해서 특정 함수정의하고 이용해서 접근
function print(name, age) {
    console.log(name);
    console.log(age);
}

// Object 활용
// Objcect -> 사전 형식의 데이터 타입
function print(person) {
    console.log(person.name);
    console.log(person.age);
}

---

1. Literals and properties (values, keys in python)

• 신기하게도 JavaScript에서는 values를 literals라고 하고 properties를 keys라고 함
• Oject는 사전형 구조임 object = { key : value};

object 만드는 법

• object literal syntax -> {} 사용
• object constructor syntax -> new Object()
  • Object라는 클래스를 new라는 constructor를 이용해서 생성

const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // new라는 키워드로 생성`object constructor` syntax (class를 이용해서 만들수 있음)

const raccoon = {name: 'raccoon', age: 4}; 
// 클래스 생성 선언 없어도 바로 오브젝트 생성 가능
function print(person) {
    console.log(person.name);
    console.log(person.age);
}
print(raccoon);

Oject에서 property, literal 유연성

• JavaScript는 dynamically typed language 이기 때문에 동적으로 type이 runtime(프로그램 동작시)때 결정됨
• 선언된 상태에서도 propertym listeral에 접근해서 추가, 삭제, 변경 가능

const raccoon = {name: 'raccoon', age: 4};

raccoon.hasJob = true; // property를 추가 가능 (이미 정의 했음에도 불구하고)
console.log(raccoon.hasJob);

delete raccoon.hasJob; // 삭제도 가능
console.log(raccoon.hasJob);

2. Computed properties (계산된 key)

• key should be always string
• 접근 방법
  • properties(key)에 dot .을 통해서 변수 접근 가능함
    • (보통 정적으로 정해진 property의 이름을 이용하는 경우)
  • 동적으로 string 형태 받아 []를 통해 key에 접근 가능함
    • (동적으로 다양한 이름의 property를 받아 활용하고 싶을 때 []를 사용)

console.log(raccoon['name']);
raccoon['hasJob'] = true;
console.log(raccoon.hasJob);

function printValue(obj, key) {
    console.log(obj.key); // error 
    // obj안에 key라는 이름의 property가 들어 있는가 찾아보는 것임 (매개변수를 못받음)
    console.log(obj[key]) // 이렇게 넣음으로서 파라미터를 받아와서 응용가능 (동적으로 key의 value를 받고자 할때 사용가능)
}
printValue(raccoon, 'name'); 
printValue(raccoon, 'age'); 

3. Property value shorthand

• object 생성시 동일한 key값을 계속해서 써서 생성해야하는 불편함이 생김

• function을 정의 object 생성기를 만듬 -> 기능은 결국에 template기능인 class 와 같음

• 과거 Object 생성시 key 중복 코딩

const person1 = { name: 'bob', age: 2};
const person2 = { name: 'steve', age: 3};
const person3 = { name: 'dave', age: 4};
// name, age를 계속 작성해야됨

• 함수를 이용한 Object 생성 template

  • 함수안에 parameter 와 property이름을 같이해서 작성

  • 나중에 parameter을 생략해서 그냥 property이름만 넣으면 같게 해주는 기능이 생김

    function makePerson(name, age) {
    return {
        name, // name: name, (property이름과 parameter 이름이 같으면 생략해서 object 생성가능)
        age, // age: age,
    };
    }

4. Constructor Function (생성자 함수)

• 과거 fucntion을 이용한 template에서 발전함
• 계산하는 것 없이 순수하게 Objcect 생성하는 함수 만들때 사용
• 이름 첫글자 대문자

function Person(name, age) {
    // this = {}; (원리가 생략 된 부분) interface(내장 함수)에서 제공
    this.name = name;
    this.age = age;
    // return this; (원리가 생략 된 부분)
}
const person5 = new Person('jerry', 34); // object 생성법
console.log(person5)

5. 'in' operator: property existence check (key in obj)

• 해당하는 오브젝트안에 키가 있는지 없는지 확인하는 것
• Boolean 형태로 return

console.log('name' in raccoon);
console.log('age' in raccoon);
console.log('random' in raccoon);
console.log(raccoon.random); // undefined

6. for..in vs for..of

• for..in (key in obj) - object에만
  • object에서 key 한개씩 가져와 반복

for (const key in raccoon) {
    console.log(key);
}

• for..of (value of iterable) - Array에만
  • Array에서 value 한개씩 가져와 반복

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

"of 사용시"
for (const value of array ) {
    console.log(value);
}

7. Fun cloning (복제)

• cloning
  • object를 생성해서 다른 변수에 할당 (복제) -> 원래 그리고 다른 변수 모두 key, value가 연결되어 영향을 받음

const user = { name: 'ellie', age: '20'};
const user2 = user;
user2.name = 'coder'
console.log(user); // user의 name이 coder로 바뀜

• 과거 object cloning way

const user3 = {}; // 복제할 곳 생성
for (const key in user) { // key 를 받아서 value를 모두 같게 함
    user3[key] = user[key];
}
console.log(user3);

• Object.assign(destination, [obj1, obj2, obj3...])
  • Object.assign(Target, source1, source2, ...)
  • source가 여러개면 앞에서 부터 순서대로 덮어쓰기 함

const user4 = {}; 
Object.assign(user4, user);
console.log(user4);

const user5 = Object.assign({}, user);
console.log(user5);

'Source가 여러개'
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); 
console.log(mixed.size);

---

Array (list in python)

• 값을 여러개 가지는 형태의 자료 구조

1. Declaration (선언)

• new Array() , Array클래스를 new생성자로 생성
• [] 를 사용하여 생성

const arr1 = new Array();
const arr2 = [1, 2];

2. Index position (인덱스)

• 데이터 삽입, 삭제, 검색, 정렬을 어떻게 하는지가 중요함
• index를 통해 가능
• 첫번째 원소를 0으로 하여 시작함

const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits.length); // 원소 개수
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[fruits.length - 1]); // 배열의 마지막 숫자

3. Looping over an array (배열에서 반복)

• for

for (let i=0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

• for of

for (const fruit of fruits) {
    console.log(fruit);
}

• forEach
• forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
  • 해당 배열의 value, index, array를 param으로 받을수 있는데 그것을 활용해서 반복시킬수 있는 함수를 만들수 있음

fruits.forEach(function (fruit, index, array) {
    console.log(fruit, index, array);
}); // fruit 값 출력,  index는 인덱스 출력, array는 배열 자체 출력

fruits.forEach((fruit) => console.log(fruit));
// fruits배열의 fruit라는 이름의 매개변수인 value 형태를 가지고 원하는 함수를 구현

4. Addtion, deletion, copy (추가, 삭제, 복제)

• push : add an item to the end (append in python)

fruits.push('🍓','🍑');
console.log(fruits);

• pop : remove an item to the end and return a removed item (pop in python)

fruits.pop();
console.log(fruits);
fruits.pop();
console.log(fruits);

• unshift : add an item to the begining

fruits.unshift('🍓','🍑');
console.log(fruits);

• shift : remove an item to the begining

fruits.shift();
console.log(fruits);
fruits.shift();
console.log(fruits);

• note!! shift, unshift are slower than pop, push. (shift, unshift는 위치를 모두 변경해 줘야해서 느림)

• splice : remove an item by index position (not slice position)

  • parameter hint에 ? parm은 선택이라는 뜻(필수x)
  • splice(index start : number, deleteCount?: number) : string

fruits.push('🍓','🍑','🍋');
console.log(fruits);
fruits.splice(1, 1); // count number가 없으면 index num 부터 다 지움
console.log(fruits); 
fruits.splice(1, 1, '🍏','🍉'); // 지우고 그자리에 값 추가도 가능
console.log(fruits);

• concat : combine two arrays (add end)

const fruits2 = ['🍐','🥥'];
const newFruits = fruits.concat(fruits2); // fruits 끝에 붙임
console.log(newFruits);

5. Searching (검색)

• indexOf : find the index (앞에서 부터 찾음)

console.log(fruits);
console.log(fruits.indexOf('🍎')); // return index of specific value
console.log(fruits.indexOf('🍉'));
console.log(fruits.indexOf('🍄')); // 없을때 -1

• lastIndexOf : find the index (끝에서 부터 찾음)

fruits.push('🍎') // 중복값을 가지는 경우
console.log(fruits);
console.log(fruits.indexOf('🍎')); // 0 (제일 첫번째로 만나는 값의 index return)
console.log(fruits.lastIndexOf('🍎')); // 5 (제일 마지막으로 만나는 값의 index return)

• includes : check specific value in array -> boolean

console.log(fruits.includes('🍉')); // check specific value in array -> boolean
console.log(fruits.includes('🍄'));

숙제 : 정의된 부분들어가서 array api 확인하기

• ctrl 누르고 해당 함수 클릭 -> 정의 된 곳으로 이동함