JavaScript를 사용하여 더 나은 조건부 구문을 작성하는 방법
앞말
모든 프로그래밍 언어에서 코드는 서로 다른 조건에 따라 주어진 입력에서 서로 다른 결정을 하고 해당하는 동작을 수행해야 한다.
예를 들어 한 게임에서 유저의 생명점이 0이면 게임이 끝난다.날씨 앱에서 아침에 보면 해돋이 그림을 표시하고 밤이면 별과 달을 표시한다.이 글에서 우리는 자바스크립트에서 이른바 조건 문장이 어떻게 작동하는지 탐색할 것이다.
만약 자바스크립트를 사용한다면, 조건부 호출을 포함하는 코드를 많이 쓸 것입니다.조건 호출은 처음에는 간단할 수 있지만, if/else에 대한 한 쌍을 쓰는 것보다 더 많은 것이 있다.여기에 더 좋고 명확한 조건 코드를 작성하는 유용한 힌트가 있다.
1. 배열 방법 Array.includes
Array를 사용합니다.다중 조건 선택 포함
예:
function printAnimals(animal) {
if (animal === 'dog' || animal === 'cat') {
console.log(I have a ${animal});
}
}
console.log(printAnimals('dog')); // I have a dog솔루션:
우리는 Array를 사용할 수 있습니다.includes에서 위의 조건을 다시 씁니다.
function printAnimals(animal) {
const animals = ['dog', 'cat', 'hamster', 'turtle'];
if (animals.includes(animal)) {
console.log(I have a ${animal});
}
}
console.log(printAnimals('hamster')); // I have a hamster
우리도 이 함수 작용역 외부에서 이 동물 수조 변수를 사용하여 코드 중의 다른 임의의 곳에서 그것을 다시 사용할 수 있다.이것은 더욱 명확하고 이해하기 쉽고 유지하기 쉬운 코드를 작성하는 방법이지 않습니까?
2. 조기 종료/조기 복귀
이것은 당신의 코드를 간소화하는 아주 멋진 기교입니다.나는 내가 전공 업무를 시작했을 때, 나는 첫날에 사용을 배워서 미리 반품하고 조건을 작성한 것을 기억한다.
이전의 예에 더 많은 조건을 추가합시다.간단한 문자열을 속성을 확정하는 대상을 포함하는 동물로 대체합니다.
현재 요구 사항은 다음과 같습니다.
const printAnimalDetails = animal => {
let result; // declare a variable to store the final value
// condition 1: check if animal has a value
if (animal) {
// condition 2: check if animal has a type property
if (animal.type) {
// condition 3: check if animal has a name property
if (animal.name) {
// condition 4: check if animal has a gender property
if (animal.gender) {
result = ${animal.name} is a ${animal.gender} ${animal.type};;
} else {
result = "No animal gender";
}
} else {
result = "No animal name";
}
} else {
result = "No animal type";
}
} else {
result = "No animal";
}
return result;
};
console.log(printAnimalDetails()); // 'No animal'
console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'
console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'
console.log(
printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'
그것은 매우 잘 작동하지만, 코드가 매우 길고, 유지 보수가 어렵다.만약 lint 도구를 사용하지 않는다면, 닫힌 괄호를 찾아내는 데 많은 시간이 낭비될 것이다.😄 코드에 더 복잡한 논리가 있다면 어떻게 될지 상상해 보세요.대량의 if...else 문장.
우리는 삼원 연산자, & & 조건 등 문법으로 위의 기능을 재구성할 수 있지만, 여러 개의 되돌아오는 문장으로 더욱 뚜렷한 코드를 작성할 수 있다.
const printAnimalDetails = ({type, name, gender } = {}) => {
if(!type) return 'No animal type';
if(!name) return 'No animal name';
if(!gender) return 'No animal gender';
// Now in this line of code, we're sure that we have an animal with all //the three properties here.
return ${name} is a ${gender} ${type};
}
console.log(printAnimalDetails()); // 'No animal type'
console.log(printAnimalDetails({ type: dog })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'
console.log(printAnimalDetails({ type: dog, name: 'Lucy', gender: 'female' })); // 'Lucy is a female dog'
일반적으로 전문 분야에서 코드는 이 두 가지 방법 사이에 쓰여 있다.
다른 예:
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];
// condition 1: vegetable should be present
if (vegetable) {
// condition 2: must be one of the item from the list
if (vegetables.includes(vegetable)) {
console.log(I like ${vegetable});
// condition 3: must be large quantity
if (quantity >= 10) {
console.log('I have bought a large quantity');
}
}
} else {
throw new Error('No vegetable from the list!');
}
}
printVegetablesWithQuantity(null); // No vegetable from the list!
printVegetablesWithQuantity('cabbage'); // I like cabbage
printVegetablesWithQuantity('cabbage', 20);
// 'I like cabbage
// 'I have bought a large quantity'1 if/else 문장 필터링 불법 조건
3 레벨 중첩if문장(조건 1, 2, & 3)
보편적으로 따르는 규칙은 불법 조건이 일치할 때 미리 물러나는 것이다.
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];
// condition 1: throw error early
if (!vegetable) throw new Error('No vegetable from the list!');
// condition 2: must be in the list
if (vegetables.includes(vegetable)) {
console.log(I like ${vegetable});
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log('I have bought a large quantity');
}
}
}우리는 조건을 거꾸로 하고 앞당겨 되돌려줌으로써 끼워 넣는if문장을 더욱 줄일 수 있다.아래의 조건 2를 보고 우리가 어떻게 하는지 살펴보자.
function printVegetablesWithQuantity(vegetable, quantity) {
const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];
if (!vegetable) throw new Error('No vegetable from the list!');
// condition 1: throw error early
if (!vegetables.includes(vegetable)) return;
// condition 2: return from the function is the vegetable is not in
// the list
console.log(I like ${vegetable});
// condition 3: must be a large quantity
if (quantity >= 10) {
console.log('I have bought a large quantity');
}
}따라서 더 적은 끼워넣기와 조기 복귀에 관심을 가지지만 과도하게 사용하지 말아야 한다.
3. Switch 문구 대신 객체 글꼴 또는 맵 사용하기
다음 예를 살펴보겠습니다. 우리는 색깔에 따라 과일을 인쇄하려고 합니다.
function printFruits(color) {
// use switch case to find fruits by color
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
printFruits(null); // []
printFruits('yellow'); // ['banana', 'pineapple']
// use object literal to find fruits by color
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function printFruits(color) {
return fruitColor[color] || [];
}
// use Map to find fruits by color
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function printFruits(color) {
return fruitColor.get(color) || [];
}위의 예에서 같은 기능도 수조 방법으로 Array를 사용할 수 있다.filte로 구현합니다.
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }
];
function printFruits(color) {
return fruits.filter(fruit => fruit.color === color);
}4. 기본 매개변수 및 구성 해제
자바스크립트를 사용할 때, 우리는 항상 null/undefined 값을 검사하고 기본값을 부여해야 합니다. 그렇지 않으면 컴파일이 실패할 수 있습니다.
function printVegetablesWithQuantity(vegetable, quantity = 1) {
// if quantity has no value, assign 1
if (!vegetable) return;
console.log(We have ${quantity} ${vegetable}!);
}
//results
printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
printVegetablesWithQuantity('potato', 2); // We have 2 potato!
function printVegetableName(vegetable) {
if (vegetable && vegetable.name) {
console.log (vegetable.name);
} else {
console.log('unknown');
}
}
printVegetableName(undefined); // unknown
printVegetableName({}); // unknown
printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbage기본 매개 변수와 구조를 사용해서 조건 문장 if (vegetable & &vegetable.name) {} 를 피할 수 있습니다.
// destructing - get name property only
// assign default empty object {}
function printVegetableName({name} = {}) {
console.log (name || 'unknown');
}
printVegetableName(undefined); // unknown
printVegetableName({ }); // unknown
printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbageprintVegetableName (undefined) 을 실행할 때 오류가 발생합니다. undefined나null에서 속성name 을 해독할 수 없습니다. undefined에name 속성이 없기 때문입니다.
5. Array로.every & Array.some 일치 전체 / 부분 내용
우리는 수조 방법을 사용하여 코드 줄을 줄일 수 있다.아래의 코드를 보면 모든 과일이 빨간색인지 확인하고 싶습니다.
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
let isAllRed = true;
// condition: all fruits must be red
for (let f of fruits) {
if (!isAllRed) break;
isAllRed = (f.color == 'red');
}
console.log(isAllRed); // false
}
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
// condition: short way, all fruits must be red
const isAllRed = fruits.every(f => f.color == 'red');
console.log(isAllRed); // false
}
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
// condition: if any fruit is red
const isAnyRed = fruits.some(f => f.color == 'red');
console.log(isAnyRed); // true
}6. 선택적 체인 및 빈 값 결합 사용
이것은 더욱 명확한 조건 문장을 작성하기 위해 자바스크립트가 될 두 가지 기능이 있다.이 글을 쓸 때, 그것들은 아직 완전히 지원되지 않았으니, 당신은 Babel을 사용해서 번역해야 합니다.
선택할 수 있는 체인은 중간 노드가 트리-like 구조를 처리하는지 명확하게 검사하지 않고 빈 값과 선택할 수 있는 체인을 조합하여 존재하지 않는 값에 기본값을 부여하도록 합니다.
이 예는 다음과 같습니다.
const car = {
model: 'Fiesta',
manufacturer: {
name: 'Ford',
address: {
street: 'Some Street Name',
number: '5555',
state: 'USA'
}
}
}
// to get the car model
const model = car && car.model || 'default model';
// to get the manufacturer street
const street = car && car.manufacturer && car.manufacturer.address &&
car.manufacturer.address.street || 'default street';
// request an un-existing property
const phoneNumber = car && car.manufacturer && car.manufacturer.address
&& car.manufacturer.phoneNumber;
console.log(model) // 'Fiesta'
console.log(street) // 'Some Street Name'
console.log(phoneNumber) // undefined
const isManufacturerFromUSA = () => {
if(car && car.manufacturer && car.manufacturer.address &&
car.manufacturer.address.state === 'USA') {
console.log('true');
}
}
checkCarManufacturerState() // 'true'이것은 이러한 새로운 특성들이 어떻게 작동하는지 보여 준다.
// to get the car model
const model = car?.model ?? 'default model';
// to get the manufacturer street
const street = car?.manufacturer?.address?.street ?? 'default street';
// to check if the car manufacturer is from the USA
const isManufacturerFromUSA = () => {
if(car?.manufacturer?.address?.state === 'USA') {
console.log('true');
}
}총결산
몇 달 후, 긴 조건이 돌을 옮겨 자신의 발을 찧는 것처럼 보이기 때문에, 우리는 더욱 명확하고 유지하기 쉬운 코드를 작성하기 위해 새로운 기교와 기술을 배우고 시도해 봅시다.😄
자바스크립트를 이용하여 더 좋은 조건문을 작성하는 방법에 관한 이 글을 소개합니다. 자바스크립트 조건문에 대한 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
