스파르타코딩클럽 내일배움캠프 23일차

오늘 일과 간단 요약

1. 새로운 팀 편성 + 자기소개
2. JS 심화 문법 강의 1회차 강의 듣기
3. 드림코딩 Javascript 강의
4. 프로그래머스 Level 0 2문제 (문제1, 문제2)

 

 

 

 

새로운 팀 편성

어제까지 정들었던 팀원들을 떠나 새로운 팀 편성이 되었다.

어제 9시 정규 과정 끝나고 남아서 아쉬움에 젭에서 사진 찍기도 하고, 슬랙방 있으니까 거기서 얘기 자주 나누자고 하면서 아쉽게 헤어졌다. 첫 프로젝트는 일주일만에 헤어져서 아쉬웠다면 저번 팀원들은 더 오래 있어서 아쉬웠다.

 

그래도 새로 편성이 되어서 보니 무려 8조라니.

항상 3조, 2조여서 젭 아래쪽은 잘 가본 적이 없는데 갑자기 8조가 되어버렸다.

그래서 같은 젭 내에서도 잘 가지 않던 아래쪽으로 향했다.

다 모르는 사람이면 어쩌나 걱정했지만 우연인지 첫 프로젝트를 같이 했던 인국님이 있어서 다행이었다.

그나마 아는 사람이 있어서...아니었으면 저번처럼 뻘쭘하게 자기소개 할뻔 했다.

 

다행히 모두가 친절하고 적극적으로 자기소개를 해주셔서 금방 편해질 수 있었다.

제비뽑기로 팀장 뽑았는데 이건 계략이 분명하다..왜냐면 내가 되었기 때문....

두 번의 프로젝트 모두 팀장이 되지 않아서 좋았었는데 딱 걸려버렸다. 어쩔수 없지만...팀장은 쬐금 부담스러우니까.

 

거의 1시간 가량 이야기를 나누면서 친해지는 시간을 가졌던 것 같다.

tmi도 제출하고 난뒤에 또 다른 이야깃거리가 생겨서 이야기 나누고...이번 조도 운좋게 좋은 사람들만 있는 듯 하다.

 

 

 

 

 

JS 심화 문법 강의 1회차 강의

아직 chapter 5는 안봤긴 한데...오늘 3,4 까지 아무 생각이 봤다..ㅎ

pdf 보면서 필기하거나 생각하면서 보고 싶은데 첫번째는 무조건 그냥 흘려듣겠다는 목표를 세웠기 때문에

모든 습관들을 모른척 하며 즐거운 영상을 보는 것처럼 봤다.

그럼에도 불구하고....이해한 건 별로 없지만 ㅋㅋㅋㅋ

반복이 생명이기 때문에, 그리고 내일 2회차에서는 필기 하면서 볼거라 진도가 느려질 것 같아서 그냥 아예 몰아서

쭉 봤다. chapter 5는 내일 오전에 쭉 보고, 그 다음에 다시 2회차를 시작할 것 같다.

 

제대로 이해한 부분이 별로 없고 정리도 안해서 그냥 머릿속에 대충 잔상처럼 남아있다.

그리고 아무리 생각해도 자바스크립트 문법 기초가 그리 단단하게 잡혀있지 않은것 같아서,

그것 먼저 해야 겠다는 생각이 강하게 들었다.

 

그래서 강의 듣자마자 바로 추천 받은 드림코딩 유튜브 강의를 듣기 시작했다.

 

 

 

 

 

드림코딩 Javascript 강의

어제 순재님이 추천해주기도 했고, 인국님이었나...어쨋든 몇몇 분의 추천을 받아 듣기 시작했는데

설명하는 목소리도 좋고 명확하게 알려주셔서 아주 즐겁게 듣고 있다.

 

총 13강인데 오늘 6강까지 들었고 나머지 부분은 내일 들으면서 복습할 생각이다.

복습이 되는 부분도 있고, 심화 강의에서 스쳐 지나갔던 부분들이 있어서 제공된 노트에 주석으로 정리중이다.

 

---

Use strict

• ‘use strict’;
• 자바스크립트는 굉장히 유연한 언어 ⇒ 개발자들이 많은 실수를 할 수 있다
• 비상식적인 일들을 미리 방지할 수 있음
• 바닐라 자바스크립트에서는 사용하는 게 좋다

 

Data type

// 1. Use strict
// added in ES 5
// use this for Vanila Javascript
'use strict';

// 2. Variable (변경될 수 있는 값, 변수) : read/write (읽고 쓰기 가능)
// mutable data type
// let (added in ES6)

// global scope
let globalName = 'global name';
// block scope
{
    let name = 'ellie';
    console.log(name);
    name = 'hello';
    console.log(name);
}
//console.log(name);
console.log(globalName);

// var => 쓰지 말자
// var hoisting : 선언하기도 전에 끌어올려진다
// block scope이 없다 (블록 스코프 무시)
console.log(age);  // undefined 출력
age = 4;
var age;


// 3. constant (값이 바뀌지 않는 값) : read only
// favor immutable data type always for a few reasons:
// - security
// - thread safety
// - reduce human mistake
const daysInWeek = 7;
const maxNumber = 5;

// Immutable data types: primitive types, frozen objects (ex. object.freeze())
// => data 자체 변경 불가능
// Mutable data types: all objects by default are mutable in JS


// 4. Variable Types
// primitive type (single item): number, string, boolean, null, undefined, symbol
// 값 자체가 메모리에 저장된다
// object (box container) 
// 값이 너무 커서 메모리에 한번에 올라갈 수 없다
// object를 가리키는 ref 존재
// function, first-class function

// JS data types for number => only Number
// TS 역시 number만 존재
const count = 17;  // integer
const size = 17.1;  // decimal number
console.log(`value: ${count}, type: ${typeof count}`); // value: 17, type: number
console.log(`value: ${size}, type: ${typeof size}`); // value: 17.1, type: number

/* number - speical numeric values: infinity, -infinity, NaN */
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);  // Infinity
console.log(negativeInfinity);  // -Infinity
console.log(nAn); // NaN
// DOM 요소를 활용할 때 그냥 계산하면 사용자에게 에러가 발생할 수 있으므로 valid한지 확인하고 쓸 것

// bigInt (fairly new, don't use it yet)
const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ 2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);

// string
const char = 'c';
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloBob = `hi ${brendan}!`; //template literals (string)
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
console.log('value: ' + helloBob + ' type: ' + typeof helloBob);

// boolean
// false: 0, null, undefined, NaN, ''
// true: any other value
const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);

// null (명확하게 비어있다고 지정, 값이 할당되어 있음)
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);

// undefined (값이 할당되어 있는지 아닌지 모름)
let x;
console.log(`value: ${x}, type: ${typeof x}`);

// symbol, create unique identifiers for objects
// map 등에서 우선순위를 주고 싶을 때 필요함
// .description 으로 string으로 변환해야 출력 가능
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

// object, real-life object, data structure
// 한번 할당된 object는 다른 object로 할당 불가능
// 포인트가 가리키고 있는 메모리는 변경 가능
const ellie = { name: 'ellie', age: 20 };
ellie.age = 21;

// 5. Dynamic typing: dynamically typed language
// 프로그래밍이 동작할 때 할당된 값에 따라 타입이 변경될 수 있다
let text = 'hello';
console.log(text.charAt(0));  //h
console.log(`value: ${text}, type: ${typeof text}`);  // type : string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);  // tpye: number
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);  // type: string
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`);  // type: number
console.log(text.charAt(0));  // TypeError 발생 (type이 숫자로 변경되었기 떄문)
// typestcript : javascript 위에 type이 올려진 언어

 

연산자

// 1. String concatenation (+)
console.log('my' + ' cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);

// 2. Numeric operators
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder
console.log(2 ** 3); // exponentiation

// 3. Increment and decrement operators(++, --)
let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);

// 4. Assignment operators (할당)
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

// 5. Comparison operators (비교)
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal

// 6. Logical operators: || (or), && (and), ! (not)
const value1 = true;
const value2 = 4 < 2;

// || (or), finds the first truthy value (하나라도 true면 true)
// 처음 true가 나오면 멈춘다
// simple한 value idea를 가장 먼저 두고 무거운 건 가장 마지막에 두는 것이 효율적
console.log(`or: ${value1 || value2 || check()}`);

// && (and), finds the first falsy value (전부 true여야 true)
// simple한 value idea를 가장 먼저 두고 무거운 건 가장 마지막에 두는 것이 효율적
console.log(`and: ${value1 && value2 && check()}`);

// often used to compress long if-statement
// nullableObject && nullableObject.something

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    console.log('😱');
  }
  return true;
}

// ! (not)
console.log(!value1);

// 7. Equality
const stringFive = '5';
const numberFive = 5;

// == loose equality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// === strict equality, no type conversion
// 웬만하면 ===를 사용하는 것이 좋다
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

// object equality by reference
// 똑같은 data가 들어 있어도 reference가 다르기 떄문에 서로 다른 object를 가리키고 있다
const ellie1 = { name: 'ellie' };
const ellie2 = { name: 'ellie' };
const ellie3 = ellie1;
console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); // false
console.log(ellie1 === ellie3); // true

// equality - puzzler
console.log(0 == false); // true
console.log(0 === false); // false
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false

// 8. Conditional operators: if
// if, else if, else
const name = 'df';
if (name === 'ellie') {
  console.log('Welcome, Ellie!');
} else if (name === 'coder') {
  console.log('You are amazing coder');
} else {
  console.log('unkwnon');
}

// 9. Ternary operator: ?
// condition ? value1 : value2;
// 간단할 떄만 사용하기
console.log(name === 'ellie' ? 'yes' : 'no');

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':  // 동일하면 반복할 필요 없이 붙여놓기
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

// 11. Loops (반복문)
// while loop, while the condition is truthy,
// body code is executed.
let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

// do while loop, body code is executed first,
// then check the condition. (무조건 한 번은 실행)
do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

// for loop, for(begin; condition; step)
for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

for (let i = 3; i > 0; i = i - 2) {
  // inline variable declaration (block 안에 지역 변수 선언 가능)
  console.log(`inline variable for: ${i}`);
}

// nested loops (cpu에 좋지 않기 때문에 되도록이면 피하는게 좋다)
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);
  }
}

// break, continue
// Q1. iterate from 0 to 10 and print only even numbers (use continue)
for (let i = 0; i < 11; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(`q1. ${i}`);
}

// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
for (let i = 0; i < 11; i++) {
  if (i > 8) {
    break;
  }
  console.log(`q2. ${i}`);
}

 

함수

// Function
// 여러 번 재사용 가능
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculates a value

// 1. Function declaration
// 함수 하나당 하나의 일을 하게 만드는 것이 효율적
// 자바스크립트에서 function은 object이기 때문에 변수에 할당, 함수 리턴 등을 할 수 있다
// function name(param1, param2) { body... return; }
// one function === one thing
// naming: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, createPoint
// function is object in JS
function printHello() {
    console.log('Hello');
}
printHello();
  
function log(message) {
    console.log(message);
}
log('Hello@');
log(1234);
// 함수에서 type이 중요한 경우에는 자바스크립트는 난해할 수 있다
  
// 2. Parameters
// primitive parameters: passed by value (메모리에 value 그대로 저장 => value가 전달된다)
// object parameters: passed by reference (refernce가 저장되어 있어 ref가 전달된다)
function changeName(obj) {
    obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);
// 함수 안에서 object 값을 변경하면 그 변경사항이 그대로 memory에 전달된다
  
// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // 메세지 하나만 전달 (from이 undefined)
// 원하는 default을 저장해놓으면 그 값으로 대체되어 전달된다
  
// 4. Rest parameters (added in ES6)
// 배열 형태로 전달된다
function printAll(...args) {
    for (let i = 0; i < args.length; i++) {
      console.log(args[i]);
    }
  
    // 간단하게 of 이용해서 출력 가능
    for (const arg of args) {
      console.log(arg);
    }
  
    // forEach 이용해서 더 간단하게 출력 가능
    args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');
  
// 5. Local scope
// scope => 밖에서는 안이 보이지 않고 안에서만 밖이 보일 수 있다.
// block 안에서는 전역 변수를 사용 가능하지만 밖에서 지역 변수 사용 불가능
// 중첩된 함수에서 자식 함수에서 부모 함수에 접근 가능
let globalMessage = 'global'; // global variable
function printMessage() {
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
    function printAnother() {
      console.log(message);
      let childMessage = 'hello';
    }
    // console.log(childMessage); //error
}
printMessage();
  
// 6. Return a value
function sum(a, b) {
    return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);
  
// 7. Early return, early exit
// 가독성이 떨어지는 것을 방지
// bad
function upgradeUser(user) {
    if (user.point > 10) {
      // long upgrade logic...
    }
}
  
// good
// 빨리 return해서 필요한 로직은 밑에 작성하기
function upgradeUser(user) {
    if (user.point <= 10) {
      return;
    }
    // long upgrade logic...
}
  
// First-class function
// functions are treated like any other variable
// can be assigned as a value to variable
// can be passed as an argument to other functions.
// can be returned by another function
  
// 1. Function expression
// a function declaration can be called earlier than it is defined. (hoisted)
// a function expression is created when the execution reaches it.
// 할당된 다음부터 호출 가능
// 함수 선언 => hoisting 가능 (할당 전에 호출 가능)
const print = function () {
    // anonymous function
    console.log('print');
};
print();
const printAgain = print;  // printAgain이 function을 가리킴
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));
  
// 2. Callback function using function expression
// printYes, printNo 를 전달해야 answer를 출력할 수 있다
function randomQuiz(answer, printYes, printNo) {
    if (answer === 'love you') {
      printYes();
    } else {
      printNo();
    }
}
// anonymous function
const printYes = function () {
    console.log('yes!');
};
  
// named function
// better debugging in debugger's stack traces
// recursions
// debugging을 할 때 함수 이름이 나오게 하기 위해 이름을 쓴다
// 함수를 무한대로 호출하게 되면 RangeError 발생
const printNo = function print() {
    console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);
  
// Arrow function
// 함수를 간결하게 만들어준다
// always anonymous
// const simplePrint = function () {
//   console.log('simplePrint!');
// };
  
const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
    // do something more
    return a * b;
};
  
// IIFE: Immediately Invoked Function Expression
(function hello() {
    console.log('IIFE');
})();
  
// Fun quiz time❤️
// function calculate(command, a, b)
// command: add, substract, divide, multiply, remainder
  function calculate(answer, a, b) {
    switch (answer) {
        case 'add':
            return a + b;
        case 'substract':
            return a - b;
        case 'divide':
            return a / b;
        case 'multiply':
            return a * b;
        case 'remainder':
            return a % b;
        default:
            throw Error('unknown command');
    }
  }
  console.log(calculate('add', 2, 3));

 

클래스

'use strict';
// Object-oriendted programming
// class: template
// object: instance of a class
// JavaScript classes
//  - introduced in ES6
//  - syntactical sugar over prototype-based inheritance (편리함 제공을 위한 것)

// class 안에 행동(method), 속성(fields)가 들어있다
// 연관있는 데이터들이 묶여 있다 (fields + methods)
// data(fields)만 들어있는 경우 => data class
// 캡슐화 : 내부에서만 보이는 특성
// 상속과 다양성 발생
// => 객체 지향 언어

// 클래스 = 붕어빵 틀
// - template (틀만 정해져 있다)
// - declare once (한번만 선언)
// - data in (데이터를 넣는다)

// object
// - instance of a class (인스턴스 생성 -> object)
// - created many times
// - data in (class는 정의만 한 것이지만 data를 넣으면 메모리에도 들어가게 된다)
// (예) 팥붕어빵, 슈크림붕어빵 등등 object 생성

// 1. Class declarations
class Person {
  // constructor (생성자)
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }

  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

// object 생성
const ellie = new Person('ellie', 20);
console.log(ellie.name);  //  ellie
console.log(ellie.age);  // 20
ellie.speak();  // 함수 호출 가능 (ellie: hello!)


// 자판기 커피 : 동전 넣고 커피 만드는 것들
// number of coffee, make coffee, put money
// 돈은 -1이 불가능한데 사용자가 -1이라고 설정하면 안되기 때문에 getter & setter 사용
// -1이 들어오더라도 setter를 사용해서 0으로 만드는 것이다
// private으로 만드는 게 캡슐화

// 2. Getter and setters
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  // getter 정의 (this.age를 age로 불러옴)
  get age() {
    return this._age;
  }
  
  // setter 정의
  // 값을 설정하기 때문에 value를 받아와야 한다
  // 전달된 value를 this.age를 할당할 때 메모리 값을 업데이트하는 것이 아니라 setter를 호출한다
  // getter와 setter 안에서 사용하는 변수 이름을 변경해야 한다
  // => user class 안에는 firstName, lastName, _age라는 세 가지 constructor가 있다
  set age(value) {
    // if (value < 0) {
    //   throw Error('age can not be negative');
    // }
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);  // getter와 setter를 이용하기 때문에 .age 사용 가능


// 3. Fields (public, private)
// Too soon! (가장 최근에 나옴)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields
// 최신이라 지금은 사용 자제
class Experiment {
    // 클래스 내부에서만 사용 가능
    // 외부에서는 읽을수도 사용할 수도 없다
  publicField = 2;
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);  // undefined
console.log(experiment.privateField);

// 4. Static properties and methods
// Too soon!
// object 상관없이 공통적으로 class에 연결되어 있다
class Article {
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); // class 이름으로 호출
Article.printPublisher();


// 5. Inheritance (상속)
// a way for one class to extend another class.
// 재사용가능한 부분은 한번에 묶어서 정의 (효율적으로 코드 사용 가능)
// 동일한 부분은 extends 키워드 사용해서 재사용 가능
// 다양성 => 필요한 함수만 재정의해서 사용 가능 (overriding)
class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color!`);
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    // overriding : Shape 안의 draw()와 다른 걸 쓸 수 있다
    super.draw();
    console.log('🔺');
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

  toString() {
    return `Triangle: color: ${this.color}`;
  }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea());


// 6. Class checking: instanceOf
// object가 class의 instance인지 아닌지 확인하는 것
// true or false를 return
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true (모든 obejct는 Object를 항상 상속한다)
console.log(triangle.toString()); // [object Object] toString()은 Object 속성 안에 있기 때문에 불러올 수있다

// JavaScript Object 페이지 가면 모든 object를 볼수 있다 (= javascript mdm reference page)

 

Object

'use strict';
// Objects
// one of the JavaScript's data types.
// a collection of related data and/or functionality.
// Nearly all objects in JavaScript are instances of Object
// object = { key : value };

// 1. Literals and properties
// object 만드는 두 가지 방법
const obj1 = {}; // 1) 'object literal' syntax
const obj2 = new Object(); // 2) 'object constructor' syntax

// 간편하게 데이터 관리 가능
function print(person) {
  console.log(person.name);
  console.log(person.age);
}

// class 없이도 바로 object 생성 가능
const ellie = { name: 'ellie', age: 4 };
print(ellie);


// with JavaScript magic (dynamically typed language)
// can add properties later
// runtime 때 properties 추가할 수 있음
// 동적으로 코딩하면 유지 보수가 힘들기 때문에 가능하면 피하는 것이 좋다
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);


// 2. Computed properties (계산된 properties)
// Object에 접근하는 방법 => . 으로 접근 혹은 []으로 접근
// 무조건 string type으로 지정해서 받아와야 한다
// key should be always string
console.log(ellie.name); // key에 해당하는 값을 받아오고 싶을 떄 사용
console.log(ellie['name']); // 정확하게 어떤 key가 필요한지 모를 때 (runtime에서 결정될 때) 사용
ellie['hasJob'] = true; // true를 'hasJob'에 할당
console.log(ellie.hasJob);

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');


// 3. Property value shorthand
// key와 value 이름이 동일하다면 생략 가능
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('elile', 30);
console.log(person4);


// 4. Constructor Function (생성자 함수)
// object 생성하는 함수는 보통 대문자로 시작
function Person(name, age) {
  // this = {};
  this.name = name;
  this.age = age;
  // return this;
}


// 5. in operator: property existence check (key in obj)
// 해당하는 object 안에 key가 있는지 없는지 확인하는 것
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random); // undefined 출력 (없는 key 출력시)


// 6. for..in vs for..of
// for ... in : 모든 key를 받아와서 쓰고 싶을 때
// for ... of : 배열로 쓰고 싶을 때

// for (key in obj)
console.clear();
for (let key in ellie) {
  console.log(key);
}

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


// 7. Fun cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user; // 동일한 ref가 들어있음 (같은 object를 가리킴)
/*
user2.name = 'coder';
console.log(user);  => name이 coder로 변경된다 
*/
console.log(user);

// old way (수동적으로 할당)
const user3 = {};
for (let key in user) {
    // name, age 순으로 돌면서 user3[key]에 추가
  user3[key] = user[key];
}
console.clear();
console.log(user3);

// 요즘 하는 방법
// assign(T, U) : target = T, source = U
/* 
const user4 = {}
Object.assing(user4, user);
*/
const user4 = Object.assign({}, user);
console.log(user4);

// another example
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big

 

 

이건 드림코딩에서 제공한 노트에 내멋대로 주석으로 내용을 더 추가한 정리본인데,

TIL에 적으니까 너무 길어서 여기다도 정리해야 하나 고민이다. 내일은 양이 더 많을것 같은데...

지금 노션에 정리 + JS 파일로도 저장 중이라서 내일은 아예 노션 링크를 올리던지 해야겠다.

 

설명을 너무 잘해주셔서 예전에 어디서 들어봤는데, 하던 것들을 정리하게 아주 좋다.

생각해보니 처음 들었으면 이것도 지루했을 텐데, 반복학습으로 희미하던 글자가 선명해지는 것 같기도...?

아무튼, 내일까지 다 듣고 심화 강의로 보충해야지.

 

 

 

 

프로그래머스 Level 0 2문제

어제에 이어 또 2문제 풀기 성공.

이렇게 감을 잃지 않는 선에서 계속 꾸준히 풀고 싶다. 근데 프로젝트 하면 또 못할지도..?ㅋㅋㅋ

이러다가 난이도 올라가면 다시 한번 알고리즘 강의들으면서 복습해야겠다.

 

 

 

 

짧은 일기

새로운 팀원들을 만나고, 내일 모레부터는 새롭게 리액트를 배울거라고 생각하니까

뭔가 내 계획도 리뉴얼 되는기분이다.

늘 새로운 발제를 하면 느끼는 거지만, 새삼 새롭다 ㅋㅋㅋ

매주 계획이 바뀌긴 하지만 어제 오늘 바뀌는 게 더 신기하다. 내 실력을 알아가는 중인가...?

사실 나는 아직도 내 실력을 객관적으로 잘 모르겠다. 프로젝트는 어떻게든 했는데, 다시 보면 리팩토링 하고 싶은 코드들이고...

좀 더 해야할 건 많은 것 가고..그래서 아예 기초부터 시작하는 중인데, 이게 맞나 싶다.

계속 하다보면 익숙해지고 실력이 늘겠지..라는 마음으로 하고 있다 ㅋㅋ

그래도 아직 너무 하기 싫거나 지루하진 않아서 다행인것 같다.

내일도 지루하지 않게 하루를 보냈으면 좋겠다.