📌 목차

✨ 자바스크립트 기초 강의 (ES5+): 같이 노트를 작성하며 배워요 📒

💁🏻

자바스크립트의 역사와 목적 및 동향
자바스크립트 동작원리

Array APIs 총정리(9강)

유용한 10가지 배열 함수

Q1. make a string out of an array

주어진 배열을 문자열로 묶어서 반환하기 -> join()함수 사용
구분자를 ()안에 마음대로 쓸 수 있음

{
  const fruits = ['apple', 'banana', 'orange'];
  const result = fruits.join(',');
  console.log(result);
}

Q2. make an array out of a string

split()함수

{
  const fruits = '🍎, 🥝, 🍌, 🍒';
  const result = fruits.split(',');
  console.log(result);
}

Q3. make this array look like this: [5, 4, 3, 2, 1]

reverse()함수

{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse();
  console.log(result);
  console.log(array);
}

Q4. make new array without the first two elements

array.slice()함수

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5);
  console.log(result);
  console.log(array);
}

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

Q5. find a student with the score 90

find()함수

{
  const result = students.find((student) => student.score === 90);
  console.log(result);
}

Q6. make an array of enrolled students

filter()함수

{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
}

Q7. make an array containing only the students' scores

map()함수

// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map((student) => student.score);
  console.log(result);
}

Q8. check if there is a student with the score lower than 50

some()함수

{
  console.clear();
  const result = students.some((student) => student.score < 50);
  console.log(result);

  const result2 = !students.every((student) => student.score >= 50);
  console.log(result2);
}
console.clear();

Q9. compute students' average score

reduce()함수

{
  const result = students.reduce((prev, curr) => prev.score + curr.score)
  console.log(result / students.length)
}

Q10. make a string containing all the scores

여러개의 함수를 method chaining으로 묶어 사용

{
  const result = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();
  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  const result = students
    .map((student) => student.score)
    .sort((a, b) => b - a)
    .join();
  console.log(result);
}

JSON (10강)

HTTP : Hypertext Transfer Protocol
AJAX의 종류 중 하나로 XHR이 있음
XML은 html과 같이 데이터를 전달하는 파일 포맷
XHR : XMLHttpRequest

요즘은 XML대신 JSON을 많이 사용한다. JSON은

simplest data interchange format
lightweight text-based structure
easy to read
key-value pairs
used for serialization and transmission of data between the network the network connection
independent programming language and platform

1.Object to JSON

// stringfy(obj)
let json = JSON.stringify(true)
console.log(json)

json = JSON.stringify(['apple', 'banana'])
console.log(json)

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: function () {
    console.log(`${this.name} can jump!`)
  },
}

json = JSON.stringify(rabbit)
console.log(json)

json = JSON.stringify(rabbit, ['name', 'color', 'size'])
console.log(json)

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`)
  return key === 'name' ? 'ellie' : value
})
console.log(json)

2. JSON to Object

// parse(json)
console.clear()
json = JSON.stringify(rabbit)
console.log(json)
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`)
  return key === 'birthDate' ? new Date(value) : value
})
console.log(obj)
rabbit.jump()
// obj.jump();

console.log(rabbit.birthDate.getDate())
console.log(obj.birthDate.getDate())

Callback (11강)

비동기 처리의 시작 콜백~~~

1. Callback? 동기와 비동기

자바스크립트는 Synchronous 언어입니다!
이말인 즉슨 hoisting이 가능하다는 것입니다.

콜백 함수는 비동기적으로 내가 원할 때,원하는 곳에서 부를 수 있다.(setTimeout등으로)

2. Synchronous callback (즉각적으로 반응하는 콜백 함수)

function printImmediately(print) {
  print()
}
printImmediately(() => console.log('hello'))

3. Asynchronous callback (시간을 정해놓고 그 뒤에 실행하는 콜백 함수)

function printWithDelay(print, timeout) {
  setTimeout(print, timeout)
}
printWithDelay(() => console.log('async callback'), 2000)

4. Callback Hell example

// Callback Hell example
class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if ((id === 'ellie' && password === 'dream') || (id === 'coder' && password === 'academy')) {
        onSuccess(id)
      } else {
        onError(new Error('not found'))
      }
    }, 2000)
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'ellie') {
        onSuccess({ name: 'ellie', role: 'admin' })
      } else {
        onError(new Error('no access'))
      }
    }, 1000)
  }
}

const userStorage = new UserStorage()
const id = prompt('enter your id')
const password = prompt('enter your passrod')
userStorage.loginUser(
  id,
  password,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRole) => {
        alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
      },
      (error) => {
        console.log(error)
      }
    )
  },
  (error) => {
    console.log(error)
  }
)