Today

1. React에서 쓰이는 JS(1)!

var를 쓰지 말자 => 🗑️

• 범위 관리의 어려움
• 코드의 가독성과 유지보수성 저하(논리적인 흐름에서 벗어남)
  
  

객체

key - value
JSON(JavaScript Object Notation) : 객체 기반

const user = {
	name: "RingKim",
  	age: 31,
  	isAdmin: true,
  	printHello: () => console.log("hello")
}

// 객체 접근

// 점 표기법
console.log(user.name);
console.log(user.age);
user.printHello;

// 괄호 표기법
const attribute = "name";
console.log(user[attribute]); // === console.log(user["name"]);

// 추가, 수정, 삭제
user.email = "RingKim1@gamil.com";
user.age = 32;
delete user.email;

// Object.keys() : key들의 집합을 배열로 나타냄
const keys = Object.keys(user);
// Object.values() : value들의 집합을 배열로 나타냄
const values = Object.values(user);
// Object.entries() : [[key, value]...[key, value]]
const entries = Object.entries(user);

// assign : 원본(대상) 객체에 추가적인 (출처)객체에 속성을 복사하는 것
const userDetails = {
	occupation: "Developer"}

Object.assign(user, userDetails);
console.log(user) // {	name: "RingKim", age: 31, isAdmin: true, printHello: () => console.log("hello"), occupation: "Developer"}

배열

const numbers = [1, 2, 3];

// 접근, 수정
console.log(numbers[1]); // 2

numbers[1] = 10;
console.log(numbers[1]); // 10

// map : 원본 배열에서 각 요소를 가공한 새로운 배열을 리턴하는 함수

// 1) 배열 내의 모든 요소 각각에 대해
// 2) 주어진 함수를 호출한 결과를 모아
// 3) 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function(num) {
	return num*num; // return이 중요!(없으면 undefined)
});

console.log(squared); // [1, 4, 9, 16, 25]

// filter
// 검색 등에서 활용
const numbers2 = [1, 2, 3, 4, 5];
const evenNumbers = numbers2.filter(function(num) {
	return num % 2 === 0;
})

console.log(evenNumbers); // [2, 4]

// reduce
const numbers3 = [1, 2, 3, 4, 5];

numbers3.reduce(function(acc, ele, index) {}, initialValue);

// sort : 원본 배열을 바꿈!
// 비교함수를 넣지 않을 경우 유니코드 기반 비교

👉 배열 메서드 더 보러가기

Template Literals

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법

Destructuring(De : not, Structuring : 구조)

• 객체를 구조분해할당 시 객체의 key 가 중요
• 중첩 객체에서도 구조분해할당 가능

const item = {
	name: "커피",
  	price: 4000
}
const {name, price} = item;
console.log(`안녕하세요! 주문하신 ${name}은 ${price}원 입니다.`)

• 배열을 구조분해할당 시 index(순서, 위치)가 중요

const colors = ["red", "green", "blue"];
const [,,thirdColor] = colors;

console.log(thirdColor); // blue

Spread Operators

const originalUser = {name:"RingKim1", age:31};

// 1. 복사시
const updatedUser = {...originalUser}; // 직접 값을 입력한 효과 : 복사본을 바꿔도 원본이 바뀌지 않음
const updatedUser.age = 32;

// 2. 배열이나 객체를 합칠 경우
const first = [1, 2, 3];
const second = [4, 5, 6];

const combinedArray = [...first, ...second];

// 객체를 합칠 경우에 key값이 같을 경우
// 뒤에 있는 obj의 key값이 덮어 씌움!

rest operator(나머지 매개변수)

// 1. 함수의 매개변수

// 2. 객체 분해 할당 시, 여러 값을 그룹핑
const person = {
	name: "John" ,
  	age: 30,
  	country: "USA",
  	occupation: "Developer"
}

const {occupation, ...rest} = person; // rest : 아무렇게나 명명해도 됨
console.log(rest); // {name: "John", age: 30, country: "USA"}

2. React

리액트에서 {표현식}
표현식이다 === 변수에 할당 할 수 있다.

---

Learn

자바스크립트 문법을 복습하고 있는데 아직 익숙하지 않은 개념이 많다..
Promise, 구조분해할당, this바인딩, 인스턴스 등등..

이해할때까지 복습하자

---

주절주절

주말에 너무 쉬었나 🥲 낯설다

수요일.. 쉬는 날인데 더더욱 열심히 하자