[2024~2025 동계모각코] 3회차 결과

2025.01.14

 

수강 완료 화면

---

23강

1. 배열 및 객체의 분해

<배열편>

const userNameData = ["Max", "Schwejl"]

// 기존의 분해 방식
const firstName = userNameData[0];

// 더 짧은 방식
const [firstName, lastName] = ["Max", "Schwejl"];

이렇게 해두면 firstName을 치면 자동으로 Max가 선택된다.

분해를 통해 각 변수에 값을 자동으로 젖아해놓는 것이다.

<객체편>

const user = {
	name: "Max",
	age: 34
};

// 기존 방식
const name = user.name;
const age = user.age;

// 더 짧은 방식
const {name: userName, age} = {
	name: "Max",
	age: 34
}

객체의 경우는 객체에 정의된 필드 이름을 사용해야 함

(배열은 마음대로!!)

단 name: userName 처럼 내가 별칭을 지어줄 수는 있음

기호의 왼쪽에 나오는 중괄호는 분해에 사용된다는 점

24강

함수 매개변수 목록에서 분해

• 객체를 포함하는 매개변수를 수록할 경우 객체 프로퍼티를 꺼내서 로벌 범위 변수로 만들 수 있다.
• function storeOrder(order) { localStorage.setItem('id', order.id); localStorage.setItem('currency', order.currency); } // 분해 by 점 표기법 function storeOrder({id, currency}) { localStorage.setItem('id', id); localStorage.setItem('currency', currency); }
• 그치만 주의할 것!! 여전히 함수 storeOrder는 매개변수를 하나만 받고 있는거다!! (중괄호로 싸여져 있다는 점)
• 아래와 같이 호출된다는 점!
• storeOrder({id: 5, currency: 'USD', amount: 15.99});

25강

스프레드 연산자 (== 전개 연산자)

• 병합된 리스트를 만들려면 []로 이루어진 새 배열을 반들고 […]을 이용

const hobbies = ["Sports", "Cooking"];
const user = {
	name: "Max",
	age: 34
};

const newHobbies = ["Reading"];

// 그냥 두개의 배열이 합쳐져서 mergedHobbies안에는 구분된 값 표현
const mergedHobbies = [hobbies, newHobbies];

// 그냥 다 합치고 싶다면?
const mergedHobbies = [...hobbies, ...newHobbies];
>> 이렇게 하면 각 배열의 값들만을 새 배열에 추가함

// 이렇게 하면 isAdmin, name, age 3개의 속성을 가지는 객체 생성
const extendedUser = {
	idAdmin: true,
	...user
}

26강

컨트롤 구조 다시 살펴보기(제어문 살펴보기)

• 일반적으로는 if문을 사용해 사전에 알 수 없는 조건을 걸러낸다
• const password = prompt('Your Password'); if (password === "Hello") { console.log("Hello works"); } else if (password === "hello") { console.log("hello works"); } else { console.log("Access not granted."); }
• for문 (배열 순회 반복문)
• const hobbies = ["Sprots", "Cooking"]; for (const hobby of hobbies) { console.log(hobby); }

27강

리액트 없이 dom 조작

• 로드된 웹사이트 확인, 런타입에 읽고 조작 : js의 장점 but 리액트 시에는 필요없음(선언형이기 때문)

28강

함수를 값으로 사용하기

• 내장된 setTImeout()이런 함수를 사용 가능미리 작성된 함수를 전달할 떄는 이름만!!! 전달한다!! () 없이
  • 반환값을 원하면 ()을 붙이면 된다.
    • 그러면 handleTimeout이 먼저 실행되고 그 다음에 그 반환값을 매개변수로 해서 setTimeout이 실행
  • 근데 우리는 지금 그러지 않으니까 그냥 이름만 적어서 함수 자체!
• // 이렇게 매개변수란에 바로 익명함수도 작성 가능 setTimeout(() => {}) // 사전 정의 함수 사용 가능 function handleTimeout() { console.log("Timed out!"); } const handleTimeout2 = () => { console.log("Timed out ... again!"); } // 함수랑 이 함수를 실행할 떄까지 대기할 ms 단위의 시간 setTimeout(handleTimeout, 2000);

내장 함수에만 쓸 수 있냐? 그것도 아님!! 내가 만드는 함수에도 쓸 수 있음

function greeter(greetFn) {
	greetFn();
}

greeter(() => console.log("Hi"));

이렇게 하면 하단 줄의 익명함수의 내용이 greetFn이라는 함수명을 가지게 되는 거고 greetFn()에서 해당 함수의 내용이 실행이 된다

29강

함수 내부에서 함수 정의하기 (리액트 사용시 적합)

function init() {
	function greet() {
		console.log('Hi!');
	]
	
	greet();
}

greet(); // 사용 불가 얘를 생성하는함수 내에서만 사용 가능
init(); // 사용 가능 (정상적으로 Hi!가 출력됨)

30강

참조형과 기본 값 비교

let userMessgae = 'Hello!';

// 기존 값 수정 불가(새로운 변수가 되어버림)
userMessage = userMessage.concat('!!!');

const hobbies = ["Sprots", "Cooking"];
// 기존 배열이 수정됨
// (기존 배열의 주소로 가서 확인하고 거기에 원소 추가)
hobbies.push("Working");
console.log(hobbies);

참조형 변수를 저장할 때는 그 값의 주소를 저장한다.

string이런 거는 바로 값을 저장해 버린다고 볼 수 있다. (정확히는 아님)

** 주소는 객체를 다룰 때만!!! **

const를 수정할 수 있는 이유!! (새 변수를 만들수 없다는 거니까!!)

• 상수에 객체 저장 객체는 주소 참조해 접근이니까 메모리 주소에 있는 값을 조작할 수는 있음

31강

자료 모음

• next-gen-js-summary(pdf)

let, const : var대체

객체의 내용 호출

class Person {
    name = 'Max';
    printMyName = () => {
        console.log(this.name);
    }
}
 
const person = new Person();
person.printMyName();

class 사용시 inheritance 사용 가능

class Human {
	species = 'human';
}

class Person extends Human {
	name = 'Max';
	printMyName = () => {
		console.log(this.name);
	}
}

const person = new Person();
person.printMyName();
console.log(person.species);

32강

js array function

• map, find, findIndex, filter, reduce, concat, slice, splice

33강

정답 코드 모음