get/set 활용 변수명 예시
getter와 setter는 자바스크립트 객체의 프로퍼티에 대한 접근을 제어하고, 데이터 처리 과정에서 다양한 로직을 추가할 수 있는 강력한 기능입니다. 이러한 getter와 setter를 효과적으로 활용하기 위해서는 명확하고 일관된 네이밍 규칙을 따르는 것이 중요합니다.
get/set 네이밍 규칙 예시
| getter | getName(), getAge(), getIsAdmin() | 해당 프로퍼티의 값을 가져올 때 사용하는 메서드입니다. 일반적으로 'get' 뒤에 명사를 붙여 사용합니다. |
| setter | setName(newName), setAge(newAge), setIsAdmin(newState) | 해당 프로퍼티의 값을 설정할 때 사용하는 메서드입니다. 일반적으로 'set' 뒤에 명사를 붙여 사용하며, 새로운 값을 나타내는 매개변수를 함께 사용합니다. |
다양한 예시 및 활용
- 단순 값 설정:
class Person { constructor(name, age) { this._name = name; this._age = age; } get name() { return this._name; } set name(newName) { this._name = newName } } - 값 변환:
class Temperature { constructor(celsius) { this._celsius = celsius; } get fahrenheit() { return this._celsius * 9 / 5 + 32; } } - 유효성 검사:
class Product { constructor(price) { this._price = price; } set price(newPrice) { if (newPrice < 0) { throw new Error('가격은 0보다 커야 합니다.'); } this._price = newPrice; } } - 연산된 값:
class Circle { constructor(radius) { this._radius = radius; } get area() { return Math.PI * this._radius * this._radius; } }
추가적인 고려 사항
- 일관성: 프로젝트 전체에서 일관된 네이밍 규칙을 사용합니다.
- 명확성: getter와 setter의 역할을 명확하게 나타내는 이름을 사용합니다.
- 동사와 명사 활용: getter는 명사, setter는 동사+명사 형태로 사용하는 것이 일반적입니다.
- private 변수: 실제 값을 저장하는 변수는 _ (언더바)로 시작하는 private 변수로 선언하는 것이 일반적입니다.
- 코딩 스타일 가이드: ESLint, Prettier 등의 도구를 사용하여 코드 스타일을 관리할 수 있습니다.
왜 getter/setter를 사용해야 할까요?
- 데이터 은닉: 객체 내부의 데이터를 직접 접근하지 못하도록 보호하여 예기치 않은 변경을 방지합니다.
- 유효성 검사: 데이터를 설정하기 전에 유효성을 검사하여 오류를 방지합니다.
- 계산된 속성: 복잡한 계산이 필요한 경우 getter를 사용하여 값을 동적으로 계산할 수 있습니다.
- 데이터 변환: getter를 사용하여 데이터를 다른 형식으로 변환할 수 있습니다.
init 구분자 활용 변수명 예시
**"init"**은 주로 변수나 객체를 초기화하는 목적으로 사용되는 접두사입니다. 즉, 특정 변수나 객체를 처음 설정하거나 초기값을 부여할 때 "init"을 사용하여 변수명을 짓는 경우가 많습니다.
init을 활용한 변수명 예시
- 전체 변수: initTotal, initPosition, initSettings
- 전체적인 값이나 상태를 초기화하는 변수에 사용됩니다.
- 배열: initArray, initList
- 배열을 초기화할 때 사용됩니다.
- 객체: initObject, initState
- 객체를 초기화할 때 사용됩니다.
- 특정 값: initValue, initCount
- 특정 값을 초기화할 때 사용됩니다.
사용 예시
// 초기화된 총합 변수
let initTotal = 0;
// 초기화된 위치 정보 객체
let initPosition = { x: 0, y: 0 };
// 초기화된 사용자 설정 객체
let initSettings = { theme: 'light', language: 'ko' };
// 초기화된 사용자 목록 배열
let initUsers = [];
init을 사용하는 이유
- 코드 가독성 향상: 변수의 목적을 명확하게 나타내어 코드를 이해하기 쉽게 합니다.
- 유지보수 용이: 코드를 수정하거나 확장할 때 변수의 용도를 쉽게 파악할 수 있습니다.
- 팀 협업 증진: 팀원들이 변수의 의미를 쉽게 공유하고 이해할 수 있습니다.
주의 사항
- 과도한 사용: 모든 변수에 "init"을 붙이는 것은 오히려 가독성을 떨어뜨릴 수 있습니다. 꼭 필요한 경우에만 사용하는 것이 좋습니다.
- 다른 접두사와의 조합: "init" 외에도 "default", "initial" 등의 접두사를 사용하여 더욱 구체적인 의미를 부여할 수 있습니다.
- 프로젝트 규칙: 프로젝트마다 고유한 네이밍 규칙이 있을 수 있으므로, 팀에서 정한 규칙을 따라야 합니다.
추가적인 예시
- 함수: initApp(), initDatabase(): 애플리케이션이나 데이터베이스를 초기화하는 함수
- 이벤트: onInitComplete: 초기화가 완료되었을 때 발생하는 이벤트
is / has / can을 활용한 변수명 예시
is, has, can과 같은 구분자는 특정 상태나 조건을 나타내는 변수명을 지을 때 매우 유용합니다. 이러한 구분자는 코드의 가독성을 높이고, 변수의 의미를 명확하게 전달하는 데 도움을 줍니다.
각 구분자의 의미와 활용 예시
- is:
- 의미: 특정 상태나 조건을 나타낼 때 사용합니다.
- 예시:
- isCompleted: 작업이 완료되었는지 여부
- isActive: 객체가 활성화 상태인지 여부
- isValid: 값이 유효한지 여부
- has:
- 의미: 특정 속성이나 값을 가지고 있는지 여부를 나타낼 때 사용합니다.
- 예시:
- hasError: 오류가 있는지 여부
- hasPermission: 권한이 있는지 여부
- hasChildren: 자식 요소가 있는지 여부
- can:
- 의미: 특정 작업을 수행할 수 있는 능력이나 권한이 있는지 여부를 나타낼 때 사용합니다.
- 예시:
- canEdit: 수정할 수 있는 권한이 있는지 여부
- canDelete: 삭제할 수 있는 권한이 있는지 여부
- canAccess: 접근할 수 있는 권한이 있는지 여부
사용 예시
// 상태 확인
const isLoggedIn = true;
const isActiveUser = false;
// 속성 확인
const hasProfilePicture = true;
const hasPendingRequests = false;
// 권한 확인
const canAdminister = true;
const canViewPrivateData = false;
추가적인 팁
- Boolean 타입에 적합: 이러한 구분자는 일반적으로 Boolean 타입의 변수에 사용됩니다.
- 문맥 고려: 변수가 사용되는 문맥에 따라 적절한 구분자를 선택해야 합니다.
- 일관성 유지: 프로젝트 전체에서 일관된 네이밍 규칙을 사용합니다.
create 구분자 활용 변수명 예시
**"create"**는 새로운 객체나 인스턴스를 생성하는 행위를 나타내는 단어로, 변수명에 사용될 때 생성된 객체를 의미합니다. 일반적으로 함수 이름이나 변수명에 사용되어 생성 작업과 관련된 코드임을 명확히 합니다.
create를 활용한 변수명 예시
- 함수:
- createAccount: 새로운 계정 생성 함수
- createElement: 새로운 HTML 요소 생성 함수
- createObject: 새로운 객체 생성 함수
- 변수:
- createdUser: 생성된 사용자 객체
- createdElement: 생성된 HTML 요소
- createdAt: 생성 시각
// 새로운 사용자 객체 생성
const createdUser = {
name: '홍길동',
email: 'hong@example.com'
};
// 새로운 HTML 버튼 생성
const createButton = document.createElement('button');
createButton.textContent = '클릭';
// 새로운 배열 생성
const createArray = [];
create를 사용하는 이유
- 코드 가독성 향상: 코드의 의도를 명확하게 전달하여 코드를 이해하기 쉽게 합니다.
- 유지보수 용이: 코드를 수정하거나 확장할 때 변수의 용도를 쉽게 파악할 수 있습니다.
- 팀 협업 증진: 팀원들이 변수의 의미를 쉽게 공유하고 이해할 수 있습니다.
추가적인 팁
- 동사와 결합: "create"와 함께 다른 동사를 사용하여 더욱 구체적인 의미를 부여할 수 있습니다. 예를 들어, "createNew", "createUnique" 등과 같이 사용할 수 있습니다.
- 명사와 결합: 생성되는 객체의 종류를 명확히 하기 위해 명사와 함께 사용할 수 있습니다. 예를 들어, "createAccount", "createProduct" 등과 같이 사용할 수 있습니다.
- 프로젝트 규칙: 프로젝트마다 고유한 네이밍 규칙이 있을 수 있으므로, 팀에서 정한 규칙을 따라야 합니다.
find 구분자 활용 변수명 예시
**"find"**는 특정 값이나 객체를 찾는 행위를 나타내는 단어로, 변수명에 사용될 때 찾은 결과를 의미합니다. 일반적으로 함수 이름이나 변수명에 사용되어 검색 작업과 관련된 코드임을 명확히 합니다.
find를 활용한 변수명 예시
- 함수:
- findUserById: 특정 ID를 가진 사용자 찾기 함수
- findElementByClass: 특정 클래스를 가진 HTML 요소 찾기 함수
- findMaxNumber: 배열에서 최댓값 찾기 함수
- 변수:
- foundUser: 찾은 사용자 객체
- foundElement: 찾은 HTML 요소
- foundIndex: 찾은 요소의 인덱스
// 사용자 목록에서 ID가 1인 사용자 찾기
const foundUser = users.find(user => user.id === 1);
// HTML 문서에서 id가 'myButton'인 버튼 요소 찾기
const foundButton = document.getElementById('myButton');
// 숫자 배열에서 최댓값 찾기
const numbers = [3, 7, 2, 9, 5];
const foundMax = numbers.reduce((max, num) => Math.max(max, num));
추가적인 팁
- 동사와 결합: "find"와 함께 다른 동사를 사용하여 더욱 구체적인 의미를 부여할 수 있습니다. 예를 들어, "findFirst", "findLast", "findNext" 등과 같이 사용할 수 있습니다.
- 명사와 결합: 찾는 대상을 명확히 하기 위해 명사와 함께 사용할 수 있습니다. 예를 들어, "findUser", "findProduct", "findElement" 등과 같이 사용할 수 있습니다.
- 조건과 결합: 찾는 조건을 명확히 하기 위해 조건과 함께 사용할 수 있습니다. 예를 들어, "findByName", "findByAge", "findByStatus" 등과 같이 사용할 수 있습니다.
to 구분자 활용 변수명 예시
**"to"**는 주로 변환이나 목적지를 나타낼 때 사용되는 구분자입니다. 변수명에 "to"를 사용하면 어떤 값이나 상태가 다른 형태나 상태로 변환될 것임을 명시적으로 나타낼 수 있습니다.
to를 활용한 변수명 예시
- 변환:
- numberToString: 숫자를 문자열로 변환한 결과
- arrayToObject: 배열을 객체로 변환한 결과
- pixelToInch: 픽셀 단위를 인치 단위로 변환한 값
- 목적지:
- pathToImage: 이미지 파일의 경로
- dataToChart: 차트에 사용될 데이터
- inputToOutput: 입력 값을 출력 값으로 변환한 결과
// 숫자를 문자열로 변환
const numberToString = 123 + '';
// 배열을 객체로 변환
const arrayToObject = ['name', 'age'].reduce((obj, key, index) => ({ ...obj, [key]: values[index] }), {});
// 픽셀을 인치로 변환
const pixelToInch = pixels / 96;
to를 사용하는 이유
- 코드 가독성 향상: 코드의 의도를 명확하게 전달하여 코드를 이해하기 쉽게 합니다.
- 유지보수 용이: 코드를 수정하거나 확장할 때 변수의 용도를 쉽게 파악할 수 있습니다.
- 팀 협업 증진: 팀원들이 변수의 의미를 쉽게 공유하고 이해할 수 있습니다.
추가적인 팁
- 동사와 결합: "to"와 함께 다른 동사를 사용하여 더욱 구체적인 의미를 부여할 수 있습니다. 예를 들어, "convertTo", "mapTo", "transformTo" 등과 같이 사용할 수 있습니다.
- 명사와 결합: 변환되는 대상과 목적지를 명확히 하기 위해 명사와 함께 사용할 수 있습니다. 예를 들어, "numberToBinary", "stringToNumber", "objectToArray" 등과 같이 사용할 수 있습니다.
- 프로젝트 규칙: 프로젝트마다 고유한 네이밍 규칙이 있을 수 있으므로, 팀에서 정한 규칙을 따라야 합니다.
on 구분자 활용 변수명 예시
**"on"**이라는 구분자는 주로 특정 이벤트 발생 시 또는 특정 상태가 될 때를 나타내는 변수명에 사용됩니다. 이는 마치 스위치가 켜지는 것처럼, 어떤 상태가 활성화되거나 이벤트가 발생했음을 의미합니다.
on을 활용한 변수명 예시
- 이벤트 발생:
- onClick: 클릭 이벤트 발생 여부
- onHover: 마우스 호버 이벤트 발생 여부
- onLoad: 페이지 로딩 완료 여부
- 상태 변화:
- isOn: 스위치가 켜져 있는 상태인지 여부
- isRunning: 프로세스가 실행 중인 상태인지 여부
- isConnected: 연결 상태인지 여부
// 버튼 클릭 여부
let onClick = false;
// 사용자 로그인 여부
let isLoggedIn = false;
// 파일 다운로드 완료 여부
let isDownloadComplete = false;
추가적인 팁
- 동사와 결합: "on"과 함께 다른 동사를 사용하여 더욱 구체적인 의미를 부여할 수 있습니다. 예를 들어, "onStart", "onStop", "onFinish" 등과 같이 사용할 수 있습니다.
- 명사와 결합: 상태가 변하는 대상을 명확히 하기 위해 명사와 함께 사용할 수 있습니다. 예를 들어, "onButtonClick", "onFormSubmit", "onDataReceived" 등과 같이 사용할 수 있습니다.
- 프로젝트 규칙: 프로젝트마다 고유한 네이밍 규칙이 있을 수 있으므로, 팀에서 정한 규칙을 따라야 합니다.
728x90
'웹개발 > javascript' 카테고리의 다른 글
| [자바스크립트] 자주 사용하는 정규식 표현 모음 (0) | 2024.08.01 |
|---|---|
| [자바스크립트] Debounce와 Throttle의 차이점 (0) | 2024.08.01 |
| [자바스크립트] 클로저(Closure) 이해하기 (0) | 2024.07.30 |
| [자바스크립트] 자바스크립트 객체 합치는 다양한 방법 (0) | 2024.07.30 |
| [자바스크립트] Yup 사용하기 (0) | 2024.07.30 |