[JavaScirpt] 객체 활용하기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

이전 포스팅을 통하여 객체의 Create, Iterate, Property & Method 에 대해서 배워 보았는데요,

오늘은 이를 활용하여 이전에 완성 하지 못했던 코드를 완성 해보려고 합니다.

---

 

객체의 형식으로만 코드를 변경 해두고, 객체 생성을 하지 않아서 해당 코드로는 원하는 결과물을 출력할 수 없었습니다.

 

함수의 이름으로 중복되지 않도록 해두었던 코드들을 변경하여 하기와 같이 객체 생성을 해보았습니다.

 

 

Body 객체 안에

let Body = {setColor:function (color){document.querySelector('body').style.color= color;},

setBackgroundcolor:function (color){document.querySelector('body').style.backgroundColor=color;}}

로 프로퍼티와 메소드를 주어 객체를 이용하여 색을 바꿔주는 동작을 수행할 수 있는 코드를 만들었습니다.

Body.setBackgroundcolor('black');
      Body.setColor('white');

 

Links 객체에도 동일하게 프로퍼티와 메소드를 주어 Links 객체를 생성하였습니다.

 

---

의문점

객체를 활용하므로써, 코드를 직관적으로 만들 수 있었지만 두 가지의 의문점이 발생하였습니다.

 

①

이전 포스팅에서 객체 생성 시 하기와 같이 코드를 입력했습니다.

 

  let friends = {"me":"chany","boyfriend":"mini"};

프로퍼티를 정의할 때는 ""(큰 따옴표) 안에 묶어서 정의

 

let Body = {setColor:function (color){document.querySelector('body').style.color= color;}

함수를 정의할 때는 ""(큰 따옴표) 없이 정의하는 것에 의문점이 들었습니다.

 

이에 대한 궁금증은 하기와 같이 해결할 수 있었습니다.

↓

프로퍼티 키는 문자열이므로 일반적으로는 문자열을 지정

문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 됨

문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하므로 따옴표를 사용

 

하지만, 자바스크립트에서 사용 가능한 유효한 이름의 경우 ""(큰 따옴표)를 생략할 수 있음

 

ex) 프로퍼티 키 first-name 에는 반드시 따옴표를 사용해야 하지만 first_name 에는 생략 가능

first-name은 자바스크립트에서 사용 가느한 유효 이름이 아니라 '-' 연산자가 있는 표현식이기 때문임을 확인하였습니다.

 

②

알고 있던 function 문법은 function 함수이름 () { ~ } 이였습니다만,

let Body = {setColor:function (color){document.querySelector('body').style.color= color;}

객체 내에 메소드를 입력 할 때에는 function 뒤에 이름이 정의 없이 출력이 가능

 

이에 대한 궁금증은 하기와 같이 해결할 수 있었습니다.

↓

Body.setColor가 곧 function 이므로 굳이 따지자면 function 의 이름은 setColor가 되므로,

객체 내에서 메소드를 표현할 땐 이름 지정을 안 해도 됨을 알 수 있었습니다.