When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.

JavaScript Intl.ListFormat turns an iterable of strings into a locale-sensitive list. The formatter selects conjunction, disjunction or unit patterns, combines pair, start, middle and end templates, and can expose element and literal parts for structured rendering. Mastery means keeping data order separate from presentation, choosing a real locale and semantic list type, understanding long, short and narrow styles, validating string input, using formatToParts() instead of parsing punctuation, and retaining accessible meaning when visual styling is added. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.

The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.

Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

Intl.ListFormat formats an already chosen ordered list of strings; it does not sort, translate, deduplicate or validate domain meaning. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is passing raw records and expecting the formatter to choose useful labels and order. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Prepare the semantic strings first, freeze their order, then call the formatter only at the presentation boundary.

For the ListFormat is a presentation service chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on passing raw records and expecting the formatter to choose useful labels and order. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const lf=new Intl.ListFormat('en-SG');
console.log(lf.format(['Math','Science','English']));

Four purposeful transfer cases

Case 1: homework dashboard. Predict the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: reading tracker. Contrast the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science project. Stress-test the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA registration. Explain the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers passing raw records and expecting the formatter to choose useful labels and order.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Prepare the semantic strings first, freeze their order, then call the formatter only at the presentation boundary.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from ListFormat is a presentation service?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing passing raw records and expecting the formatter to choose useful labels and order be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library catalogue with genres shown as compact metadata without inventing punctuation. Include one ordinary case, one boundary and one deliberate failure caused by passing raw records and expecting the formatter to choose useful labels and order. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For ListFormat is a presentation service, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Intl.ListFormat is a service constructor and must be called with new; locale negotiation resolves from the requested locale priority list. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is calling it as a plain function or letting a server default silently define punctuation and wording. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Pass the interface locale deliberately and inspect resolvedOptions() in tests.

For the Construct with new and an explicit locale chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on calling it as a plain function or letting a server default silently define punctuation and wording. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const lf=new Intl.ListFormat(['en-SG','en'],{type:'conjunction'});

Four purposeful transfer cases

Case 1: science project. Contrast the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA registration. Stress-test the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: family planner. Explain the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: library catalogue. Transfer the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers calling it as a plain function or letting a server default silently define punctuation and wording.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Pass the interface locale deliberately and inspect resolvedOptions() in tests.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Construct with new and an explicit locale?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling it as a plain function or letting a server default silently define punctuation and wording be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with zero, one, two and many elements across locales, types and styles. Include one ordinary case, one boundary and one deliberate failure caused by calling it as a plain function or letting a server default silently define punctuation and wording. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Construct with new and an explicit locale, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

The default type is conjunction, selecting locale data for an and-like relationship rather than inserting one fixed English word. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is joining with comma-space and appending & before the last item in every language. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Set type conjunction and test two and three items in every supported interface locale.

For the Conjunction means an and-based list chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on joining with comma-space and appending & before the last item in every language. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG',{type:'conjunction'}).format(['A','B','C'])

Four purposeful transfer cases

Case 1: family planner. Stress-test the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: library catalogue. Explain the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Transfer the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Predict the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers joining with comma-space and appending & before the last item in every language.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Set type conjunction and test two and three items in every supported interface locale.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Conjunction means an and-based list?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing joining with comma-space and appending & before the last item in every language be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. Include one ordinary case, one boundary and one deliberate failure caused by joining with comma-space and appending & before the last item in every language. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Conjunction means an and-based list, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

type disjunction selects patterns for alternatives, choices or acceptable substitutes. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using conjunction formatting for choices and changing the meaning from any option to all items. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State whether the list means together or alternatively before selecting the type.

For the Disjunction means an or-based list chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using conjunction formatting for choices and changing the meaning from any option to all items. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG',{type:'disjunction'}).format(['bus','train','walk'])

Four purposeful transfer cases

Case 1: test laboratory. Explain the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Transfer the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: homework dashboard. Predict the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: reading tracker. Contrast the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers using conjunction formatting for choices and changing the meaning from any option to all items.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “State whether the list means together or alternatively before selecting the type.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Disjunction means an or-based list?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using conjunction formatting for choices and changing the meaning from any option to all items be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with three subjects that have tasks due today. Include one ordinary case, one boundary and one deliberate failure caused by using conjunction formatting for choices and changing the meaning from any option to all items. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Disjunction means an or-based list, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

type unit selects locale list patterns for sequences of unit-bearing phrases and may omit a conjunction that normal prose would use. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is passing bare numbers and expecting ListFormat to know their units or perform measurement conversion. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Format each measurement phrase separately, then give the resulting strings to a unit ListFormat.

For the Unit is a spacing and grouping pattern chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on passing bare numbers and expecting ListFormat to know their units or perform measurement conversion. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG',{type:'unit'}).format(['5 km','12 min','2 stops'])

Four purposeful transfer cases

Case 1: homework dashboard. Transfer the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: reading tracker. Predict the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science project. Contrast the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA registration. Stress-test the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers passing bare numbers and expecting ListFormat to know their units or perform measurement conversion.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Format each measurement phrase separately, then give the resulting strings to a unit ListFormat.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Unit is a spacing and grouping pattern?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing passing bare numbers and expecting ListFormat to know their units or perform measurement conversion be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading tracker with authors chosen from a user-controlled string list. Include one ordinary case, one boundary and one deliberate failure caused by passing bare numbers and expecting ListFormat to know their units or perform measurement conversion. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Unit is a spacing and grouping pattern, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

style long, short or narrow selects a pattern family within the resolved type; long is the default. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming narrow is merely long output with fewer spaces and therefore always safe in sentences. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Render representative lists under all three styles and evaluate meaning, space and accessibility in the actual component.

For the Style changes pattern width chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming narrow is merely long output with fewer spaces and therefore always safe in sentences. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

for(const style of ['long','short','narrow'])
  console.log(new Intl.ListFormat('en-SG',{style}).format(['A','B','C']));

Four purposeful transfer cases

Case 1: science project. Predict the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA registration. Contrast the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: family planner. Stress-test the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: library catalogue. Explain the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers assuming narrow is merely long output with fewer spaces and therefore always safe in sentences.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Render representative lists under all three styles and evaluate meaning, space and accessibility in the actual component.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Style changes pattern width?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming narrow is merely long output with fewer spaces and therefore always safe in sentences be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science project with materials displayed as a conjunction and alternatives as a disjunction. Include one ordinary case, one boundary and one deliberate failure caused by assuming narrow is merely long output with fewer spaces and therefore always safe in sentences. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Style changes pattern width, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

An empty iterable contains no element parts, so format returns the empty string. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is treating the empty result as a completed user message such as Nobody selected. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Handle domain-specific empty-state wording before calling the formatter.

For the Empty input produces an empty string chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating the empty result as a completed user message such as Nobody selected. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const lf=new Intl.ListFormat('en-SG');
console.log(JSON.stringify(lf.format([])));

Four purposeful transfer cases

Case 1: family planner. Contrast the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: library catalogue. Stress-test the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Explain the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Transfer the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers treating the empty result as a completed user message such as Nobody selected.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Handle domain-specific empty-state wording before calling the formatter.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Empty input produces an empty string?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating the empty result as a completed user message such as Nobody selected be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA registration with available weekdays rendered in the family interface locale. Include one ordinary case, one boundary and one deliberate failure caused by treating the empty result as a completed user message such as Nobody selected. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Empty input produces an empty string, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A single string needs no separator or connective and is returned as the only element value. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is adding a trailing comma or conjunction through manual post-processing. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test the one-item boundary before styling punctuation or adding surrounding prose.

For the One item stays one item chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding a trailing comma or conjunction through manual post-processing. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG').format(['Mathematics'])

Four purposeful transfer cases

Case 1: test laboratory. Stress-test the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Explain the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: homework dashboard. Transfer the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: reading tracker. Predict the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers adding a trailing comma or conjunction through manual post-processing.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Test the one-item boundary before styling punctuation or adding surrounding prose.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from One item stays one item?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding a trailing comma or conjunction through manual post-processing be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family planner with participants whose names must keep their original order. Include one ordinary case, one boundary and one deliberate failure caused by adding a trailing comma or conjunction through manual post-processing. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For One item stays one item, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A two-element list uses the locale pair pattern rather than the start and end templates used for longer lists. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is predicting a comma from the three-item result and hard-coding that punctuation into tests. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Keep separate fixtures for zero, one, two, three and many elements.

For the Two items use the pair template chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on predicting a comma from the three-item result and hard-coding that punctuation into tests. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG',{type:'conjunction'}).format(['A','B'])

Four purposeful transfer cases

Case 1: homework dashboard. Explain the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: reading tracker. Transfer the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science project. Predict the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA registration. Contrast the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers predicting a comma from the three-item result and hard-coding that punctuation into tests.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Keep separate fixtures for zero, one, two, three and many elements.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Two items use the pair template?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing predicting a comma from the three-item result and hard-coding that punctuation into tests be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library catalogue with genres shown as compact metadata without inventing punctuation. Include one ordinary case, one boundary and one deliberate failure caused by predicting a comma from the three-item result and hard-coding that punctuation into tests. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Two items use the pair template, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

For three or more strings, locale data composes the list through structural templates rather than a language-neutral comma algorithm. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is testing only three items and assuming a ten-item list is produced by the same single replacement. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test several lengths and treat punctuation as output data, not an invariant to reconstruct.

For the Longer lists use start, middle and end templates chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on testing only three items and assuming a ten-item list is produced by the same single replacement. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG').format(['A','B','C','D'])

Four purposeful transfer cases

Case 1: science project. Transfer the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA registration. Predict the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: family planner. Contrast the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: library catalogue. Stress-test the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers testing only three items and assuming a ten-item list is produced by the same single replacement.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Test several lengths and treat punctuation as output data, not an invariant to reconstruct.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Longer lists use start, middle and end templates?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only three items and assuming a ten-item list is produced by the same single replacement be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with zero, one, two and many elements across locales, types and styles. Include one ordinary case, one boundary and one deliberate failure caused by testing only three items and assuming a ten-item list is produced by the same single replacement. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Longer lists use start, middle and end templates, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

format obtains strings from the supplied iterable and rejects a non-string element rather than applying arbitrary object-to-string conversion as a domain policy. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is passing numbers, nulls or records and expecting useful labels. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Map records to intentional user-facing strings and assert every element type before formatting.

For the Input is an iterable of strings chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on passing numbers, nulls or records and expecting useful labels. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const lf=new Intl.ListFormat('en-SG');
lf.format(new Set(['A','B','C']));

Four purposeful transfer cases

Case 1: family planner. Predict the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: library catalogue. Contrast the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Stress-test the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Explain the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers passing numbers, nulls or records and expecting useful labels.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Map records to intentional user-facing strings and assert every element type before formatting.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Input is an iterable of strings?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing passing numbers, nulls or records and expecting useful labels be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. Include one ordinary case, one boundary and one deliberate failure caused by passing numbers, nulls or records and expecting useful labels. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Input is an iterable of strings, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

A generator can supply the list, but iteration consumes it; reusing the same exhausted generator does not reproduce the original elements. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is formatting one generator twice and blaming ListFormat when the second result is empty. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Materialize reusable data as an array or create a fresh generator for each consumption.

For the Generators are consumed as iterables chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on formatting one generator twice and blaming ListFormat when the second result is empty. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

function* names(){yield 'A';yield 'B'}
const g=names(),lf=new Intl.ListFormat('en-SG');
console.log(lf.format(g),lf.format(g));

Four purposeful transfer cases

Case 1: test laboratory. Contrast the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Stress-test the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: homework dashboard. Explain the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: reading tracker. Transfer the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers formatting one generator twice and blaming ListFormat when the second result is empty.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Materialize reusable data as an array or create a fresh generator for each consumption.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Generators are consumed as iterables?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing formatting one generator twice and blaming ListFormat when the second result is empty be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with three subjects that have tasks due today. Include one ordinary case, one boundary and one deliberate failure caused by formatting one generator twice and blaming ListFormat when the second result is empty. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Generators are consumed as iterables, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

resolvedOptions() exposes the resolved locale, type and style used by the formatter. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is inspecting the constructor arguments and assuming fallback negotiation cannot change the effective locale. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Capture resolvedOptions in compatibility tests and log it beside unexpected output.

For the resolvedOptions reports the effective setup chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on inspecting the constructor arguments and assuming fallback negotiation cannot change the effective locale. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const lf=new Intl.ListFormat('en-SG',{type:'disjunction',style:'short'});
console.log(lf.resolvedOptions());

Four purposeful transfer cases

Case 1: homework dashboard. Stress-test the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: reading tracker. Explain the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science project. Transfer the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA registration. Predict the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers inspecting the constructor arguments and assuming fallback negotiation cannot change the effective locale.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Capture resolvedOptions in compatibility tests and log it beside unexpected output.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from resolvedOptions reports the effective setup?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing inspecting the constructor arguments and assuming fallback negotiation cannot change the effective locale be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading tracker with authors chosen from a user-controlled string list. Include one ordinary case, one boundary and one deliberate failure caused by inspecting the constructor arguments and assuming fallback negotiation cannot change the effective locale. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For resolvedOptions reports the effective setup, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Intl.ListFormat.supportedLocalesOf() filters requested locale identifiers to those supportable without falling back to an unrelated default. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using one formatted sample to infer support for every requested locale. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Check support during setup and define an application fallback policy for unsupported requests.

For the supportedLocalesOf tests locale support chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using one formatted sample to infer support for every requested locale. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

Intl.ListFormat.supportedLocalesOf(['en-SG','ms-SG','zz-ZZ'])

Four purposeful transfer cases

Case 1: science project. Explain the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA registration. Transfer the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: family planner. Predict the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: library catalogue. Contrast the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers using one formatted sample to infer support for every requested locale.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Check support during setup and define an application fallback policy for unsupported requests.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from supportedLocalesOf tests locale support?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using one formatted sample to infer support for every requested locale be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science project with materials displayed as a conjunction and alternatives as a disjunction. Include one ordinary case, one boundary and one deliberate failure caused by using one formatted sample to infer support for every requested locale. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For supportedLocalesOf tests locale support, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

formatToParts() returns element and literal records, allowing structured rendering without parsing commas, spaces or connective words. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is splitting the formatted string on commas and breaking locales with different punctuation or conjunction placement. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Render element parts as content and literal parts as formatter-owned text while preserving order.

For the formatToParts preserves structure chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on splitting the formatted string on commas and breaking locales with different punctuation or conjunction placement. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-SG').formatToParts(['A','B','C'])

Four purposeful transfer cases

Case 1: family planner. Transfer the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: library catalogue. Predict the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Contrast the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Stress-test the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers splitting the formatted string on commas and breaking locales with different punctuation or conjunction placement.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Render element parts as content and literal parts as formatter-owned text while preserving order.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from formatToParts preserves structure?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing splitting the formatted string on commas and breaking locales with different punctuation or conjunction placement be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA registration with available weekdays rendered in the family interface locale. Include one ordinary case, one boundary and one deliberate failure caused by splitting the formatted string on commas and breaking locales with different punctuation or conjunction placement. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For formatToParts preserves structure, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Literal parts contain meaningful spaces, punctuation and connective text that should normally remain intact. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is trimming every literal or replacing the final literal with an English ampersand. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Preserve literal values exactly and customize only element wrappers unless a qualified localization design specifies otherwise.

For the Parts are for rendering, not rewriting grammar chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on trimming every literal or replacing the final literal with an English ampersand. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const parts=new Intl.ListFormat('en-SG').formatToParts(['A','B']);
const html=parts.map(p=>p.type==='element'?'<b>'+p.value+'</b>':p.value).join('');

Four purposeful transfer cases

Case 1: test laboratory. Predict the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Contrast the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: homework dashboard. Stress-test the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: reading tracker. Explain the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers trimming every literal or replacing the final literal with an English ampersand.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Preserve literal values exactly and customize only element wrappers unless a qualified localization design specifies otherwise.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Parts are for rendering, not rewriting grammar?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing trimming every literal or replacing the final literal with an English ampersand be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family planner with participants whose names must keep their original order. Include one ordinary case, one boundary and one deliberate failure caused by trimming every literal or replacing the final literal with an English ampersand. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Parts are for rendering, not rewriting grammar, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Comma choice is part of locale data and list length, type and style; Intl.ListFormat does not promise one house-style punctuation rule across languages. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is asserting one exact English punctuation string as the universal semantic test. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test exact snapshots only for supported locale-data expectations and test element order and parts for broader invariants.

For the Locale output is not an Oxford-comma promise chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on asserting one exact English punctuation string as the universal semantic test. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

new Intl.ListFormat('en-GB').format(['A','B','C'])

Four purposeful transfer cases

Case 1: homework dashboard. Contrast the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: reading tracker. Stress-test the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: science project. Explain the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: CCA registration. Transfer the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers asserting one exact English punctuation string as the universal semantic test.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Test exact snapshots only for supported locale-data expectations and test element order and parts for broader invariants.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Locale output is not an Oxford-comma promise?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing asserting one exact English punctuation string as the universal semantic test be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library catalogue with genres shown as compact metadata without inventing punctuation. Include one ordinary case, one boundary and one deliberate failure caused by asserting one exact English punctuation string as the universal semantic test. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Locale output is not an Oxford-comma promise, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Locale-aware literals help, but names and phrases may contain right-to-left and left-to-right text that still needs safe document direction handling. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is building HTML by concatenating unescaped element strings around localized punctuation. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Create DOM text nodes or escaped output, retain parts and test representative bidirectional names with dir auto where appropriate.

For the Mixed-direction text needs structural care chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on building HTML by concatenating unescaped element strings around localized punctuation. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const parts=new Intl.ListFormat('ar').formatToParts(['Alice','ليلى','陈']);

Four purposeful transfer cases

Case 1: science project. Stress-test the rule using materials displayed as a conjunction and alternatives as a disjunction. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: CCA registration. Explain the rule using available weekdays rendered in the family interface locale. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: family planner. Transfer the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: library catalogue. Predict the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers building HTML by concatenating unescaped element strings around localized punctuation.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Create DOM text nodes or escaped output, retain parts and test representative bidirectional names with dir auto where appropriate.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Mixed-direction text needs structural care?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing building HTML by concatenating unescaped element strings around localized punctuation be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with zero, one, two and many elements across locales, types and styles. Include one ordinary case, one boundary and one deliberate failure caused by building HTML by concatenating unescaped element strings around localized punctuation. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Mixed-direction text needs structural care, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Constructing a formatter for every cell or render can add avoidable work; a reusable formatter is appropriate when locale, type and style are unchanged. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is sharing one global formatter after the user changes language or semantic list type. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Key a small cache by canonical locale request, type and style, then invalidate it with locale state changes.

For the Cache formatters by resolved intent chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on sharing one global formatter after the user changes language or semantic list type. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const key=JSON.stringify(['en-SG','conjunction','long']);
cache.get(key)??cache.set(key,new Intl.ListFormat('en-SG')).get(key)

Four purposeful transfer cases

Case 1: family planner. Explain the rule using participants whose names must keep their original order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: library catalogue. Transfer the rule using genres shown as compact metadata without inventing punctuation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: test laboratory. Predict the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: design decision. Contrast the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers sharing one global formatter after the user changes language or semantic list type.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Key a small cache by canonical locale request, type and style, then invalidate it with locale state changes.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Cache formatters by resolved intent?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing sharing one global formatter after the user changes language or semantic list type be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. Include one ordinary case, one boundary and one deliberate failure caused by sharing one global formatter after the user changes language or semantic list type. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Cache formatters by resolved intent, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Use ListFormat when ordered strings need locale-sensitive list grammar; use join for machine formats, NumberFormat for numbers, DisplayNames for names and domain code for sorting or translation. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is treating every comma-separated output as the same problem. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Name the audience, locale, relationship, width and empty-state policy before selecting the API.

For the Choose ListFormat after semantic preparation chapter on JavaScript Intl.ListFormat, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating every comma-separated output as the same problem. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const labels=records.map(toLocalizedLabel);
const text=new Intl.ListFormat(locale,{type:'conjunction',style:'long'}).format(labels);

Four purposeful transfer cases

Case 1: test laboratory. Transfer the rule using zero, one, two and many elements across locales, types and styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 2: design decision. Predict the rule using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: homework dashboard. Contrast the rule using three subjects that have tasks due today. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 4: reading tracker. Stress-test the rule using authors chosen from a user-controlled string list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers treating every comma-separated output as the same problem.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Name the audience, locale, relationship, width and empty-state policy before selecting the API.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final JavaScript Intl.ListFormat syntax. For this chapter, useful prompts are: “What did you expect from Choose ListFormat after semantic preparation?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating every comma-separated output as the same problem be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with three subjects that have tasks due today. Include one ordinary case, one boundary and one deliberate failure caused by treating every comma-separated output as the same problem. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Choose ListFormat after semantic preparation, separate the documented JavaScript Intl.ListFormat mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.

Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.

Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.

1. homework dashboard: model, boundary and recovery

Create a small homework dashboard using three subjects that have tasks due today. Combine “ListFormat is a presentation service” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. reading tracker: model, boundary and recovery

Create a small reading tracker using authors chosen from a user-controlled string list. Combine “Disjunction means an or-based list” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

3. science project: model, boundary and recovery

Create a small science project using materials displayed as a conjunction and alternatives as a disjunction. Combine “Empty input produces an empty string” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

4. CCA registration: model, boundary and recovery

Create a small CCA registration using available weekdays rendered in the family interface locale. Combine “Longer lists use start, middle and end templates” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

5. family planner: model, boundary and recovery

Create a small family planner using participants whose names must keep their original order. Combine “resolvedOptions reports the effective setup” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. library catalogue: model, boundary and recovery

Create a small library catalogue using genres shown as compact metadata without inventing punctuation. Combine “Parts are for rendering, not rewriting grammar” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

7. test laboratory: model, boundary and recovery

Create a small test laboratory using zero, one, two and many elements across locales, types and styles. Combine “Cache formatters by resolved intent” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

8. design decision: model, boundary and recovery

Create a small design decision using ListFormat compared with join(), PluralRules, DisplayNames and hand-written templates. Combine “Construct with new and an explicit locale” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Frequently asked questions

How long should a practice session be?

Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or function be memorised?

No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should official documentation be used?

Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Official and supporting references

• Primary technical documentation for JavaScript Intl.ListFormat
• eduKatePunggol: How Studying Works

Return to contents