3회차 과제 - 박지원

[cryingdryice]

3회차 과제

정리 주제: 함수, 배열, 객체

1. 함수

자주 쓰이는 코드를 기능으로 묶어 선언하고, 저장하는 방법입니다. 특정 기능을 수행하는 코드의 덩어리입니다. 재사용 가능에 의의를 두고, 코드 가독성을 향상시킵니다.

• 함수 선언 예)

function sayHello(name) {
	alert("안녕하세요, " + name + "님!");
}
sayHello("박지원");

• 화살표 함수 선언 예)

const sayHello = (name) => {
	alert("안녕하세요, " + name + "님!");
};

이 방식은 function 키워드를 생략할 수 있습니다.

• 콜백 함수 예)

function greet(name, callback) {
	console.log("안녕하세요, " + name + "님!");
	callback();
}

greet("박지원", () => {
	console.log("좋은 하루 되세요!");
});

콜백 함수란 함수의 인자로 전달되는 함수를 뜻합니다. 특정 작업이 끝난 후 실행할 함수를 넘길 때 사용합니다.

• 재귀 함수 예)

function factorial(n) {
	if (n === 1) return 1;
	return n * factorial(n - 1);
}

console.log(factorial(5));

재귀 함수란 자기 자신을 호출하는 함수를 뜻합니다.
종료 조건을 두지 않는다면 함수가 무한히 작동되고, 스택오버플로우가 발생할 수 있습니다.

스택오버플로우란? 함수가 너무 깊게 호출되어, 호출 스택(call stack)의 한계를 초과한 상태를 말함.

---

2. 배열

여러 개의 데이터를 순차적으로 저장할 수 있는 리스트형 자료구조입니다. 각 요소의 인덱스는 0부터 시작합니다. js의 배열은 크기를 동적으로 다룰 수 있고, 다양한 타입의 값도 담을 수 있습니다.

• 배열 예)

const arr1 = [1, 2, 3];
const arr2 = new Array(3);
const arr3 = Array.of(1, 2, 3);

• 배열 요소 추가, 제거 함수

  • push(): 마지막에 요소 추가
  • pop(): 마지막 요소 제거
  • unshift(): 맨 앞에 요소 추가
  • shift(): 맨 앞 요소 제거

  const arr = [1, 2];
  arr.push(3); // [1, 2, 3]
  arr.pop(); // [1, 2]
  arr.unshift(0); // [0, 1, 2]
  arr.shift(); // [1, 2]

• 배열 순회 및 특수 함수

  • forEach(): 단순 순회
  • map(): 배열의 각 요소를 변형
  • filter(): 조건에 맞는 요소 추출
  • find(): 조건에 맞는 첫 번재 요소 반환
  • includes(): 특정 값 포함 여부 확인

  const arr = [1, 2, 3];
  arr.forEach((x) => console.log(x)); // 1 2 3
  arr.map((x) => x * 2); // [2, 4, 6]
  arr.filter((x) => x > 2); // [4, 6]
  arr.find((x) => x > 1); // 2
  arr.includes(2); // true

---

3. 객체

속성(key)과 값(value)을 쌍으로 저장하는 자료구조입니다. 객체 안의 key-value 쌍 하나하나를 프로퍼티라고 합니다.

• 객체 예)

const user = {
	name: "지원",
	age: 25,
	birthday: "2001-08-21",
};

• 객체 접근 방식

  • user.name
  • user["name"]

• 객체 관련 내장 함수

  • Object.keys(): 모든 key(속성명) 을 배열로 반환
  • Object.values(): 모든 value(값) 를 배열로 반환
  • Object.entries(): [key, value] 쌍의 배열을 요소로 가진 배열 반환
  • Object.assign(): 배열을 객체로 변환

  const user = {
  	name: "지원",
  	age: 25,
  	birthday: "2001-08-21",
  };
  
  Object.keys(user); // ["name", "age", "birthday"]
  Object.values(user); // ["지원", 25, 2001-08-21]
  Object.entries(user);
  /*
  [
    ["name", "지원"],
    ["age", 25],
    ["birthday", 2001-08-21]
  ]
  */
  
  const arr = ["사과", "바나나", "딸기"];
  const obj = Object.assign({}, arr);
  // {0: "사과", 1: "바나나", 2: "딸기"}

4. 구조 분해 할당

함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생깁니다. 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있습니다.

• 배열 분해 예)

let arr = ["Jiwon", "Park"];

let [firstName, surname] = arr;

console.log(firstName); // Jiwon
console.log(surname); // Park

• 객체 분해 예)

const user = {
	name: "지원",
	age: 25,
	birthday: "2001-08-21",
};

let { name, age, birthday } = user;

console.log(name); // 지원
console.log(age); // 25
console.log(birthday); // 2001-08-21