한 입 크기로 잘라먹는 React - Day 2

🗓 진행일: 2022.04.06(수)

7. 함수 표현식 & 화살표 함수

• 함수 표현식
  • 함수를 값(변수)에 담을 때는 이름을 굳이 지정해주지 않아도 된다 (무명함수)
• 화살표 함수

// 함수 표현식
let hello = function (){
	// 비즈니스 로직	
}

// 함수 선언식
function helloWorld() {}

// 화살표 함수
let test1 = () => {
	// 비즈니스 로직
};
// 또는
let test2 = () => "안녕하세요?";

console.log(test2());

• 함수 표현식, 화살표 함수는 호이스팅의 대상이 아님 → 선언한 다음에야 사용할 수 있음

8. 콜백 함수

• 함수를 매개변수로 보내줘서 걔를 call 할 수 있도록 했음 (= 함수 표현식)
• 함수명만 보내줘서 실행은 하지 않고, 이름만 보내면 거기서 실행...

function checkMood(mood, goodCallback, badCallback) {
  // 매개변수로 기분과 기분 좋을 때 동작, 안 좋을 때 동작을 받음
  // 함수표현식으로 매개변수로 전달해줌
  if (mood === "good") {
    // 기분 좋을 때 하는 동작
    goodCallback();
  } else {
    // 기분이 좋지 않을 때 하는 동작
    badCallback();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("good", sing, cry);

9. 객체

Non-Primitive Type (비 원시 타입)

// 객체 만드는 법 1
let person = new Object();

// 객체 만드는 법 2 (객체 리터럴 방식)
let person1 = {};

• 객체의 key는 string으로 적지 않고, 중복하지 않도록 한다 (중복이 된다면 가장 마지막에 선언한 값으로 value가 지정됨)
• 점 표기법, 괄호 표기법이 존재한다
• 괄호 표기법: 대괄호 내에 원하는 key 값의 이름을 문자열로 적는다 → key값을 동적으로 받아서 값을 호출해야 할 때 사용함
• 존재하지 않는 프로퍼티에 접근하면 undefined가 뜬다

let object = {
  key: "value", // 프로퍼티 (객체 프로퍼티)
  key1: 123,
  key2: true,
  key3: undefined,
  key4: [1, 2],
  key5: function () {}
};

console.log(object.key1); // 점 표기법
console.log(object["key"]); // 괄호 표기법

console.log(getPropertyValue("key"));

function getPropertyValue(key) {
  return object[key];
}

• 새로 프로퍼티를 추가할 수 있고, 점 표기법과 괄호 표기법을 이용하여 값 수정이 가능하다
• 객체에 추가, 수정, 삭제 방법

let person = {
  name: "seul",
  age: 25,
  say: function () {
    console.log(`안녕? 나는 ${this.name}이야`); // ${person["name"]}
  } // 메서드 -> 방법
};

person.location = "korea";

console.log(person.location);
delete person.location; // 삭제 방법 or (delete person["name"]);
// 이렇게 하면 연결만 끊고, 값이 남아있어서 메모리가 지워지지 않음
person.location = null;
// 문자열을 날릴 수 있음

// 객체 함수 호출
person.say();

// 근데 없는 걸 불러오면 어떡해?
// 객체 안에 해당 프로퍼티가 있는지 확인
console.log(`name: ${"name" in person}`);

10. 배열

• 자료형이 달라도 모두 배열로 묶을 수 있음
• 순서 (index)를 통해 각각의 값에 접근이 가능하다

let arr = [];
arr.push("1");

11. 반복문

• 내가 다 아는 내용
• 그리고 하나 몰랐던 거: Object.keys, Object.values등으로 객체의 값을 배열로 만들 수 있음

let person = {
  name: "seul",
  age: 29,
  tall: 168
};

const personKeys = Object.keys(person);
console.log(personKeys);

const personValues = Object.values(person);

12. 배열 내장함수

너무 많아서 걍 다 적음

const arr = [1, 2, 3, 4];

// 반복문
arr.forEach((elm) => console.log(elm));

// map (원본 배열을 순회하면서 return을 할 수 있음)
const newArr = arr.map((elm) => {
  return elm * 2;
});

// 값이 있는지 없는지 (===과 같음)
let number = 3;
console.log(arr.includes(number));

// 인덱스로 값 출력
console.log(arr.indexOf(number));

const colorArr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

// 값으로 인덱스 출력?
console.log(colorArr.findIndex((elm) => elm.color === "green"));

// 아예 요소 찾기
console.log(colorArr.find((elm) => elm.color === "green"));

// 배열 필터링
console.log(colorArr.filter((elm) => elm.color === "blue"));

// 배열 자르기 slice(start, end) end-1 까지 자름
console.log(colorArr.slice(0, 4));

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" }
];

const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

// 배열 붙이기
console.log(arr1.concat(arr2));

// 배열 정렬
let chars = ["나", "다", "가"];
chars.sort(); // 문자열 기준으로 정렬함 제법 웃겨
console.log(chars);

let numbers = [0, 1, 3, 2, 10, 30, 20];
// 비교 함수를 제작해서 sort에 넣어야 정렬 가능
const compare = (a, b) => {
  // 1. 같다
  // 2. 크다
  // 3. 작다
  if (a > b) {
    // 크다
    return 1;
  }
  if (a < b) {
    // 작다
    return -1;
  }
  // 같다
  return 0;
};

numbers.sort(compare);
console.log(numbers);

// 다 이어버리는 함수
const finalArr = ["seul", "님", "안녕하세요", "또 오셨군요"];
console.log(finalArr.join(" "));
// join 내에 들어가는 건 구분자