지난 시간에 이어서 자바스크립트의 기본적인 내용을 마저 정리해 볼게요.
제어 흐름 (Flow Control)
조건문, 반복문, continue , break 등 코드의 실행 흐름을 제어하는 방법들이에요.
조건문을 작성할 때는 중첩된 조건문보다는 보호 구문(guard clauses) 형태로 구현하는 것이 가독성을 높이는 데 도움이 돼요.
// 중첩 조건문 (지양)
if (조건문) {
return 1;
} else {
if (조건문2) {
return 2;
}
}
return 3;
// 보호 구문 (권장)
if (조건문) return 1;
if (조건문2) return 2;
return 3;표현식(Expression)과 문(Statement)
표현식은 어떤 값으로 평가될 수 있는 유효한 코드 단위를 말해요.
문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이며, 조건문, 선언문, 반복문, 할당문 등이 여기에 속해요.
자바스크립트의 조건문 등에서 항상 false 로 평가되는 값들이 정해져 있어요. false , undefined , null , 0 , NaN , "" (빈 문자열)이 이에 해당해요.
예외 처리
예외는 프로그램 실행 중 발생하는 의도하지 않은 상황을 의미해요. 자바스크립트 기본 에러(ECMAScript Error)나 브라우저 API 관련 에러(DOMException) 등 다양한 예외 상황이 존재해요.
이러한 예외 상황은 개발자가 throw 문을 통해 에러를 직접 던지고, try...catch 문으로 핸들링할 수 있어요.
모든 상황에 예외 처리를 하는 것은 비효율적이므로, 외부 모듈을 사용하거나 네트워크 에러가 발생하는 경우 등 예측하기 어려운 상황 위주로 대비하는 것이 좋아요.
객체 (Object)
자바스크립트에서 객체를 생성하는 방법은 리터럴, 생성자 함수, Object.create 등 여러 가지가 있어요.
// 리터럴 방식
const obj = { key: 1 };
// 생성자 함수 방식
function Student(name, id) {
this.name = name;
this.id = id;
}
const student1 = new Student('nulzi', 1);
// Object.create 방식
const animal = Object.create({ type: 'Tiger' });객체의 속성을 추가하거나 나열, 삭제하는 것도 가능해요. 속성을 나열할 때는 Object.keys() 나 for...in 반복문 등을 활용할 수 있어요.
객체를 복사할 때는 얕은 복사와 깊은 복사의 차이를 구분해야 해요.
얕은 복사는 내부 속성 중 하나라도 같은 참조를 공유하는 방식이고,
깊은 복사는 모든 참조 관계를 끊어내어 완전히 독립적인 객체를 만드는 방식을 의미해요.
배열 또한 객체의 일종이에요. 배열에 숫자 인덱스가 아닌 문자열 키로 값을 저장할 수도 있지만, 이는 배열의 요소가 아닌 객체의 속성으로 취급되어 배열의 길이에 영향을 주지 않아요. 반대로 배열의 length 속성 값을 임의로 줄이면 배열의 내용을 강제로 자를 수 있어요.
const arr =[1, 2, 3];
arr.length = 1;
console.log(arr); //[1]프로토타입 (Prototype)
자바스크립트는 프로토타입 기반의 객체지향 언어예요. 부모 객체의 역할을 프로토타입이 대신한다고 볼 수 있어요.
생성자 함수를 만들어 new 키워드로 인스턴스를 생성하면, 해당 인스턴스의 부모 객체는 생성자함수.prototype 이 돼요.
특정 객체의 속성을 참조할 때 해당 객체에 속성이 없다면, 최상위 부모 객체까지 거슬러 올라가며 속성을 찾는 과정을 프로토타입 체인(Prototype Chain)이라고 불러요.
클래스 (Class)
클래스는 ES6 이후에 도입된 문법이에요. 내부적으로는 프로토타입을 기반으로 동작하지만, 클래스 기반 언어에 익숙한 개발자를 위해 추가되었어요.
extends 키워드로 상속을 구현할 수 있고, 자식 클래스에서 부모 클래스의 속성이나 메서드에 접근할 때는 super 키워드를 사용해요.
class Animal {
constructor(type) {
this.type = type;
}
}
class Tiger extends Animal {
constructor(name) {
super('tiger');
this.name = name;
}
growl() {
console.log(this.type + this.name);
}
}자바스크립트 컨텍스트 (Context)
this 는 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정되는 키워드예요. 일반 함수는 호출 방식(전역, 객체 메서드, 생성자 함수 등)에 따라 this 가 달라지지만, 화살표 함수는 this 바인딩을 제공하지 않아 항상 상위 스코프의 this 를 참조해요.
스코프(Scope)는 변수가 유효성을 가지는 범위를 뜻해요. 자바스크립트는 호출 위치가 아닌 선언 위치에 따라 스코프가 결정되는 정적 스코프(렉시컬 스코프) 규칙을 따르고 있어요.
코드가 실행될 때는 실행 컨텍스트가 생성되고, 이는 콜 스택(Call Stack)이라는 후입선출(LIFO) 형태의 구조에서 관리돼요.
마지막으로 클로저(Closure)는 외부 함수가 종료되었음에도 내부 함수가 외부 함수의 변수를 참조하여 해당 환경에 계속 접근할 수 있는 상태를 의미해요. 이를 활용하면 상태를 안전하게 유지하거나 코드를 은닉화할 수 있어요.
function test() {
const a = 1;
return function() {
return a;
}
}
const closure = test();
console.log(closure()); // 1