🚀 함수
1️⃣ 함수 선억식
function 키워드를 사용하여 함수 정의- 호이스팅 ✅, 정의되기 전 호출 가능
1
2
3
4
| function 함수이름(매개변수){
//
return 반한값;
}
|
2️⃣ 함수 표현식
- 변수에 익명 함수나 기명함수를 할당하는 방식으로 정의
- 호이스팅 ❎, 정의된 후에만 호출 가능
1
2
3
4
| const 함수이름 = function(매개변수) {
//
return 반한값;
}
|
✔️ 익명 함수 ? 이름 없는 함수, 주로 콜백 함수로 사용
1
2
3
| const 익명함수 = function() {
//
};
|
✔️ 기명 함수 ? 이름 있는 함수, 스택 트레이스에서 함수 이름 확인 가능
1
2
3
| const 기명함수 = function() 함수이름() {
//
};
|
3️⃣ 화살표 함수
=> 문법 사용해 간결하게 함수 정의 가능this 바인딩이 정적으로 결정arguments 객체 사용 불가- 생성자 함수로 사용 불가
- 메소드로 사용 불가
1
2
3
4
5
6
| const 함수이름 = (매개변수) => {
//
return 반환값;
}
const 함수이름 = 매개변수 => 반한값;
|
🚀 호이스팅
자바스크립트에서 함수나 변수가 선언된 위치와 상관없이 코드가 실행되기 전에 해당 선언이 최상단으로 끌어올려지는 동작을 의미
1️⃣ 변수 호이스팅
- 변수는 선언 부분만 호이스팅 ✅, 할당 부분은 호이스팅 ❎
1
2
3
| console.log(test); // undefined
var test = 'Hi';
console.log(test); // 'Hi'
|
let과 const는 TDZ(Temporal Dead Zone)로 인해 선언 전에 참조 불가 ❗️
(let과 const로 선언된 변수는 코드가 실행되기 전에 선언이 메모리에 등록이되지만 접근이 불가하다)
1
2
3
4
5
6
7
| console.log(myLetVar); // ReferenceError: myLetVar is not defined
let myLetVar = 'Hello';
console.log(myLetVar); // 'Hello'
console.log(myConstVar); // ReferenceError: myConstVar is not defined
const myConstVar = 'Hello';
console.log(myConstVar); // 'Hello'
|
2️⃣ 함수 호이스팅
- 함수 선언식은 전체가 호이스팅 ✅
- 함수 표현식, 화살표 함수는 함수 선언 부분만 호이스팅 ✅, 함수 할당 부분 호이스팅 ❎
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!-- 함수 선언식 -->
myHoisting(); // 'Hi'
function myHoisting() {
console.log('Hi');
}
<!-- 함수 표현식 -->
myHoisting(); // TypeError : myHoisting is not a function
var myHoisting = function() {
console.log('Hi');
}
<!-- 화살표 함수 -->
myHoisting(); // TypeError : myHoisting is not a function
const MyHoisting = () => {
console.log('Hi');
}
|
🚀 컨텍스트
실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 제공하는 객체
1️⃣ 실행 컨텍스트 생성 및 실행
- 환경 레코드(Environment Record) : 실행 컨텍스트가 생성될 때 변수, 함수 선언, 매개 변수 등의 정보를 기록하는 객체
- 생성 단계 : 현재 컨텍스트의 선언문을 환경 레코드에 기록
- 완성된 기록 :
var 키워드로 선언된 변수와 함수 선언은 초기화 전에도 참조 가능
- 미완성된 기록 :
let과 const로 선언된 변수는 TDZ로 인해 초기화 완료되기 전까지 참조 불가
- 실행 단계 : 생성 단계에서 기록된 환경 레코드를 참조해서 코드를 실행하거나 업데이트
2️⃣ 렉시컬 스코프(Lexical Scope)
- 자바스크립트에서 변수의 유효 범위는 렉시컬 스코프를 따름
- 즉, 함수가 선언된 위치에 따라 상위 스코프가 결정되며, 이는 함수가 호출될 때가 아니라 정의될 때 결정
- 함수 내부의 변수는 해당 함수가 정의된 위치에 따라 상위 스코프를 참조 ❗️
1
2
3
4
5
6
7
8
9
10
11
12
| var globalVar = 'gloabal';
function outer() {
var outerVar = 'outer';
function inner() {
var innerVar = 'inner';
console.log(globalVar); // 'global'
console.log(outerVar); // 'outer'
console.log(innerVar); // 'inner'
}
}
|
- inner 함수는 outer 함수의 스코프 체인 내에 있어서 outer 함수와 전역 스코프의 변수에 접근 가능
- inner 함수는 globalVar와 outerVar에 접근할 수 있으며, 이것을 렉시컬 스코프라고 한다.
3️⃣ Outer
- 외부 렉시컬 스코프를 참조하는 객체, 함수나 블록 내에서 선언된 변수들이 상위 스코프의 변수를 참조할 수 있게 해줌
- 모든 함수가 생성될 때 자신의 외부 렉시컬 환경을 기억하는데, 이 외부 렉시컬 환경을 통해 함수는 자신이 정의된 위치의 상위 스코프에 접근 가능
1
2
3
4
5
6
7
8
9
10
11
12
| function outer() {
var outerVar = 'Here Outer';
function inner() {
console.log(outerVar); // 'Here Outer'
}
return inner;
}
const innerFunc = outer();
innerFunc();
|
- inner 함수는 outer 함수 내부의 정의되어있어서 outer 함수의 외부 렉시컬 스코프에 접근 가능
- JS의 클로저 특성에 의해 outer 함수가 실행 컨텍스트 종료 후에도 outer 함수의 outerVar에 접근 할 수 있음
🚀 객체
객체는 자바스크립트에서 데이터와 기능을 키-값 쌍의 형태로 구성된 여러 개의 속성을 저장하는 데이터 구조
특징
- 객체는 키(key)와 값(value)로 이루어진 속성(properties)을 가짐
- 객체는 동적으로 속성을 추가 및 삭제 가능
- 객체는 다른 객체를 속성으로 가질 수 있음
- 객체는 함수를 속성으로 가질 수 있음 ➡️ 메서드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| let person = {
name: "Jude Bellingham",
age: "22",
team: {
country: "spain",
club: "Real-Madrid"
}
job: "Soccer Player",
introduce: function() {
console.log(person.name + "은 " + person.team.club + person.job + "이다.");
}
};
// 동적 속성 Control
person.height = "186cm" // 추가
delete person.age; // 삭제
// 중첩 객체 속성 접근
console.log(person.team.country); // Spain
console.log(person.team.club); // Real-Madrid
// 메서드 호출
person.introduce(); // Jude Bellingham은 Real-Madrid Soccer Player이다.
|
[참조]
MDN 공식 문서 - 호이스팅, 컨텍스트
JavaScript | MDN
JavaScript
developer.mozilla.org
한’s 개발 블로그 - 컨텍스트
https://hans-j.tistory.com/98
