#TIL 객체에 접근 하는 두 가지가 있는 이유

1. 도트 접근법 [Dot nation]🤔

• 점 접근 방법 : object.property

let superman = {
  name : 'clark',
  age : 30,
  gender : 'male'
}

console.log(superman.name);				// "clark"
console.log(superman.age);				// 30
console.log(superman.gender);			// "male"

2. 대괄호 접근법 [Bracket nation]🧐

• 대괄호 접근 방법 : object['property']

let superman = {
  name : 'clark',
  age : 30,
  gender : 'male'
}

console.log(superman['name']);			// "clark"
console.log(superman['age']);			// 30
console.log(superman['gender']);		// "male"

3. 🌈두 접근 방법의 차이점과 예시

	Dot Nation	Bracket Nation
$ 또는 _ 포함, 시작	O	O
숫자로 시작	X	O
특수 문자로 시작	X	O
띄어 쓰기 포함	X	O
변수 포함	X	O
동적 접근	X	O

3.1 $와'_'가 포함된 예시

let test1= {
    $test : '$test',
    te$st : 'te$st',    _test : '_test',
    te_st : 'te_st'
}

//[Dot nation]//
console.log(test1.$test)			// $test
console.log(test1.te$st)			// te$st
console.log(test1._test)			// _test
console.log(test1.te_st)			// te_st

//[Bracket nation]//
console.log(test1['te$st'])			// $test
console.log(test1['$test'])			// te$st
console.log(test1['_test'])			// _test
console.log(test1['te_st'])			// te_st

3.2 숫자포함, 숫자시작, 숫자로된 예시

let test2= {
	one1 : '십일',
	'2two' : '이십이',
	33 : '삼십삼'
}

//[Dot nation]//
console.log(test2.one1);		// 십일
console.log(test2.2two);		// Syntex Error	
console.log(test2.33);			// Syntex Error


//[Bracket nation]//
console.log(test2['one1'])		// 십일
console.log(test2['2two'])		// 이십이
console.log(test2['33'])		// 삼십삼

3.3 특수문자 시작, 특수문자 포함, 특수문자로만된 예시

let test3 = {
  '!test' : "!test",
  'te!st' : "te!st",
  '!!!!'  : "!!!!"
}


//[Dot nation]//
console.log(test3.!test)		// Syntex Error	
console.log(test3.te!st)		// Syntex Error	
console.log(test3.!!!!)			// Syntex Error	

           
//[Bracket nation]//
console.log(test3['!test'])		// !test
console.log(test3['te!st'])		// te!st
console.log(test3['!!!!'])		// !!!!

3.4 띄어쓰기포함, 띄어쓰기로만 된 예시

let test4 = {
  'te st' : "1test",
  'test' : "2test",
  ' '  : "3test"
}


//[Dot nation]//
console.log(test4.te st)		// Syntex Error	
console.log(test4.'test')		// 2test
console.log(test4.' ')			// Syntex Error	

//[Bracket nation]//  
console.log(test4['te st'])		// 1test	
console.log(test4['test'])		// 2test
console.log(test4[' '])			// 3test 공백만 넣어도 가능

3.5 변수가 포함된 예시

let test4 = { 
  Country : ['england', 'swiss']
} 
let myCountry = 'Country' 


//[Dot nation]//
console.log(test4.myCountry);        // undefined

//[Bracket nation]//  
console.log(test4['Country']);  	// ["england","swiss"]
console.log(test4[myCountry]);      // ["england","swiss"]

let test4 = { 
  Country : ['england', 'swiss'],
  myCountry : "My Country is Korea"       // myCountry 추가
} 
let myCountry = 'Country' 


//[Dot nation]//
console.log(test4.myCountry);        // "My Country is Korea"
// myCountry를 객채안의 Key로 인식


//[Bracket nation]// 
console.log(test4['Country']);  	// ["england","swiss"]
console.log(test4[myCountry]);  	// ["england","swiss"]
// myCountry를 변수로 인식

3.6 동적 접근 예시

let test5 = {
  Country : 'Korea'
}

console.log(test5.'Coun'+'try');		// Syntex Error	
console.log(test5['Coun'+'try']);		// Korea

📚참고 자료📚
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors
https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781