자바스크립트 기초 정리 2
| 기본값, return, 표현식, 호이스팅, 함수 선언 방식, 화살표 함수 표현식
오늘은 어제에 이어서 함수에 대해서 마저 배우고, 화살표 함수 표현식에 대해 배웠다!
함수 (Function)
| 함수, 변수의 기본값
- undefined
| 반환값
- return 키워드로 값을 명시적 반환한다.
- 함수 내부에서 return을 사용하면 실행을 중단하고 값을 반환함.
- return 아래 코드들은 실행되지 않음.
- return이 없으면 함수는 암묵적으로 undefined를 반환함.
function add(x, y) {
return x + y;
}
| 표현식
- 전달되기 전에 평가되어야 하는 값
- 예: 12 + 9, sum(21 + 11 ,9)
- 표현식(예: 21 + 11)을 전달하는 경우, 해당 표현식은 함수에 전달되기 전에 먼저 평가
- 함수를 호출해 반환 값을 다른 함수에 전달하는 경우, 값을 사용하기 전에 먼저 함수 평가
- 자바스크립트는 오직 "값"만 전달할 수 있음.
| 함수 선언 방식 2가지
- 함수 선언: 특정 순서에 따라 작업이 실행되는 코드 묶음(블록)
1. function을 사용한 함수 선언
function add(x, y) {
return x + y
}
2. 함수 표현식(expression)
- 함수명을 지정하지 않아도 함수를 선언할 수 있다.
- 익명(Anonymous) 함수라고도 함.
const add = function(x, y) {
return x + y
}
| 호이스팅 (Hoisting)
📌 함수 선언
- function 선언 방식은 호이스팅되어 코드의 맨 위로 끌어올려짐.
- 함수 호출이 선언보다 먼저 나와도 정상 작동함.
→ 코드를 구조적으로 정리하기 좋음.
sayHello() // 가능
function sayHello() {
console.log('안녕!')
}
📌 함수 표현식
- var, let, const로 선언한 함수 표현식은 변수 선언 자체는 호이스팅되지만, 함숫값은 호이스팅되지 않음
- 선언 전에 호출하면 에러 발생.
sayHello() // ❌ 에러
const sayHello = function() {
console.log('안녕!')
}
📌 변수 선언 (var, let, const)
- var로 선언한 변수는 선언과 동시에 undefined로 초기화됨.
- 선언 이전에 접근하면 undefined가 출력됨.
- 따라서 참조는 가능하지만, 값은 아직 할당되지 않음.
console.log(마이네임) // undefined
var 마이네임 = '레이'
- let과 const는 호이스팅은 되지만 "TDZ(Temporal Dead Zone)" 때문에
- 선언 전에 접근하면 참조 에러(ReferenceError) 발생함.
console.log(마이네임) // ❌ ReferenceError
let 마이네임 = '레이'
📌변수 선언 방식별 동작 비교 (함수 호출 vs 변수 참조)
| 구분 |
var | let | const |
| 호이스팅 | O (선언 + undefined 초기화) | O (but TDZ에 걸림) | O (but TDZ에 걸림) |
| 초기화 시점 | 선언과 동시에 undefined | 선언문 도달 시 | 선언문 도달 시 (초기화 필수) |
| 선언 전 변수 참조 시 | 가능 (undefined 반환) | ReferenceError | ReferenceError |
| 선언 전 함수 호출 시 (※ 함수 표현식일 때) |
TypeError (undefined is not a function) |
ReferenceError | ReferenceError |
| 재할당 가능 여부 | 가능 | 가능 | 불가능 |
TDZ (Temporal Dead Zone, 일시적 사각지대)
- 변수는 호이스팅되어 메모리에 등록은 되어 있지만, 초기화되기 전까지 접근할 수 없는 구간
- 호이스팅 현상을 잘 이용하면 코드의 실행 흐름을 깔끔하게 유추할 수 있다.
// 코드 흐름을 먼저 보여줌
wakeUp()
brushTeeth()
haveBreakfast()
// ...
// 함수들은 파일 맨 끝에 배치
function wakeUp() {
console.log('⏰ 일어납니다.')
}
function brushTeeth() {
console.log('🪥 이를 닦습니다.')
}
function haveBreakfast() {
console.log('🍞 아침을 먹습니다.')
}
화살표 함수 표현식
- 화살표 함수는 뚱뚱한 화살표(Fat Arrow =>) 모양을 사용
- function 키워드 제거
- 함수의 (), {} 사이에 => 모양 추가
let readABook = (bookName) => {
console.log('"' + bookName + '"을 읽는다.');
};
readABook('로미오와 줄리엣'); // "로미오와 줄리엣"을 읽는다.
| 다양한 화살표 함수 구문
1. 매개변수 개수
// 1. 매개변수의 개수
// 0개
let readABook = () => {
console.log('책을 읽는다.');
};
// 매개변수를 사용하지 않을 경우, 관례로 밑줄(_)을 사용할 때도 있다.
let readABook = _ => {
console.log('책을 읽는다.');
};
// 1개
let readABook = (bookName) => {
console.log('"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견')
// 매개변수 1개면 소괄호 생략 가능
let readABook = bookName => {
console.log('"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견')
// 2개 이상인 경우, 소괄호는 생략하지 않는다.
let readABook = (bookName, day) => {
console.log(day+'일에 걸쳐서 '+'"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견', 21)
2. 암묵적 반환
1. 함수에 한 줄의 코드만 작성
2. 해당 코드 줄을 중괄호({})로 묶지 않는다.
- 위 두 가지 조건이 충족될 경우, 자동으로 반환문을 생성한다.
- 암묵적으로 반환 기능을 사용하면 세 줄의 코드를 단 한 줄로 줄일 수 있다!
🔄 화살표 함수에서 객체를 반환할 때 주의할 점
- 아래의 코드처럼 작성하면 오류가 발생한다.
let getStyles = _ => {
'display': 'flex',
'row-gap': 24
Uncaught SyntaxError: Unexpected token ':'
📌 이유
- 화살표 함수에서 중괄호 {}는 "함수의 코드 블록"으로 해석된다.
- 자바스크립트는 { 'display': 'flex' }를 객체가 아니라 일반 코드 블록으로 보고 처리
- 결과적으로 객체 리터럴 문법을 잘못된 코드로 인식해서 오류가 발생한다.
✅ 해결 방법
let getStyles = _ => ({
'display': 'flex',
'row-gap': 24
})
- 소괄호 ()로 감싸면 중괄호 {}가 "객체 리터럴"로 인식됨
- 따라서 함수는 해당 객체를 암묵적으로 반환하게 된다.
➕ 왜 함수 표현식에 const를 사용할까?
// 잘못된 예시
let thisIsAFunction = () => {
console.log('이것은 함수입니다.')
}
thisIsAFunction = {} // ❌ 함수가 다른 타입으로 재할당됨
thisIsAFunction() // ❌ TypeError: thisIsAFunction is not a function
| 정리 포인트
1. const는 재할당을 막아준다
- const로 선언하면 변수 자체를 다른 값으로 바꾸는 것이 불가능함.
- 즉, 실수로 함수가 다른 타입(예: 객체, 숫자)으로 덮어쓰게 되는 것을 방지할 수 있음.
const thisIsAFunction = () => {
console.log('함수입니다.')
}
thisIsAFunction = {} // ❌ TypeError: Assignment to constant variable
2. 화살표 함수는 값(데이터)이기 때문에 변수에 할당됨
- 화살표 함수는 함수 선언이 아니라 함수 표현식이다.
- 자바스크립트에서 함수 표현식은 하나의 값(value)이므로 변수에 할당되는 게 기본.
- 함수는 변하지 않아야 하는 값이기 때문에, const를 쓰는 것이 일반적인 패턴.
3. 함수의 의도와 역할을 명확하게 표현
- 이 변수는 “변하지 않는 함수”임을 선언 시점부터 드러낼 수 있음.
- 팀원 또는 미래의 나에게 “이 변수는 바뀌면 안 돼”라는 메시지를 줌.
| 정리 요약
🔒 화살표 함수는 const로 선언하는 것이 기본 패턴이다.
- 실수로 다른 값으로 재할당하는 것 방지
- 이 함수가 "변하지 않아야 할 값"임을 명확하게 보여줌
- 따라서 함수 표현식에는 let보다 const가 더 안전하고 권장된다.
오늘의 느낀점 !
기존에 알고 있던 언어들과 유사한 부분도 있어서 해당 부분들은 아마도(?) 이해하기 수월했던 것 같다...!
그런데 호이스팅이라는 개념이 이해되는 듯하면서도 생소했다...
특히 변수의 호이스팅에 대해서 배웠을 때, 왜 var는 호이스팅이 되고 let과 const는 호이스팅이 안된다고 하는지 정확히 이해하지는 못했다😭
그래서 AI와 검색의 도움을 받아서 자바스크립트에서 변수의 호이스팅에 대해 좀 더 공부해 봐야 할 것 같다.
점점 배우는 양이 늘어나니까 언제 과부화가 올진 모르겠다.
'학'만 하는 것이 아닌 꼭 '습'까지 해서 기초 지식을 나의 것으로 만들어버리자~!!