Javascript

1. 기명 함수 표현식

• 함수 표현식으로 함수를 만들때 선언하는 함수에 이름을 표현

const Hi = function () {
  console.log('Hi');
};

console.log(Hi.name); // Hi

const Hi2 = function printHi() {
  console.log('Hi');
};

console.log(Hi2.name); // printHi

• 함수 내부에서 함수 자체를 가리킬 때 사용

let countdown = function(n) {
  console.log(n);

  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
};

countdown(5);

• 재귀함수: 자기 자신을 부르는 함수

---

2. 즉시 실행 함수(익명 함수)

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

// 즉시 실행 함수는 이름을 지어주더라도 외부에서 재사용 불가
(function Hi() {
  console.log('Hi!');
})();

Hi(); // ReferenceError

// 즉시 실행 함수의 활용

// 1. 초기화
(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드들..
})();

// 2. 재사용이 필요없는, 일회성 동작을 구성할 때 활용
const firstName = Stark;
const lastName = Tony;

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

---

3. 함수 선언

// 함수 선언
function Hi() {
	console.log('Hi!')
}

// 함수 표현식: 함수를 값으로 취급
// 1. 변수에 할당해서 사용
const Hi = function () {
	console.log('Hi')
}

// 2. 객체의 메소드로 활용
cosnt hi = {printHi: function() { 
	console.log('Hi')
    }
}

// 3. 콜백 함수로 활용
myBtn.addEventListener('click', function () {
	console.log('Clicked!')
})

// 4. 고차 함수로 활용
function HiTwo() {
	return function() {
    	console.log('Hi?')
    }
}

---

4. 파라미터의 기본값

// '???' 의 경우 함수를 호출할 때 argument를 전달하지 않으면 동작되는 기본값
function sayHi(name = '???') {
  console.log(`Hi! ${name}`);
}

sayHi('JavaScript'); // Hi! JavaScript
sayHi(); // Hi! ???

---

5. arguments 객체

// arguments 객체: 함수를 호출할 때 전달한 argument들을 배열의 형태로 모아둔 유사 배열

function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg); 
  }
}

printArguments('Tony', 'Hurk', 'Tom');

// Rest Parameter => ...agrs
function printRankingList(first, second, ...others) {
  console.log('레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

---

6. Arrow Function

// 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식
// arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다르다
// 화살표 함수 정의
const getTwice = (number) => {
  return number * 2;
};

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
};

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

---

7. this

// 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가짐. 
// 하지만 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체가 담김

---

8.  객체 Spread

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}


// Spread 구문을 사용해서 새로운 배열을 만들거나 함수의 argument로 사용 불가
// 객체를 Spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용

const snacks = ['원카칩', '꿀버터칩', '헛스윙칩', '태양칩', '야채시간'];
const drinks = ['사이다', '콜라', '우유', '물', '커피', '레몬에이드'];

function printArguments(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

// 1. Spread 구문을 활용해서 sancks와 drinks 배열을 각각 mySnacks와 myDrinks 변수에 복사해 주세요.
const mySnacks = [...snacks];
const myDrinks = [...drinks];

mySnacks.splice(2, 3);
myDrinks.splice(1);

// 2. Spread 구문을 활용해서 mySnacks와 myDrinks 순서로 두 배열을 합쳐서 myChoice 변수에 할당해 주세요.
const myChoice = [...mySnacks, ...myDrinks];

// 3. Spread 구문을 활용해서 myChoice의 각 요소들을 printArguments 함수의 아규먼트로 전달해 주세요.
printArguments(...myChoice);

---

9. 옵셔널 체이닝

// 옵셔널 체이닝: ?.
// 만약 옵셔널 체이닝 연산자 왼편의 속성 값이 undefined 또는 null이 아니라면 그 다음 속성 값을 리턴,
// 그렇지 않으면 undefined를 반환

function printCatName(user) {
  console.log(user.cat?.name);
}

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

const user2 = {
  name: 'Young',
}

printCatName(user2); // 함께 지내는 고양이가 없습니다.

---

10. Try, Catch, Finally 

try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발상했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finall문에서 에러가 발생했을 때 실행할 코드
}

function printMembers(...members) {
  for (const member of members) {
    console.log(member);
  }
}

try {
  printMembers('영훈', '윤수', '동욱');
} catch (err) {
  alert('에러가 발생했습니다!');
  console.error(err);
} finally {
  const end = new Date();
  const msg = `코드 실행을 완료한 시각은 ${end.toLocaleString()}입니다.`;
  console.log(msg);
}

---

11. 조건부 연산자(삼항 연산자)

const cutOff = 80;

const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!';

console.log(passChecker(75));

// 내부에 변수나 함수 선언, 반복문 사용 불가

---

12. 구조 분해

// Array Destructuring
const members = ['코딩하는효준', '글쓰는유나', undefined, '편집하는민환', '촬영하는재하'];
const [macbook, ipad, airpod = '녹음하는규식', ...coupon] = members;

console.log(macbook); // 코딩하는효준
console.log(ipad); // 글쓰는유나
console.log(airpod); // 녹음하는규식
console.log(coupon); // (2) ["편집하는민환", "촬영하는재하"]

// Object Destructuring
const macbookPro = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16 GB 2667 MHz DDR4',
  storage: '1TB SSD 저장 장치',
};

const { title, price, color = 'silver', ...rest } = macbookPro;

console.log(title); // 맥북 프로 16형
console.log(price); // 3690000
console.log(color); // silver
console.log(rest); // {memory: "16 GB 2667 MHz DDR4", storage: "1TB SSD 저장 장치"}

---

13. 에러와 에러 객체

// 자바스크립트에서 에러가 발생 -> 프로그램 멈춤 -> 코드 동작 X
// 애러 객체: SyntacError, ReferenceError, TypeError 등

// 애러 객체 만드는 법
throw new TypeError('msg');