Notação de ponto e colchete

Estou tentando entender a diferença entre a notação de ponto e colchete. Ao passar por vários exemplos aqui no SO e em alguns outros sites, me deparei com esses dois exemplos simples:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

var user = {
  name: "John Doe",
  age: 30
};
var key = prompt("Enter the property to modify","name or age");
var value = prompt("Enter new value for " + key);
user[key] = value;
alert("New " + key + ": " + user[key]);

O primeiro exemplo retorna y para ser indefinido se na terceira linha eu substituir oobj[x] comobj.x. Por que não"hello"

Mas no segundo exemplo a expressãouser[key] pode simplesmente ser substituído poruser.key sem nenhum comportamento anômalo (pelo menos para mim). Agora isso me confunde, como aprendi recentemente que, se queremos acessar propriedades pelo nome armazenado em uma variável, usamos a Notação de colchete [].

questionAnswers(2)

yourAnswerToTheQuestion