📘 15.2.3 모두가 함께 쓰는 특별한 기능들 - 정적 메서드
여러분, 안녕하세요. 지금까지 우리는 각 학생이 개별적으로 가지는 정보와 기능들을 배워왔습니다. 이번 시간에는 특별한 종류의 기능에 대해 배워보겠습니다. 바로 개별 학생에 속하지 않고, 클래스 전체에서 공통으로 사용할 수 있는 공통 기능들입니다.
마치 학교에서 모든 학생이 함께 사용하는 공통 도구들이 있는 것처럼, 프로그래밍에서도 학생을 만들지 않고도 바로 사용할 수 있는 편리한 기능들이 있어요.
🧠 새로운 단어들과 친해지기
공통 기능을 이해하기 위해 몇 가지 중요한 단어들을 쉽게 풀어서 알아보겠습니다.
| 단어 | 쉬운 설명 |
|---|---|
| 공통 기능 | 클래스 자체에 속하며 학생을 만들지 않고도 사용할 수 있는 기능이에요 |
| static | 공통 기능을 만들 때 사용하는 특별한 표시예요 |
| 도우미 기능 | 여러 곳에서 유용하게 사용하는 편리한 기능이에요 |
| 전체 범위 | 개별 학생이 아닌 클래스 전체에 관련된 것이에요 |
static은 "고정된", "정적인"이라는 뜻을 가진 영어 단어입니다. 공통 기능은 특정 학생에 속하지 않고 클래스에 고정되어 있어서 언제든 바로 사용할 수 있는 기능이라는 의미입니다.
✨ 공통 기능의 핵심 개념
공통 기능은 자바스크립트 클래스에서 공용 도구상자 역할을 하는 특별한 기능입니다. 지금까지 배운 개별 기능이 각 학생의 개인 도구였다면, 공통 기능은 모든 사람이 함께 사용할 수 있는 공용 도구인 셈이죠.
가장 큰 특징은 학생을 만들지 않고도 바로 사용할 수 있다는 점입니다. 클래스이름.기능이름() 형태로 클래스에서 직접 사용하며, static 표시를 사용해서 만듭니다. 또한 공통 기능 안에서는 this를 사용할 수 없습니다. 왜냐하면 특정 학생과 연결되지 않기 때문이죠.
공통 기능은 주로 편의 기능이나 클래스와 관련된 일반적인 작업에 사용됩니다. 예를 들어 수학 계산, 문자열 처리, 학생 만들기 도우미 같은 기능들이 여기에 해당합니다.
재미있는 비유: 학교 과학실의 공용 도구
공통 기능을 더 쉽게 이해하기 위해 '학교 과학실의 도구들'에 비유해볼게요.
과학실에는 두 종류의 도구가 있습니다. 첫 번째는 개인 도구들이에요. 각 학생의 실험 노트, 개인 보고서, 개별 실험 결과 같은 것들이죠. 이것들은 각 학생만이 사용할 수 있고, 학생마다 내용이 다릅니다.
두 번째는 공용 도구들입니다. 온도계, 저울, 계산기, 시계 등이 여기에 해당해요. 이런 도구들은 특정 학생 소유가 아니라 모든 학생이 필요할 때 사용할 수 있습니다. 또한 누가 사용하든 같은 기능을 제공하죠.
공통 기능도 마찬가지입니다. 개별 학생의 것이 아니라 모든 곳에서 공통으로 사용할 수 있는 유용한 기능을 제공하는 클래스의 공용 도구인 것입니다.
🎯 공통 기능을 사용하는 이유
그렇다면 우리는 왜 공통 기능을 사용할까요? 여러 중요한 이유들이 있습니다.
첫째로 편의성과 효율성입니다. 학생을 만들지 않고도 바로 사용할 수 있어서 간단한 편의 기능에 매우 적합합니다. 예를 들어 두 수 중 큰 값을 찾거나, 문자열을 뒤집는 등의 작업을 할 때 굳이 학생을 만들 필요가 없어요.
둘째로 코드의 정리가 잘 됩니다. 관련된 편의 기능들을 클래스 안에 공통 기능으로 모아두면 코드를 더 정리된 방식으로 관리할 수 있습니다. 마치 도구상자에 도구들을 종류별로 정리해두는 것과 같아요.
셋째로 학생 만들기 도우미 역할을 할 수 있습니다. 복잡한 학생을 만들 때 도움이 되는 특별한 만들기 기능들을 제공할 수 있어서 학생 사용이 더욱 편리해집니다.
⚙️ 기본 사용법 살펴보기
공통 기능의 기본 사용법은 일반 기능과 비슷하지만 static 표시가 앞에 붙는다는 점이 다릅니다.
class 클래스이름 {
constructor() {
// 개별 학생 정보들
}
// 개별 학생 기능
개별기능() {
// this 사용 가능
}
// 공통 기능
static 공통기능() {
// this 사용 불가
// 클래스와 관련된 일반적인 작업
}
}
// 사용법
let 내학생 = new 클래스이름();
내학생.개별기능(); // 개별 기능 사용
클래스이름.공통기능(); // 공통 기능 사용 (학생 없이)공통 기능의 특징:
static표시로 만들기클래스이름.기능이름()형태로 사용- 학생 만들기 없이 사용 가능
this사용 불가 (특정 학생과 연결되지 않음)- 전체적인 편의 기능 제공
🧪 직접 해보면서 배우기
이제 실제 예시를 통해 공통 기능이 어떻게 동작하는지 자세히 알아보겠습니다.
🔹 첫 번째 예시: 기본적인 수학 도구 만들기
첫 번째로는 간단한 수학 계산을 도와주는 공통 기능들을 만들어보겠습니다.
// 수학 도우미 클래스
class MathHelper {
// 공통 기능: 두 수 중 큰 값 찾기
static getMax(a, b) {
if (a > b) {
return a; // a가 b보다 크면 a를 돌려줘요
} else {
return b; // 아니면 b를 돌려줘요
}
}
// 공통 기능: 숫자가 짝수인지 확인하기
static isEven(number) {
return number % 2 === 0; // 2로 나눈 나머지가 0이면 짝수예요
}
// 공통 기능: 원의 넓이 계산하기
static getCircleArea(radius) {
return 3.14 * radius * radius; // 반지름 × 반지름 × 3.14
}
}
// 학생을 만들지 않고 바로 사용해요!
console.log("5와 8 중 큰 수:", MathHelper.getMax(5, 8)); // 8
console.log("10이 짝수인가요?", MathHelper.isEven(10)); // true
console.log("반지름 3인 원의 넓이:", MathHelper.getCircleArea(3)); // 28.26이 과정을 차근차근 살펴보면, 먼저 MathHelper 클래스를 만들고 그 안에 여러 공통 기능을 만듭니다. 각 기능 앞에 static 표시를 붙여서 공통 기능임을 표시하죠. 그다음 학생을 만들지 않고 클래스 이름으로 직접 기능을 사용하여 결과를 확인합니다.
🔹 두 번째 예시: 공통 기능과 개별 기능 함께 사용하기
이번에는 하나의 클래스에서 공통 기능과 개별 기능을 함께 사용하는 방법을 알아보겠습니다.
// 학생 클래스 (개별 기능 + 공통 기능)
class Student {
constructor(name, grade) {
this.name = name; // 이름 저장하기
this.grade = grade; // 학년 저장하기
this.scores = []; // 점수들을 담을 배열 만들기
}
// 개별 기능: 특정 학생의 점수 추가
addScore(score) {
this.scores.push(score); // 자신의 점수 배열에 점수 넣기
console.log(this.name + " 점수 추가: " + score);
}
// 공통 기능: 점수를 학점으로 바꾸기 (일반적인 기능)
static getGrade(score) {
if (score >= 90) return "A"; // 90점 이상이면 A
if (score >= 80) return "B"; // 80점 이상이면 B
if (score >= 70) return "C"; // 70점 이상이면 C
return "D"; // 나머지는 D
}
// 공통 기능: 이름이 올바른지 확인하기 (일반적인 검사)
static isValidName(name) {
if (name && name.length >= 2 && name.length <= 10) {
return true; // 이름이 있고 2-10글자이면 참
} else {
return false; // 아니면 거짓
}
}
}
// 개별 학생 관리하기 (개별 기능)
let student1 = new Student("철수", 4); // 철수 학생 만들기
student1.addScore(85); // 철수에게 85점 주기
// 일반적인 기능 사용하기 (공통 기능)
console.log("85점의 학점:", Student.getGrade(85)); // "B"
console.log("'김'은 올바른 이름?", Student.isValidName("김")); // false이 예시를 통해 우리는 개별 기능과 공통 기능의 역할 차이를 명확히 볼 수 있습니다. 개별 기능은 특정 학생의 개별 정보를 다루고, 공통 기능은 학생과 관련된 일반적인 계산이나 검증 기능을 제공합니다.
🔹 세 번째 예시: 공통 기능으로 학생 만들기 도우미 만들기
마지막으로는 공통 기능을 사용해서 학생을 더 쉽게 만들 수 있는 도우미 기능들을 만들어보겠습니다.
// 색깔 클래스
class Color {
constructor(red, green, blue) {
this.red = red; // 빨간색 값 저장하기
this.green = green; // 초록색 값 저장하기
this.blue = blue; // 파란색 값 저장하기
}
// 개별 기능: 색깔 정보 글자로 만들기
toString() {
return "RGB(" + this.red + ", " + this.green + ", " + this.blue + ")"; // "RGB(빨강, 초록, 파랑)" 형태로 만들기
}
// 공통 기능: 빨간색 만들기 (도우미)
static red() {
return new Color(255, 0, 0); // 빨간색 색깔 만들어서 돌려주기
}
// 공통 기능: 파란색 만들기 (도우미)
static blue() {
return new Color(0, 0, 255); // 파란색 색깔 만들어서 돌려주기
}
// 공통 기능: 간단한 색깔 만들기 (도우미)
static simple(colorName) {
if (colorName === "red") {
return new Color(255, 0, 0); // 빨간색
} else if (colorName === "green") {
return new Color(0, 255, 0); // 초록색
} else if (colorName === "blue") {
return new Color(0, 0, 255); // 파란색
} else {
return new Color(0, 0, 0); // 검은색 (기본값)
}
}
}
// 일반적인 방법
let myColor = new Color(100, 150, 200); // 직접 RGB 값으로 색깔 만들기
console.log("내 색깔:", myColor.toString());
// 공통 기능으로 쉽게 만들기
let redColor = Color.red(); // 빨간색 쉽게 만들기
let blueColor = Color.blue(); // 파란색 쉽게 만들기
let greenColor = Color.simple("green"); // 초록색 쉽게 만들기
console.log("빨간색:", redColor.toString()); // RGB(255, 0, 0)
console.log("파란색:", blueColor.toString()); // RGB(0, 0, 255)
console.log("초록색:", greenColor.toString()); // RGB(0, 255, 0)이 예시에서는 공통 기능이 복잡한 색깔 만들기 과정을 간단하게 만들어주는 모습을 볼 수 있습니다. Color.red()처럼 의미 있는 이름의 기능으로 자주 사용되는 색깔들을 쉽게 만들 수 있어요.
🔄 공통 기능 사용 순서 정리하기
지금까지 배운 공통 기능 사용 과정을 차근차근 정리해보겠습니다.
첫 번째 단계는 공통 기능 만들기입니다. 클래스 안에서 static 표시를 사용해서 특정 학생과 연결되지 않는 일반적인 기능을 만듭니다. 두 번째 단계로는 클래스이름으로 직접 사용하기입니다. 학생을 만들지 않고 클래스이름.기능이름() 형태로 바로 사용합니다.
세 번째 단계는 작업 수행하기입니다. 받은 정보를 가지고 일반적인 계산이나 처리 작업을 수행하죠. 네 번째 단계로는 결과 돌려주기입니다. 처리된 결과를 사용한 곳으로 돌려줍니다. 마지막으로 다섯 번째 단계는 활용하기에서 돌려받은 결과를 다른 곳에서 사용합니다.
🧚♀️ 이야기로 다시 배우기: 학교의 공용 도구
지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?
학생들의 학교에 특별한 도구상자가 있었습니다. 이 도구상자는 개인 소유가 아니라 모든 학생이 공용으로 사용할 수 있는 신기한 상자였어요.
상자 안에는 "온도 측정 도구", "무게 재는 저울", "시간 확인 시계" 등 유용한 도구들이 들어있었습니다. 특별한 점은 이 도구들을 사용하기 위해 개인 가방을 꺼낼 필요가 없다는 것이었어요.
학생들은 "도구상자.온도측정()", "도구상자.무게재기()" 같은 방법으로 바로 도구를 사용할 수 있었습니다. 매번 개인 가방을 만들고 꺼내는 번거로움 없이 말이죠.
이처럼 공통 기능도 클래스라는 도구상자에 들어있는 공용 도구들과 같습니다. 개별 학생을 만들지 않고도 언제든 유용한 기능들을 사용할 수 있는 것이죠.
🧠 자주 하는 실수와 주의할 점
공통 기능을 사용할 때 자주 발생하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있어요.
❌ 실수 1: 공통 기능에서 this 사용하기
class WrongExample {
constructor(name) {
this.name = name; // 이름 저장하기
}
// 잘못된 공통 기능 - this 사용
static wrongMethod() {
console.log(this.name); // 에러! 공통 기능에서 this 사용 불가
}
// 올바른 공통 기능 - 받은 정보 사용
static correctMethod(name) {
console.log(name); // 정상 작동
}
}
// WrongExample.wrongMethod(); // 에러가 날 거예요
WrongExample.correctMethod("철수"); // 정상 작동이런 실수가 발생하는 이유는 공통 기능이 특정 학생과 연결되지 않기 때문입니다. this는 "현재 이 기능을 사용한 학생"을 가리키는데, 공통 기능은 학생 없이 클래스에서 직접 사용되므로 this가 가리킬 대상이 없어요.
❌ 실수 2: 학생에서 공통 기능 사용하기
class Calculator {
static add(a, b) {
return a + b; // 두 수를 더해서 돌려주기
}
}
let calc = new Calculator(); // 계산기 학생 만들기
// 올바른 방법 - 클래스이름으로 사용
console.log("정답:", Calculator.add(5, 3)); // 8
// 잘못된 방법 - 학생으로 사용
console.log("에러:", calc.add(5, 3)); // undefined (작동하지 않아요)이 문제가 발생하는 이유는 공통 기능이 클래스에 속하므로 반드시 클래스이름으로 사용해야 하기 때문입니다. 학생으로는 접근할 수 없어요.
❌ 실수 3: 공통 기능과 개별 기능 역할 혼동하기
class Student {
constructor(name) {
this.name = name; // 이름 저장하기
this.scores = []; // 점수들을 담을 배열 만들기
}
// 개별 기능 - 특정 학생의 점수 추가 (올바름)
addScore(score) {
this.scores.push(score); // 자신의 점수 배열에 점수 넣기
}
// 공통 기능 - 일반적인 학점 계산 (올바름)
static calculateGrade(score) {
if (score >= 90) return "A"; // 90점 이상이면 A 돌려주기
return "B"; // 나머지는 B 돌려주기
}
// 잘못된 설계 - 공통 기능에서 특정 학생 정보 접근 시도
static wrongGetAverage() {
// return this.scores.reduce(...); // 에러! this 사용 불가
console.log("공통 기능에서는 특정 학생 정보에 접근할 수 없어요");
}
}이런 실수를 피하려면 개별 기능은 특정 학생의 정보를 다루고, 공통 기능은 일반적인 편의 기능을 제공한다는 역할 구분을 명확히 이해해야 합니다.
연습문제 시작 전 잠깐, 생각해보니.
코드에도 공용과 개인이 있다는 게 참 흥미로워요. 우리 일상에서도 개인의 물건이 있고, 모두가 함께 쓰는 것들이 있잖아요. 버스 정류장의 의자, 공원의 벤치, 도서관의 책들처럼요. 그런 공용의 것들은 누구나 필요할 때 사용할 수 있지만, 동시에 누구의 것도 아니에요. 코드 속에서도 이런 자연스러운 구분이 있다는 게, 마치 작은 사회가 돌아가는 것 같아요.
✏️ 연습문제로 개념 다지기
이제 배운 내용을 연습문제를 통해 확실히 익혀보겠습니다.
Ex1) 문자열 처리 도구 클래스를 만들어보자
// 문자열 도우미 클래스를 만들고 다음 공통 기능들을 추가해보세요:
// 1. 문자열 뒤집기
// 2. 첫 글자 대문자로 만들기
// 3. 단어 개수 세기
class StringHelper {
// 공통 기능: 문자열 뒤집기
static reverse(str) {
let result = "";
for (let i = str.length - 1; i >= 0; i--) {
result = result + str[i]; // 뒤에서부터 글자 하나씩 더하기
}
return result;
}
// 공통 기능: 첫 글자 대문자로 만들기
static capitalize(str) {
if (str.length === 0) return str; // 빈 문자열이면 그대로 돌려주기
let firstChar = str[0]; // 첫 번째 글자 가져오기
let restChars = ""; // 나머지 글자들을 담을 곳
for (let i = 1; i < str.length; i++) {
restChars = restChars + str[i]; // 나머지 글자들 모으기
}
return firstChar.toUpperCase() + restChars.toLowerCase(); // 첫 글자 대문자 + 나머지 소문자
}
// 공통 기능: 단어 개수 세기
static countWords(str) {
if (str.length === 0) return 0; // 빈 문자열이면 0개
let count = 0;
let inWord = false; // 현재 단어 안에 있는지 확인
for (let i = 0; i < str.length; i++) {
if (str[i] !== " ") { // 공백이 아니면
if (!inWord) { // 새로운 단어 시작
count++;
inWord = true;
}
} else { // 공백이면
inWord = false; // 단어 끝
}
}
return count;
}
}
// 사용해보기
console.log("뒤집기:", StringHelper.reverse("hello")); // "olleh"
console.log("대문자:", StringHelper.capitalize("javascript")); // "Javascript"
console.log("단어 개수:", StringHelper.countWords("안녕 자바스크립트")); // 2이 연습을 통해 공통 기능으로 편의 기능을 만드는 방법을 익힐 수 있습니다.
Ex2) 개별 기능과 공통 기능을 함께 사용하는 원 클래스를 만들어보자
class Circle {
constructor(radius) {
this.radius = radius; // 반지름 저장하기
}
// 개별 기능: 이 원의 넓이 구하기
getArea() {
return Circle.PI * this.radius * this.radius; // 공통 기능 PI 사용하기
}
// 공통 속성: 파이 상수
static PI = 3.14159;
// 공통 기능: 반지름으로 넓이 계산하기 (일반적인 계산)
static calculateArea(radius) {
return Circle.PI * radius * radius; // 파이 × 반지름 × 반지름
}
// 공통 기능: 두 원 중 큰 것 돌려주기
static getLarger(circle1, circle2) {
if (circle1.getArea() > circle2.getArea()) {
return circle1; // circle1이 더 크면 circle1 돌려주기
} else {
return circle2; // 아니면 circle2 돌려주기
}
}
}
// 사용해보기
let circle1 = new Circle(3); // 반지름 3인 원 만들기
let circle2 = new Circle(5); // 반지름 5인 원 만들기
console.log("원1 넓이:", circle1.getArea().toFixed(2)); // 개별 기능 사용
console.log("반지름4 넓이:", Circle.calculateArea(4).toFixed(2)); // 공통 기능 사용
console.log("더 큰 원의 반지름:", Circle.getLarger(circle1, circle2).radius); // 공통 기능으로 비교이 문제는 공통 기능과 개별 기능의 차이점과 각각의 활용법을 이해하는 데 도움이 됩니다.
🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 공통 기능에 대한 이해를 확인해보겠습니다.
Q1. 공통 기능과 개별 기능의 차이점을 3가지 설명해보세요.
정답:
- 사용 방법: 공통 기능은 클래스이름으로 사용하지만 개별 기능은 학생으로 사용합니다.
- this 사용: 공통 기능은 this를 사용할 수 없지만 개별 기능은 this로 학생 정보에 접근할 수 있습니다.
- 학생 만들기: 공통 기능은 학생 만들기 없이 사용 가능하지만 개별 기능은 반드시 학생을 만든 후에 사용할 수 있습니다.
Q2. 언제 공통 기능을 사용하고 언제 개별 기능을 사용하는지 설명해보세요.
정답: 공통 기능은 특정 학생의 정보와 관련 없는 일반적인 편의 기능이나 계산을 할 때 사용하고, 개별 기능은 특정 학생의 정보를 사용하거나 바꿔야 할 때 사용합니다. 간단히 말하면 "개별 학생의 상태"가 필요하면 개별 기능을, "일반적인 도구 기능"이면 공통 기능을 사용해요.
📚 15단원 앞부분 복습: 클래스와 인스턴스
공통 기능을 배우기 전에 15단원 앞부분에서 배운 클래스와 인스턴스를 복습해보겠습니다.
복습 문제 1: 기본 클래스 만들고 사용하기
// 자동차 클래스를 만들고 인스턴스를 생성해보세요
class Car {
constructor(brand, model) {
this.brand = brand; // 브랜드 저장하기
this.model = model; // 모델 저장하기
this.speed = 0; // 속도를 0으로 시작하기
}
// 가속 메서드
accelerate() {
this.speed = this.speed + 10; // 속도 10 증가
console.log(this.brand + " " + this.model + " 속도: " + this.speed + "km/h");
}
}
// 인스턴스 생성하고 사용하기
let myCar = new Car("현대", "소나타");
myCar.accelerate(); // 현대 소나타 속도: 10km/h복습 문제 2: constructor와 메서드의 관계 이해하기
// 학생 클래스를 만들고 여러 메서드를 추가해보세요
class Student {
constructor(name, grade) {
this.name = name; // 이름 저장하기
this.grade = grade; // 학년 저장하기
this.subjects = []; // 과목 배열 만들기
}
addSubject(subject) {
this.subjects.push(subject); // 과목 추가하기
console.log(this.name + ": " + subject + " 과목 추가됨");
}
getSubjectCount() {
return this.subjects.length; // 과목 개수 돌려주기
}
}
let student = new Student("철수", 4);
student.addSubject("수학");
student.addSubject("국어");
console.log("과목 개수:", student.getSubjectCount()); // 2
// 정답 설명: constructor는 인스턴스를 만들 때 초기값을 설정하고,
// 메서드는 그 인스턴스의 데이터를 사용하고 조작하는 기능을 제공합니다.지금까지 공통 기능의 모든 특성과 활용법을 자세히 알아보았습니다. 공통 기능은 클래스의 공용 도구상자 역할을 하며, 학생 만들기 없이도 유용한 기능들을 제공하는 현대 자바스크립트의 중요한 특징 중 하나입니다.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 공통 기능(static method)의 개념 | ✅ |
| static 키워드 사용법 | ✅ |
| 공통 기능과 개별 기능의 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
📂 마무리 정보
오늘 배운 15.2.3 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'15. 클래스로 틀 만들기 (클래스) > 15.2 인스턴스 생성하기' 카테고리의 다른 글
| 15.2.2 인스턴스 속성과 메서드 - 각 객체의 개인 정보와 특별한 능력들 (0) | 2025.07.22 |
|---|---|
| 15.2.1 `new` - 클래스 설계도로 진짜 물건 만들기 (0) | 2025.07.22 |