ES6 변수 선언
| 구분 | 스코프 | 중복 선언 | 상수 |
|---|---|---|---|
| var | 함수 스코프 (제어문 인식 ❌) | ✅ 가능 | ❌ |
| let | 블록 스코프 (제어문 인식 ✅) | ❌ 불가 | ❌ |
| const | 블록 스코프 (제어문 인식 ✅) | ❌ 불가 | ✅ |
if (a > 0) {
var e = 10; // 전역 변수 — if 밖에서도 접근 가능
let f = 20; // 지역 변수 — if 밖에서 접근 불가
}
console.log(e); // 10
console.log(f); // ❌ ReferenceError호이스팅
-
인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 등 선언문을 스코프 최상단으로 끌어올리는 현상
-
함수 호이스팅 → 사용 O (개발자 자유도 향상)
-
변수 호이스팅 → var만 발생 / let, const는 TDZ(Temporal Dead Zone) 배치 → 발생 X
객체 (Object)
JavaScript 객체 종류
-
내장 객체 — Date, Array, Math, String 등
-
BOM 객체 — window, document, form 등
-
DOM 객체 — element, attribute, text 등
-
사용자 정의 객체 — 클래스 없이 직접 생성
객체 생성 방법
// 1. Object 내장 객체
const hong = new Object();
hong.name = '홍길동';
hong.age = 20;
delete hong.address; // 프로퍼티 삭제
// 2. 객체 리터럴 {} ← 권장
const gang = {
name: '강감찬',
age: 22,
address: '인천시'
};프로퍼티 접근 방법
-
hong.name — 점 표기법
-
hong['name'] — 괄호 표기법 (하이픈 포함 키 등 특수 경우 필수)
중첩 객체 / 객체 배열
// 중첩 객체
const user4 = {
name: '홍길동',
address: { si: '서울시', gu: '강남구', dong: '역삼동' }
};
console.log(user4.address.dong); // '역삼동'
// 객체 배열 리터럴
const slist = [
{ name: '홍길동', age: 20 },
{ name: '아무개', age: 20 }
];객체 내 함수 (메서드)
const pig = {
name: '꿀꿀이',
eat: function() { alert('꿀꿀~ ' + this.name); }
};this — 해당 함수를 소유한 객체 / 전역 함수에서 this → window
생성자 함수
- 클래스가 없는 JS에서 클래스 역할 대체
function User(name, age) { // 파스칼 표기법 (관습)
this.name = name;
this.age = age;
}
const u1 = new User('홍길동', 20);new 실행 순서
-
new Object() → 빈 객체 생성
-
생성자 함수 실행 → this에 프로퍼티 추가
-
객체 반환
window 객체
-
var 전역 변수 → 자동으로 window 프로퍼티
-
let / const → window 프로퍼티 ❌
-
전역 함수 → window 프로퍼티
-
alert(), setTimeout() 등 → window.alert() 축약 표현
배열의 실체
// JS 배열은 사실 객체
const list = ['사과', '귤', '딸기'];
// 내부적으로 → { 0: '사과', 1: '귤', 2: '딸기', length: 3 }
for (let temp in list) // 프로퍼티 탐색 (인덱스 반환)
for (let temp of list) // 요소 탐색 ← 배열에 권장클로저 (Closure)
- 내부 함수가 외부 함수의 지역 변수를 기억하는 함수 — 렉시컬 환경에 저장
btn1.onclick = function() {
let n2 = 20;
btn2.onclick = function() {
console.log(n2); // ✅ 외부 함수의 지역변수 접근 가능
};
};대다수 언어 → 렉시컬 환경 변수 읽기 전용 / JS는 수정도 가능
템플릿 문자열 (Template String)
- ES6 — 백틱(`) 사용
// 기존
console.log('이름은 ' + name + ', 나이는 ' + age + '살');
// 템플릿 문자열
console.log(`이름은 ${name}, 나이는 ${age - 1}살`);
console.log(`이름은 ${name.substr(1, 3)}`); // 표현식 사용 가능
// 멀티라인
let html = `
<tr>
<td>100</td>
</tr>
`;화살표 함수 (Arrow Function)
- 익명 함수를 간결하게 표현 — ES6
// 축약 단계
const f = function() { console.log('f'); }; // 기존
const f = () => { console.log('f'); }; // 화살표
const f = () => console.log('f'); // 구현부 1줄
// 매개변수
const f6 = (num) => console.log(num);
const f7 = num => console.log(num); // 매개변수 1개 → 괄호 생략
const f8 = (a, b) => console.log(a + b);
// 반환값
const f9 = () => { return 100; };
const f10 = () => 100; // return 생략⚠️ 화살표 함수 내 this → 무조건 window 객체 (이벤트 핸들러에서 주의)
배열 고차 함수
- Java Stream과 유사
| 메서드 | 설명 | 함수형 인터페이스 |
|---|---|---|
| forEach(item => {}) | 각 요소 순회 | Consumer |
| map(item => 변환) | 가공/변환 → 새 배열 반환 | Function |
| filter(item => 조건) | 조건 만족 요소만 → 새 배열 반환 | Predicate |
| find(item => 조건) | 조건 만족 첫 번째 요소 반환 | Predicate |
list.forEach((item, index) => console.log(item, index));
list.map(item => item.length); // 글자 수 배열
list.filter(item => item.length >= 3); // 3글자 이상만
list.find(item => item.length >= 3); // 첫 번째 3글자 이상이벤트 버블링 / 캡처링
이벤트 전파 3단계
-
캡처링 — document → 자식 (하향) ← addEventListener 3번째 인자 true
-
타깃 — 실제 이벤트 발생 요소
-
버블링 — 자식 → document (상향) ← JS 기본 동작
// 버블링 (기본) — 나 → 아버지 → 할아버지 순으로 실행
p1.addEventListener('click', function() { alert('할아버지'); });
p2.addEventListener('click', function() { alert('아버지'); });
p3.addEventListener('click', function() { alert('나'); });
// 캡처링 — 할아버지 → 아버지 → 나 순으로 실행
p1.addEventListener('click', function() { alert('할아버지'); }, true);
p2.addEventListener('click', function() { alert('아버지'); }, true);
p3.addEventListener('click', function() { alert('나'); }, true);
// 전파 중단 — 더 이상 상위/하위로 전파되지 않음
p3.addEventListener('click', function() {
alert('나');
event.stopPropagation(); // 표준
// event.cancelBubble = true; // 비표준(MS)
});event.target vs event.currentTarget
| 구분 | 의미 |
|---|---|
| event.target | 실제 클릭된 가장 안쪽 요소 |
| event.currentTarget | 핸들러가 등록된 요소 ← 권장 |
