이 랩에서는 JavaScript 를 사용하여 객체의 모든 키를 소문자로 변환하는 방법을 배웁니다. 이 기술은 객체 키의 대소문자가 일관되지 않을 수 있는 다양한 소스에서 데이터를 사용할 때 특히 유용합니다.
이 작업을 수행하기 위해 다음과 같은 여러 JavaScript 메서드를 활용합니다.
Object.keys(): 객체에서 모든 키를 가져옵니다.Array.prototype.reduce(): 데이터를 새로운 객체로 변환합니다.String.prototype.toLowerCase(): 문자열을 소문자로 변환합니다.이 랩을 마치면, 값을 유지하면서 모든 객체의 키를 소문자로 변환할 수 있는 재사용 가능한 함수를 만들 수 있습니다.
객체 키를 소문자로 변환하기 전에, JavaScript 객체가 무엇인지, 그리고 어떻게 작업할 수 있는지 이해해 보겠습니다.
JavaScript 에서 객체는 키 - 값 쌍의 모음입니다. 키는 문자열 (또는 Symbol) 이며, 값은 다른 객체를 포함하여 모든 데이터 유형이 될 수 있습니다.
Node.js 대화형 셸을 열어 시작해 보겠습니다.
node를 입력하고 Enter 키를 누릅니다.이제 JavaScript 코드를 직접 입력할 수 있는 Node.js 프롬프트 (>) 가 표시됩니다.
대소문자가 혼합된 키를 가진 간단한 객체를 만들어 보겠습니다.
const user = {
Name: "John",
AGE: 30,
Email: "john@example.com"
};이 코드를 Node.js 프롬프트에 입력하고 Enter 키를 누릅니다. 객체를 보려면 user를 입력하고 Enter 키를 누릅니다.
user;다음과 같은 출력을 볼 수 있습니다.
{ Name: 'John', AGE: 30, Email: 'john@example.com' }보시다시피, 이 객체는 서로 다른 대소문자 스타일의 키를 가지고 있습니다. 다음 단계에서는 이러한 키에 액세스하고 소문자로 변환하는 방법을 배웁니다.
객체 키를 변환하기 전에, 키에 접근하는 방법을 이해해야 합니다. JavaScript 는 객체의 모든 키를 포함하는 배열을 반환하는 Object.keys() 메서드를 제공합니다.
Node.js 대화형 셸에서 다음을 시도해 보세요.
Object.keys(user);다음과 같은 출력을 볼 수 있습니다.
[ 'Name', 'AGE', 'Email' ]이제 toLowerCase() 메서드를 사용하여 각 키를 소문자로 변환해 보겠습니다. map() 메서드를 사용하여 각 키를 변환할 수 있습니다.
Object.keys(user).map((key) => key.toLowerCase());출력은 다음과 같아야 합니다.
[ 'name', 'age', 'email' ]훌륭합니다! 이제 모든 키가 소문자로 변환된 배열이 있습니다. 그러나 이러한 소문자 키와 원래 값을 가진 새로운 객체를 만들어야 합니다. 이를 위해 다음 단계에서 reduce() 메서드를 사용합니다.
계속 진행하기 전에 reduce() 메서드를 이해해 보겠습니다. 이 메서드는 배열의 각 요소에 대해 리듀서 함수를 실행하여 단일 출력 값을 생성합니다.
다음은 reduce()의 간단한 예입니다.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
sum;출력은 배열의 모든 숫자의 합인 10이 됩니다. reduce() 메서드의 0은 누산기 (accumulator) 의 초기 값입니다.
이제 객체 키에 접근하고 reduce() 메서드를 사용하는 방법을 이해했으므로, 객체의 모든 키를 소문자로 변환하는 함수를 만들어 보겠습니다.
Node.js 대화형 셸에서 다음 함수를 정의합니다.
const lowerizeKeys = (obj) => {
return Object.keys(obj).reduce((acc, key) => {
acc[key.toLowerCase()] = obj[key];
return acc;
}, {});
};이 함수가 수행하는 작업을 자세히 살펴보겠습니다.
Object.keys(obj)는 입력 객체의 모든 키를 가져옵니다..reduce()는 이러한 키를 새로운 객체로 변환합니다.acc) 에 다음을 사용하여 새로운 항목을 만듭니다.
key.toLowerCase()를 사용하여 소문자로 변환된 키obj[key]) 의 원래 값{}로 시작합니다.이제 앞에서 만든 user 객체로 함수를 테스트해 보겠습니다.
const lowercaseUser = lowerizeKeys(user);
lowercaseUser;다음과 같은 출력을 볼 수 있습니다.
{ name: 'John', age: 30, email: 'john@example.com' }완벽합니다! 이제 모든 키가 소문자로 되어 있습니다.
함수가 제대로 작동하는지 확인하기 위해 다른 예제를 시도해 보겠습니다.
const product = {
ProductID: 101,
ProductName: "Laptop",
PRICE: 999.99
};
lowerizeKeys(product);출력은 다음과 같아야 합니다.
{ productid: 101, productname: 'Laptop', price: 999.99 }함수는 다양한 키 대소문자 스타일을 가진 다른 객체에 대해 올바르게 작동합니다.
우리의 함수는 간단한 객체에 대해서는 잘 작동하지만, 더 복잡한 경우에는 어떨까요? 몇 가지 엣지 케이스를 살펴보고 함수가 어떻게 처리하는지 살펴보겠습니다.
먼저, 빈 객체로 테스트해 보겠습니다.
lowerizeKeys({});출력은 빈 객체여야 합니다.
{}객체에 중첩된 객체가 포함되어 있다면 어떨까요? 시도해 보겠습니다.
const nestedObject = {
User: {
Name: "John",
Contact: {
EMAIL: "john@example.com",
PHONE: "123-456-7890"
}
}
};
lowerizeKeys(nestedObject);출력은 다음과 같습니다.
{ user: { Name: 'John', Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' } } }최상위 키 User만 소문자로 변환된 것을 확인하세요. 중첩된 객체 내부의 키는 변경되지 않습니다.
중첩된 객체를 처리하려면, 모든 객체를 재귀적으로 처리하도록 함수를 수정해야 합니다. 향상된 버전을 만들어 보겠습니다.
const deepLowerizeKeys = (obj) => {
return Object.keys(obj).reduce((acc, key) => {
const value = obj[key];
// Check if the value is an object and not null
const newValue =
value && typeof value === "object" && !Array.isArray(value)
? deepLowerizeKeys(value)
: value;
acc[key.toLowerCase()] = newValue;
return acc;
}, {});
};이 향상된 함수는 다음을 수행합니다.
중첩된 객체로 테스트해 보겠습니다.
const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;이제 중첩된 객체에서도 모든 키가 소문자로 변환된 것을 볼 수 있습니다.
{ user: { name: 'John', contact: { email: 'john@example.com', phone: '123-456-7890' } } }잘하셨습니다! 중첩된 객체를 처리할 수 있는 고급 함수를 만들었습니다.
이제 작동하는 함수가 있으므로, 다른 프로젝트로 가져올 수 있는 재사용 가능한 JavaScript 모듈 파일을 만들어 보겠습니다.
먼저, Ctrl+C 를 두 번 누르거나 .exit를 입력하고 Enter 키를 눌러 Node.js 대화형 셸을 종료합니다.
이제 프로젝트 디렉토리에 object-utils.js라는 새 파일을 만듭니다.
object-utils.js로 지정합니다./**
* Converts all keys of an object to lowercase
* @param {Object} obj - The input object
* @returns {Object} A new object with all keys in lowercase
*/
const lowerizeKeys = (obj) => {
return Object.keys(obj).reduce((acc, key) => {
acc[key.toLowerCase()] = obj[key];
return acc;
}, {});
};
/**
* Recursively converts all keys of an object and its nested objects to lowercase
* @param {Object} obj - The input object
* @returns {Object} A new object with all keys in lowercase (including nested objects)
*/
const deepLowerizeKeys = (obj) => {
return Object.keys(obj).reduce((acc, key) => {
const value = obj[key];
// Check if the value is an object and not null
const newValue =
value && typeof value === "object" && !Array.isArray(value)
? deepLowerizeKeys(value)
: value;
acc[key.toLowerCase()] = newValue;
return acc;
}, {});
};
// Export the functions
module.exports = {
lowerizeKeys,
deepLowerizeKeys
};이제 모듈이 제대로 작동하는지 확인하기 위해 테스트 파일을 만들어 보겠습니다. test.js라는 새 파일을 만듭니다.
test.js로 지정합니다.// Import the functions from our module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");
// Test with a simple object
const user = {
Name: "John",
AGE: 30,
Email: "john@example.com"
};
console.log("Original object:");
console.log(user);
console.log("\nObject with lowercase keys:");
console.log(lowerizeKeys(user));
// Test with a nested object
const nestedObject = {
User: {
Name: "John",
Contact: {
EMAIL: "john@example.com",
PHONE: "123-456-7890"
}
}
};
console.log("\nNested object:");
console.log(nestedObject);
console.log("\nNested object with lowercase keys (shallow):");
console.log(lowerizeKeys(nestedObject));
console.log("\nNested object with lowercase keys (deep):");
console.log(deepLowerizeKeys(nestedObject));이제 테스트 파일을 실행해 보겠습니다.
node test.js다음과 유사한 출력을 볼 수 있습니다.
Original object:
{ Name: 'John', AGE: 30, Email: 'john@example.com' }
Object with lowercase keys:
{ name: 'John', age: 30, email: 'john@example.com' }
Nested object:
{
User: {
Name: 'John',
Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
}
}
Nested object with lowercase keys (shallow):
{
user: {
Name: 'John',
Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
}
}
Nested object with lowercase keys (deep):
{
user: {
name: 'John',
contact: { email: 'john@example.com', phone: '123-456-7890' }
}
}축하합니다! 객체 키를 소문자로 변환하는 함수가 있는 재사용 가능한 JavaScript 모듈을 성공적으로 만들었습니다. 이 모듈은 이제 JavaScript 프로젝트에 가져올 수 있습니다.
이 랩에서는 JavaScript 에서 객체 키를 소문자로 변환하는 방법을 배웠습니다. 다음을 수행했습니다.
Object.keys() 메서드를 사용하여 객체에서 모든 키를 가져왔습니다.reduce() 메서드를 활용하여 객체를 변환했습니다.이러한 기술은 객체 키의 대소문자가 일관되지 않을 수 있는 다양한 소스의 데이터를 사용할 때 유용합니다. 여러분이 만든 함수는 데이터를 정규화하고 더 쉽게 작업할 수 있도록 도와줍니다.
다음과 같은 더 많은 함수를 추가하여 이러한 유틸리티를 더욱 확장할 수 있습니다.
JavaScript 프로그래밍에 능숙해지려면 객체와 객체 조작을 계속 연습하십시오.