결론은 처참히 실패..

아래는 즐겁고 치열한 일요일의 기록✍️

---

코딩 공부 커리큘럼.. GPT에게 맡겨보기

오늘은 즐거운 일요일!
월요일 학원에서의 사투를 위한 오늘의 단련 코스를 chatGPT에게 부탁했다.

친절한 그? 그녀?가 짜 준 커리큘럼은 아래와 같다.

과연 4시간 안에 뽀갤 수 있을지..ㅎㅎ
벨로그 기록과 함께 도전 시작!

---

✅ DOM 조작, 이벤트 핸들링

• DOM 조작 (20분)
• 목표: JS로 HTML 요소를 선택하고, 내용/스타일 바꾸는 연습
• 연습 예제:
  

모르는, 부족한 부분 발견해서 코딩앙마 스승님의 영상 찾아보며 함수의 늪에 빠지기 시작.........
코딩앙마님 영상 링크

✅ 함수의 기초

- function 함수명 (매개변수) {
     실행할 코드;
    }

• 매개변수는 없어도 되고, 2개 이상이면 쉼표를 이용해 표기할 수 있음
• 이후 중괄호 안에 함수 작성
• 함수를 호출하면 함수가 실행됨
• 함수는 중복을 줄여주고 유지보수를 쉽게 만듦(!)
  

✅ 함수 선언문 vs 함수 표현식

함수선언문 :

function sayHello() {
 console.log('hello'); 
}

함수표현식 :

let sayHello = function() {
  console.log('hello');
}

• 함수선언문은 어디서든 호출할 수 있다 (JS가 인터프리터 언어임에도 불구하고 선언 전에 호출을 해도 동작함 - 호이스팅 가능)
  **참고로 호이스팅은 원래 “들어 올리기”라는 영어에서 온 항해·기계 용어 → JS에선 “선언이 위로 올라간 듯 보이는” 동작을 비유적으로 부르는 말.
• 코딩앙마님은 대부분의 상황에서 함수선언문의 사용이 더 자유롭고 편리하게 사용할 수 있다고 말씀하심~

✅ 화살표 함수

function 이라는 단어가 없어지고 화살표=>로 표기

  // 일반적인 함수 표기
  let add = function(num1, num2){
  	return num1 + num2;
  }

  // 화살표 함수 표기
  let add = (num1, num2) => {
  	return num1 + num2;
  }

  // 화살표 함수 더 압축 버전
  let add = (num1, num2) => (
  	num1 + num2;
  )

// 화살표 함수 더더 압축 버전
let add = (num1, num2) => num1 + num2;
// 리턴문이 한 줄 이라면 괄호도 생략 가능

// 화살표 함수 더더더 압축 버전
let sayHello = name => `hello, ${name}`
// 인수가 딱 하나면 괄호도 생략 가능

개인적으로 화살표함수 더더더 압축 버전, 그러니까 모든 괄호가 생략된 버전을 처음 봤을 때 뭐지? 하고 벙쪘던 기억이 있다.. ㅎㅎ

익숙해지려면 많이 쓰고, 보는 수밖에..

// 화살표 함수 더더더 압축 버전2
let showError = () => {
	alert('error!');
}
// 만약 인수가 없는 함수라면, 이 때는 괄호를 생략할 수 없다..

개인적으로 이 버전에서 저게 변수인지 함수인지 헷갈려서 벙쪘던 기억이... 그런데 나처럼 헷갈리는 경우가 많다고 한다.
위 경우에서

showError'는 변수(식별자), 값은 함수(타입은 function)

• 실행 시점에 함수가 만들어져 변수에 할당되니, ‘이게 변수야? 함수야?’ 느낌이 옴 → 둘 다 맞다(변수에 담긴 함수).

같은 의미의 표기들

// 함수 선언문 (호이스팅 O)
function showError() { alert('error!') }

// 함수 표현식 (호이스팅 X)
const showError = function () { alert('error!') }

// 화살표 함수 표현식
const showError = () => alert('error!')

화살표 함수 이게 함수야? 빠르게 구분하는법

typeof showError        // "function"
showError()             // 호출되면 함수

화살표 함수 사용 꿀팁

• 동사로 네이밍해서 함수인 '티' 내기
• 콜백은 화살표로 짧고 깔끔하게
• 독립 로직/메서드는 function선언 또는 메서드 문법으로 명확하게
• this가 필요하면 화살표 금지

---

결론

GPT가 제안해 준 커리큘럼은 중간에 화살표 함수라는 함정카드를 만나 끝없는 물음표의 늪에 빠져 실패......

현재시간 밤 11시 55분..
마지막 미션으로 가장 헷갈리는.. 아직도 잘 모르겠는.. 화살표 함수 암시적 표현에 대해 조금 더 뽀개보고 자야겠다.