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

1. 자바스크립트 기초강의

• 변수
  • class 같은 예약어는 변수로 지정할 수 없다.
  • let 변경 가능, const 변경 불가능
  • const로 변수를 설정할 때 대문자로 설정하는 것이 룰
  • 변수는 문자와 숫자. $, _ 만 사용 가능
  • 첫글자는 숫자가 될 수 없다.

let name = "Mike";
const age = 30;

• 자료형

  • 문자형(String), 숫자형(Number), Boolean, null, undefined, 객체형, 심볼형
  • null은 object 타입인 것을 주의해야 함.
  • 문자형 + 숫자형 = 문자형

• 형변환

  • String() > 문자형으로 변환
  • Number() > 숫자형으로 변환
  • Boolean() > 불린형으로 변환
  • 자동 형변환 될 때 에러가 많이 뜸 > 명시적 형변환을 하는 것이 좋다.
  • false > 0, "", null, undefined, NaN
  • Number(null) > 0 , Number(undefined) > NaN

• 기본 연산자

let num = 10;
let result = ++num;
console.log(result); // 11
let result2 = num++;
console.log(result2); // 10

// 강의 내용이랑 다름 뭐지 ?

• 반복문
  • break : 멈추고 빠져나옴, continue : 멈추고 다음 조건을 실행

for (let i = 0; i < 10; i++) {
  console.log(i); // 0~9
}

let i = 0;

while (i < 10) {
  console.log(i);
  i++; // 0~9
}

• 함수
  • 중복을 줄여주기 위해 사용.
  • 함수 안에 있는 것은 외부에서 사용 불가능하다.

function sayHello(prop) {
  console.log(`Hello, ${prop}`);
}

sayHello("jaechang");
sayHello("chang");

• 전역 변수와 지역 변수
  • 전역 변수와 지역 변수는 서로 간섭하지 않아 같은 변수명을 쓸 수 있다.
  • 전역 변수를 함수 안에서 매개변수로 받아서 복사해 사용 가능하다.
  • 전역 변수와 지역 변수의 변수명이 같으면 함수 안에서는 지역 변수를 우선적으로 사용한다.

let msg = "welcome";

function sayHello(newName) {
  let msg = "Hello";
  console.log(msg + " " + newName); // Hello Mike
}

sayHello("Mike");
console.log(msg); // welcome

• 함수 선언문, 함수 표현식

  • 함수 선언문은 어디서든 호출이 가능하고, 함수 표현식은 코드의 순서에 따라 호출이 가능하다.
  • JS는 실행전 초기화 단계에서 모든 함수 선언문을 찾아서 생성해둔다. (호이스팅)

• 객체

  • 객체는 중괄호 사이에 키와 값으로 구성된 프로퍼티가 들어간다.
  • for ... in 반복문을 사용하면 객체를 순회하면서 값들을 얻을 수 있다.

function makeObject(name, age) {
  return {
    name,
    age,
    hobby: "football",
  };
}
const Mike = makeObject("Mike", 30);
console.log(Mike); // Object { name: "Mike", age: 30, hobby: "football", }

// const 라서 superman 자체는 변경 불가능 하지만 안의 키 값들은 변경 가능하다.
const superman = {
  name: "clark",
  age: 30,
};

for (let key in superman) {
  console.log(key); // name, age
  console.log(superman.key); // "clark", 30
}

• 객체 메소드
  • 객체 프로퍼티로 할당 된 함수

const spiderman = {
  name: "Tom",
  age: "25",
  strong: function () {
    console.log("강하다.");
  },
};

• 객체 this
  • this는 실행하는 시점에서 결정된다.

const user = {
  name: "Mike",
  sayHello: function () {
    console.log(`Hello, I'm ${this.name}`);
  },
};

• 화살표 함수 this
  • 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
  • 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴

let boy = {
  name: "Mike",
  sayHello: () => {
    console.log(this); // 전역객체를 가리킨다. (브라우저 환경 : window, Node.js : global)
  },
};

boy.sayHello(); // this != boy

• 배열
  • 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다.
  • for ... of 문은 for 문 보다 간단하지만 인덱스를 얻을 수 없다.

2. 자바스크립트 심화강의

• 변수
  • 스코프는 중괄호 안에 있는 영역을 말한다.
  • Temporal Dead Zone 에 있는 변수들은 사용을 할 수 없다. const, let 은 TDZ 에 영향을 받아 할당하기 전에 사용할 수 없다.
  • TDZ 는 스코프 단위로 일어난다.
  • var 은 호이스팅 되기 때문에 에러가 나지 않는다.
  • var 은 함수 스코프라 함수만 아니면 중괄호 안에 있는 var 도 전역적으로 사용 가능하다.

let age = 30;
function showAge() {
  console.log(age);

  let age = 20;
}

showAge(); // error : let 가 호이스팅 되서 TDZ 에 영향을 받기 때문에

• 생성자 함수
  • 주석처리한 this, return 은 새로운 함수를 실행할 때 자동으로 실행해준다.
  • 꼭 new 를 앞에 붙여줘야 새로운 함수가 생성된다.
    • let user1 = new User("Mike", 30);
    • let user2 = new User("Jane", 20);
    • let user3 = new User("Tom", 250);

function User(name, age) {
  // this {} : 빈 객체이다.
  this.name = name;
  this.age = age;
  // return this;
}

• 계산된 프로퍼티

let a = "age";

const jaechang = {
  name: "jaechang",
  [a]: 28, // [a] = age 이다. 따라서 age: 28
};

function makeObj(key, val) {
  return {
    [key]: val,
  };
}

const obj = makeObj("성별", "male");
console.log(obj); // {성별: "male"}

• 객체 메서드
  • 복제
    • 복제할 때 첫 번째 값에 겹치는 부분이 있으면 덮어쓰고 없으면 원래 객체에서 내용이 추가되서 생성된다.

// 빈 객체에 user의 값을 넣어서 newUser 객체를 완성시킨다.
const newUser = Object.assign({}, user);
// user에 user1,2 를 넣어서 복제한다.
const superUser = Object.assign(user, user1, user2);

• property key : 문자형

const objj = {
  1: "1입니다.",
  false: "거짓",
};

Object.keys(objj); // ["1", "false"]
obj["1"]; // "1 입니다."
obj["false"]; // "거짓"

• Symbol : 유일한 식별자를 만들 때 사용
  • 유일성이 보장된다.
  • 다른 사람과 작업할 때 기존의 코드를 덮어 쓸 일이나 신경 쓸 일이 없어진다.

const ab = Symbol("id"); // new 를 붙이지 않는다.
const ba = Symbol("id");

console.log(ab); // Symbol("id")
console.log(ba); // Symbol("id")
// ab !== ba, ab != ba
// 출력은 같은 Symbol() 이지만 둘은 같지 않다!

• Symbol.for() : 전역 심볼

  • 하나의 심볼만 보장받을 수 있다.
  • 없으면 만들고, 잇으면 가져오기 때문
  • Symbol 함수는 매번 다른 Symbol 값을 생성하지만 Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

• Number 과 Math

  • 소수점 둘째자리 까지 표현하기

// 먼저 100을 곱한뒤 반올림을 해주고 다시 100을 나눠준다.
let userRate = 30.1234;
Math.round(userRate * 100) / 100; // 30.12

// 문자열을 반환하기 때문에 반드시 숫자형으로 다시 바꿔줘야 한다.
userRate.toFixed(2); // 30.12

// isNaN() : NaN 인지 판별해줌, NaN === "x" // false , isNaN("x") // true

• sort : 배열 재정렬
  • 배열 자체가 변경됨, 인수로 정렬 로직을 담은 함수를 받는다.
  • 편하게 사용하려면 Lodash 사이트 검색하기!

let arr = [27, 8, 5, 13];

// 8과 27 비교 : 8, 27, 5, 13
// 5와 8 비교 : 5, 8, 27, 13
// 13과 5 비교 : 5 ,8, 27, 13
// 13과 8 비교 : 5 ,8, 27, 13
// 13과 27 비교 :  5 ,8, 13, 27

arr.sort((a, b) => {
  console.log(a, b);
  return a - b;
});

• reduce
  • 인수는 함수를 받음
  • (누적 계산값, 현재값) => { return 계산값 };

let array = [1, 2, 3, 4, 5];

// forEach
let result = 0;
arr.forEach((num) => {
  result += num;
});
console.log(result); // 15

// reduce 사용
// prev(누적 계산값) 0을 cur(현재값) 1과 더해준다.
// prev(누적 계산값) 1을 cur(현재값) 2과 더해준다.
// prev(누적 계산값) 3을 cur(현재값) 3과 더해준다.
// prev(누적 계산값) 6을 cur(현재값) 4과 더해준다.
// prev(누적 계산값) 10을 cur(현재값) 5과 더해준다.
// console.log(arrayResult) // 15

const arrayResult = arr.reduce((prev, cur) => {
  return prev + cur;
}, 0); // 0 : 초기값

console.log(arrayResult); // 15

// 초기값으로 빈 배열을 만들어 준다.
// 나이가 19살 넘은 사람을 빈 배열에 넣어준다.
// 그 값을 리턴한다.
let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Harry", age: 26 },
  { name: "Steve", age: 19 },
];

let userListResult = userList.reduce((prev, cur) => {
  if (cur.age > 19) {
    prev.push(cur.name);
  }
  return prev;
}, []);

• 구조 분해 할당 : 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

let friend = ["Mike", "Tom", "Jane"];
let [friend1, firend2, firend3] = friend;
console.log(friend1, friend2, friend3); // "Mike", "Tom", "Jane"

let person = { name: "Mike", gender: "male" };

// let name = person.name;
// let gender = person.gender; 와 같다.
let { name, gender } = person;