JavaScript 강의 - 4

유튜브 강의

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

String concatenation

• + 기호 사용
• string literals 사용 가능

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

Numeric operators

• 숫자 연산 가능

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

Increment and decrement operators

• ++(변수) : 1 더한 후 변수에 할당
• (변수)++ : 할당 후 1 더함
• --(변수) : 1 뺀 후 변수에 할당
• (변수)-- : 할당 후 1 뺌

// 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;
// counter = counter - 1
// preIncrement = counter;
console.log(`preIncrement: ${predecrement}, counter: ${counter}`)
const postdecrement = counter--;
// postIncrement = counter;
// counter = counter - 1 ;
console.log(`postIncrement: ${postdecrement}, counter: ${counter}`)

Assignment operators

• 변수에 할당하는 연산

// Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

Comparison operators

• 비교 연산

// Comparison operators
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // more than
console.log(10 >= 6); // more than or equal

Logical operators

• ||(or), &&(and), !(not)
• ||, &&는 연산을 많이 하는 함수보다 단순한 연산을 먼저 호출하는 것이 효율적
• && 는 null check에도 많이 사용됨
• !(not) : boolean 값을 반대로 변경

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

// ||(or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`)

//&&(and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`)

// nullableObject && nullableObject.something
// if (nullableObject != null) {
//     nullableObject.something;
// }

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

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

Equality

• == : loose equality
  • 데이터 타입 달라도 같다고 할 수 있음
• === : strict equality
  • 데이터 타입 다르면 다른 것으로 간주
• object에서는 값이 같더라도 reference 할당된 메모리가 다르면 다른 것으로 간주

// 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
const ellie1 = {name : 'ellie'};
const ellie2 = {name : 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2);
console.log(ellie1 === ellie2);
console.log(ellie1 === ellie3);

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

Conditional operators

• if, else if, else

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

Ternary operator

// Ternary operator( ? : )
console.log(name === 'ellie' ? 'yes' : 'no');

Switch statement

• case로 나누어 결과 출력
• if, else if 반복해야 하면 switch 사용 가능
• typescript에서 정해져 있는 type을 검사하거나 enum 비슷한 것을 검사할 때 사용 가능

// Switch statement
const browser = 'Firefox';
switch (browser) {
    case 'IE':
        console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you');
        break;
    default:
        console.log('same all');
        break;
}

Loops

• while
  • 조건 확인 후 실행

// Loops
let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}

• do - while
  • 실행 후 조건 확인

// do while
do {
    console.log(`do while: ${i}`);
    i--;
} while (i > 0);

• for
  • for (begin; condition; step)

// for
for (i = 3; i > 0; i--) {
    console.log(`for: i: ${i}`)
}

for (let i = 3; i > 0; i = i - 2) {
    // inline variable declaration
    console.log(`inline variable for: ${i}`)
}

• break, continue
  • break : loop 종료
  • continue : 지금 것 건너뛰고 loop 재개

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

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

---

JavaScript 강의 - 5

유튜브 강의

자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)

Function

• 프로그램을 구성하는 building block
• 재사용 가능
• input → output
• function 이름 중요 - 동사 형태로 지정해야 함
• 하나의 함수는 하나의 기능만 가지도록 해야 함
• JS에서 function은 object로 간주
  • 변수 할당, parameter로 전달, 함수 결과로 return도 가능
• JS에서는 function에서 type을 신경 쓰지 않음
  • TypeScript에서는 함수 정의 시 parameter와 return의 type을 명시해야 함

function log(message) {
    console.log(message);
}

Parameters

• parameter가 primitive 이면 value값 전달
• parameter가 object이면 참조 전달
• 함수 안에서 object 값을 변경하면 메모리에 적용됨

// parameters
function changeName(obj) {
    obj.name = 'coder';
}

const ellie = {name: 'ellie'};
changeName(ellie);
console.log(ellie);

Default parameters

• parameter에 미리 default 값 설정 가능

// default parameters
function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`)
}

showMessage('Hi!');

Rest parameters

• parameter에 …라 적으면 배열 형태로 전달됨

// Rest parameters
function printAll(...args) {
    for (let i = 0; i < args.length; i++) {
        console.log(args[i]);
    }

    for (const arg of args) {
        console.log(arg);
    }

    args.forEach((arg) => console.log(arg));
}

printAll('dream', 'coding', 'club')

Local Scope

• 함수 내에서 정의된 변수는 함수 밖에서 사용할 수 없음

// Local scope
let globalMessage = 'global'; // global variable
function printMessage() {
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage)
}

printMessage();

Return a value

• 함수를 사용하여 결과 반환 가능
• return 정의하지 않으면 undefined 반환

// Return a value
function sum(a, b) {
    return a + b;
}

const result = sum(1,2);
console.log(`sum: ${sum(1,2)}`);

Early return, early exit

• 함수 내에서 조건이 맞지 않을 때(값이 undefined, -1인 경우 등) 빨리 함수를 종료하도록 함수를 작성하는 것이 좋음

// Early return, early exit
// bad
function upgradeUser(user) {
    if (user.point > 10) {
        // long logic...
    }
}

// good
function upgradeUser(user) {
    if (user.point <= 10) {
        return;
    }
    // long logic...
}

Function expression

• first-class function
  • 변수에 할당 가능
  • parameter로 전달 가능
  • return값으로 반환 가능
• anonymous function : 함수 이름 없이 정의
• named function : 함수 이름 설정하여 정의
  • 디버깅할 때 함수를 쉽게 찾기 위해
  • 함수 안에서 스스로를 호출할 때(recursion)

// Function expression
const print = function () {
    console.log('print');
}
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1,3));

Callback function

• 함수에 함수를 전달하여 조건이 맞으면 함수 호출

// Callback function
function randomQuiz(answer, printYes, printNo) {
    if (answer === 'love you') {
        printYes();
    } else {
        printNo();
    }
}
// anonymous function
const printYes = function() {
    console.log('yes!');
};
// named function
const printNo = function print() {
    console.log('no!');
};

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

Arrow function

• anonymous function
• 함수를 간결하게 정의할 때 사용
• block 사용하여 긴 함수도 가능

// Arrow function
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
• 함수 선언을 괄호로 묶어서 즉각적으 호출 가능

// IIFE
(function hello() {
    console.log('IIFE');
})();

---

JavaScript 강의 - 6

유튜브 강의

자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)

Class

• template
• 속성(field), 행동(method) 로 이루어짐
• class 자체에는 데이터가 들어있지 않음
• 한 번만 선언

Object

• class를 이용하여 데이터를 넣어 만든 것
• class를 이용하여 새로운 instance 생성하면 object
• 여러 개 생성 가능

Class declarations

• constructor : 생성자

// class declarations
class Person {
    // constructor
    constructor(name, age) {
        // fields
        this.name = name;
        this.age = age;
    }

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

const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

Getter & Setter

• class 사용자가 잘못 사용해도 방어적인 자세로 만들 수 있도록 만드는 것
• get : 값 return하는 method
  • getter를 설정하면 this.age를 호출할 때 getter를 호출함 → 무한루
• set : 값 설정하는 method
  • value 받아옴
  • setter 설정하면 값을 할당할 때 setter를 호출함
  • this.age에 할당할 때 본인을 불러옴 → 무한루프
• 따라서 다른 변수로 만들어야 함

// Getter & Setter
class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        // if (value < 0) {
        //     throw Error('age cannot be negative')
        // }
        this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

Public & Private

• 생성자를 사용하지 않고 field 정의하면 public
  • 외부에서 접근 가능
• #붙이면 private
  • 값 읽고 변경 불가

// Public & Private
class Experiment {
    publicField = 2;
    #privateField = 0;
}

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

Static

• 데이터와 상관없이 class에 정의된 field, method
• object가 아닌 class 이름 사용하여 호출 가능
• object에 상관없이 공통적으로 class에 사용할 field, method에 사용

// Static
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(article1.publisher);
console.log(Article.publisher);
Article.printPublisher();

상속, 다양성

Inheritance

• 공통적인 특징을 class로 만들어 재사용률을 높임
• 유지보수에 용이
• extends 사용하여 class 상속 가능

Diversity

• override 사용하여 상속 받은 method 변형 가능
• overriding 후 상속 받은 함수도 재정의한 함수에 같이 호출하려면 super 사용

// Inheritance & diversity
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() {
        super.draw();
        console.log('▲')
    }
    getArea() {
        return (this.width * this.height) / 2;
    }
}

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());

instanceof operator

• object가 class의 instance 인지 여 확인
• boolean type으로 반환

// class checking : instanceOf
console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);

• 참고 사이트

JavaScript | MDN

---

JavaScript 강의 - 7

유튜브 강의

자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

Literals & Properties

• 참고 사이트

Object - JavaScript | MDN

• object : key-value의 집합
• { } 또는 Object class 이용하여 생성
• object 생성한 후 속성을 추가, 삭제할 수 있음

// Literals & Properties
// object = {key: value}
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

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

function print(person) {
    console.log(person.name);
    console.log(person.age);
}

print(ellie);

ellie.hasJob = true;
console.log(ellie.hasJob);

Computed properties

• 정확히 어떤 key가 필요한지 알 수 없을 때 사용
  • 실시간으로 원하는 key를 받아올 때
  • 동적으로 key에 관련한 value를 받아올 때

// Computed properties
console.log(ellie.name);
console.log(ellie['name']);
ellie['hasJob'] = true;
console.log(ellie.hasJob);

function printValue(obj, key) {
    console.log(obj[key]);
}

printValue(ellie, 'name');
printValue(ellie, 'age');

Property value shorthand

• key와 value의 이름이 동일하면 생략 가능

// property value shorthand
function makePerson(name, age) {
    return {
        name,
        age,
    }
}

const person1 = makePerson('ellie', 30)
console.log(person1);

Constructor function

• JS에 class 없었을 때 사용했던 object 생성하는 함수

// Constructor function
function Person(name, age) {
    // this = {};
    this.name = name;
    this.age = age;
    // return this;
}

const person2 = new Person('ellie', 30)
console.log(person2);

in operator

• 해당 object에 key 존재 여부 확인

// in operator
console.log('name' in ellie);
console.log('age' in ellie);
console.log('height' in ellie);

for..in vs for..of

• for (const key in obj)
  • 순차적으로 object의 key를 가져옴
• for (const value of iterable)
  • 순차적으로 iterable의 value를 가져옴

// for..in vs for..of
// for (key in obj)
for (const key in ellie) {
    console.log(key);
}

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

Cloning

• 참조가 같도록 복제하면 복제한 object 수정 시 원본도 변경됨
• Object.assign을 사용하여 복사 가능

// Cloning
const user = {name: 'ellie', age: '20'};
const user2 = user
console.log(user);

// old way
const user3 = {};
for (const key in user) {
    user3[key] = user[key];
}

console.log(user3);

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

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

---

JavaScript 강의 - 8

유튜브 강의

자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 )

Array declaration

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

Index position

// Index Position
const fruits = ['apple', 'banana'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[fruits.length - 1]);

Looping

• forEach : 배열 내 value마다 함수 출력

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

for (const value of fruits) {
    console.log(value)
}

fruits.forEach((fruit) => console.log(fruit))

Addition, deletion, copy

• push : 오른쪽에 삽입
• pop : 오른쪽부터 제거
• unshift : 왼쪽 삽입
• shift : 왼쪽부터 제거
  • unshift, shift는 push, pop보다 느리다
• splice : 원하는 index부터 원하는 개수만큼 삭제, 삽입 가능
• concat : 두 array 병합

// Addition, deletion, copy
// push
fruits.push('strawberry', 'peach');
console.log(fruits);

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

// unshift
fruits.unshift('strawberry', 'peach');
console.log(fruits);

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

// splice
fruits.push('strawberry', 'peach', 'lemon');
fruits.splice(1,2, 'orange')
console.log(fruits);

// combine two arrays
const fruits2 = ['pear', 'coconut']
const newfruits = fruits.concat(fruits2);
console.log(newfruits);

Searching

• indexof
  • 배열에 존재하면 index 번호 반환, 없으면 -1 반환
• includes
  • 존재 여부 boolean으로 반환
• lastIndexOf
  • 배열에 존재하면 가장 마지막 index 번호 반환, 없으면 -1 반환

// Searching
console.log(fruits);

// indexOf
console.log(fruits.indexOf('apple'))

// includes
console.log(fruits.includes('apple'))

// lastIndexOf
fruits.push('apple');
console.log(fruits.indexOf('apple'))
console.log(fruits.lastIndexOf('apple'))