Q:

Why do I need to update strokeDashoffset after updating strokeDasharray?

In the following, I create a red circle that is drawn only part way around the edge. If I set strokeDasharray to 500 628, which should be the dash length and dash offset, I get the partial circle I am looking for. However, I cannot, afterwards, just set strokeDasharray = "600" afterwards to only set the dash length. I must include the dash offset as previous strokeDasharray = "600 628". 
Why can't I change the dash length by itself?
The actual code is this line: el.style.strokeDasharray="500 628";
I would just like to change it by doing this: el.style.strokeDasharray="200";

    var el=document.getElementsByTagName("circle")[0];
    el.style.strokeDasharray="500 628";
svg {
  width: 240px;
  height: 240px;
  background: #eee;
  transform:rotate(-90deg);
}
svg #shape {
  fill: none;
  stroke: red;
  stroke-width: 4;
}
<svg>
  <circle id='shape' cx='120' cy='120' r='100' />
</svg>

A:

No, the 2nd value you are passing is not the strokeDashoffset. It is a 2nd length value.
According to documentation:

A list of comma and/or white space separated lengths (which can have a unit identifier) and percentages. A percentage represents a distance as a percentage of the current viewport. A negative value is an error. If the sum of the values is zero, then the stroke is rendered as if a value of none were specified.  

You can see in this example that it is different:

svg {
  width: 240px;
  height: 240px;
  background: #eee;
  transform:rotate(-90deg);
}
svg #shape1 {
  fill: none;
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 600 100;
}
svg #shape2 {
  fill: none;
  stroke: blue;
  stroke-width: 4;
  stroke-dasharray: 600;
  stroke-dashoffset: 100;
}
<svg>
  <circle id='shape1' cx='120' cy='120' r='100' />
</svg>
<svg>
  <circle id='shape2' cx='120' cy='120' r='100' />
</svg>

