찾다
웹 프론트엔드JS 튜토리얼쉼표 연산자에 대한 매력적인 사례

A Compelling Case for the Comma Operator

쉼표 연산자는 JavaScript 및 C++와 같은 C 유사 언어에서 덜 알려진 연산자 중 하나입니다. 기본적으로 이는 일련의 표현식을 구분하고 최종 표현식의 결과만 반환합니다.

const a = 1;
const b = 2;
const c = 3;
const result = (a, b, c, 4, 5, 6, true);
console.log(result); // true
if (false, true) console.log('hello'); // hello

그렇다면 다음과 같이 묻는 것이 당연합니다. 한 줄에 여러 표현식을 집어넣는 것이 언제 유용할까요? 게다가 유용하더라도 쉼표로 구분된 일련의 표현식( 한 줄)은 세미콜론으로 구분된 일련의 명령문(여러 줄에 걸쳐)보다 더 읽기 쉽고 유지 관리하기 쉽습니까? 언제 다른 것보다 하나를 선호해야 합니까?

지난 몇 년 동안 답하기 위해 애썼던 질문들이었는데 이제 드디어 답을 얻은 것 같습니다. 이 기사에서는 쉼표 연산자에 대한 설득력 있는 사례(아마도 솔직하게 말하면 유일한 사례)를 제시합니다.

동기를 부여하는 예

먼저 조건부 삼항 연산자에 대해 이야기해 보겠습니다. 아래와 같이 조건이 참이면 값을 평가합니다. 그렇지 않으면 다른 것을 평가합니다. 여기서는 브랜치가 조건이 충족될 때만 실행되기 때문에 "평가"라는 키워드가 강조됩니다.

const result = condition ? value : another;

대부분의 경우 깔끔하고 예쁘네요. 그러나 조건부 값을 반환하기 전에 분기 사이에서 더 복잡한 논리를 수행해야 할 때 문제가 발생합니다. 이 시점에서 우리는 다음과 같은 불행한 왜곡에 의지합니다.

let result; // Uninitialized! Yikes!
if (condition) {
    // Do some complex stuff in between...
    doSomething();
    // ...
    result = value; // Actual Assignment
} else {
    // Do other complex stuff in between...
    doAnotherThing();
    // ...
    result = another; // Actual Assignment
}
// Hopefully we didn't forget to initialize `result`!

이제 이 공식에는 많은 문제가 있습니다.

  1. 처음에는 결과가 초기화되지 않았습니다. 이는 본질적으로 나쁜 것은 아니지만, 정의되지 않음으로 인한 버그를 피하는 쉽고 검증된 방법은 항상 변수를 초기화하는 것입니다.
  2. 결과 초기화는 문자 그대로 브랜치의 맨 아래에 있으며 선언과는 거리가 멀습니다.
  3. 조건문이 끝나면 결과가 확실히 초기화되기를 바랍니다. 우리가 아니라면 팀원들이 똑같이 이를 시행하기를 바랍니다. 지금은 그렇지 않더라도 미래의 개발자들도 이를 지지하기를 바랍니다!

조건부 삼항 표현식 사용을 고집하는 경우 이러한 제한을 피할 수 있는 방법이 있습니다. 코드를 함수로 리팩터링하면 됩니다. 말보다 확실히 쉽습니다. 이 특수 효과는 정말 빨리 낡아집니다!

function computeWrappedValue() {
    // ...
    return value;
}

function computeWrappedAnother() {
    // ...
    return another;
}

// How cumbersome!
const result = condition ? computeWrappedValue() : computeWrappedAnother();

(Rust와 같은) 표현 기반 프로그래밍 언어는 더 우아한 솔루션을 제공합니다. if 을 if 표현식으로 재분류하면 각 분기를 평가하여 나중에 변수에 저장할 수 있는 값을 반환할 수 있습니다.

// A conditional ternary operator thus looks like this. Each branch
// returns a value, which is captured by the `result` variable.
// We thus ensure that `result` is always initialized by construction.
let result = if condition { value } else { another };
// If we wanted to do something more complex, we use the same syntax.
let result = if condition {
    do_something();
    // In Rust, the last expression without a semicolon is the value
    // that will be "returned" by the overall `if` expression.
    result
} else {
    do_another_thing();
    another
};

이것을 C와 같은 언어로 에뮬레이션할 수 있나요? 아마도 제가 이 방향으로 나아갈 방향을 오랫동안 예상하셨을 것입니다. 하지만 그렇습니다!

설득력 있는 사례

우리가 원하는 것은 삼항 분기 내에서 값을 반환하기 전에 명령문을 임의로 실행하는 방법입니다. 다행스럽게도 이것이 정확히 쉼표 연산자의 용도입니다.

// Parenthesized for clarity.
const result = condition
    ? (doSomething(), value)       // evaluates to `value`
    : (doAnotherThing(), another); // evaluates to `another`

이 공식의 장점은 분기 표현식이 필요할 때만 평가된다는 점입니다. 우리는 표현 기반 프로그래밍 언어의 동작을 효과적으로 에뮬레이트합니다. 임시 래퍼 기능의 시대는 지났습니다!

하지만 아쉽게도 이 기술로는 여기까지만 갈 수 있습니다. 충분히 큰 n의 경우 n문장을 한 줄에 집어넣는 것은 이미 자체 기능으로 리팩토링되어야 한다고 상상할 수 있습니다. 개인적으로 나는 n >gt; 3. 그 이상은 가독성 측면에서 의심스러운 구성입니다.

// Maybe we should reconsider here?
const result = condition
    ? (x++, thing = hello(), doSomething(), value)
    : (++y, thing = world(), doAnotherThing(), another);
// Okay, stop. Definitely turn back now!
const result = condition
    ? (
        x++,
        thing = hello(),
        doSomething(),
        doMore(y),
        doEvenMore(thing),
        value,
    ) : (
        ++y,
        thing = world(),
        doAnotherThing(),
        doMore(y),
        doEvenMore(thing),
        another,
    );
// Unless, of course, you're fine with this. It kinda does
// look like a Rust `if` expression if you squint hard enough.

결론

마무리면서 우리는 쉼표 연산자에 대한 매력적인 사례인 복잡한 조건부 삼항 연산을 살펴보았습니다. 쉼표 연산자는 가지가 짧고 달콤할 때 빛을 발하지만 세 개의 인라인 문 이후에는 빠르게 유행에서 벗어납니다. 그 시점에서는 코드를 리팩토링하는 것이 더 나을 것입니다.

그럼 쉼표 연산자를 사용해야 할까요? 솔직히... 네! 읽기 쉬운 코드는 다음 독자를 염두에 두고 있으므로 쉼표 체인이 지나치게 길지 않는 한 나는 이 코딩 스타일을 받아들이고 장려할 것입니다. 대안(예: 초기화되지 않은 변수 및 리팩터링된 마이크로 함수)을 고려하면 결국 쉼표 연산자는 그렇게 나쁘지 않습니다.

실제로 나는 이미 이 재미있어 보이는 쉼표 연산자를 내 코드베이스에 뿌렸습니다. 공평하게 말하면 어쨌든 다중 문 삼항 조건문이 필요한 경우는 거의 없습니다. 하지만 그렇게 할 때 내 의도를 간결하게 표현하는 멋진 도구가 내 벨트에 있습니다.

그러므로 쉼표 연산자에 대한 설득력 있는 주장을 쉬겠습니다.

위 내용은 쉼표 연산자에 대한 매력적인 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Java vs JavaScript : 개발자를위한 세부 비교Java vs JavaScript : 개발자를위한 세부 비교May 16, 2025 am 12:01 AM

javaandjavaScriptAredistIntLanguages ​​: javaisusedforenterpriseandmobileApps, whilejavaScriptisforInciveWebPages.1) javaiscompiled, 정적으로 정적, Andrunsonjvm.2) javaScriptISNaterPreted, doineslicallytyted, andrunsinbrowsorsornode.js.3) javausepith

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)