위 문제를 이해하는데 어려움이 있었다. 완벽하게 이해를 하고 다음으로 넘어가는 편이 좋다고 판단하여 복습을 해 보았다.
객체의 기본 원리
객체 파트 전까지는 변수에 값을 하나씩 지정했지만 위 사진처럼 객체를 활용하면 다양한 값을 중괄호 안에 한번에 지정할수 있다.
Ex) 프로퍼티 이름: 값,
위 형식으로 만들어야 하고 이름과 값 사이를 :로 구분하며 다음 값은 ,로 구분한다.
객체 데이터 접근하기
객체 안의 데이터에 접근하는 방법으로는 점 표기법, 대괄호 표기법이 있다.
점 표기법 - console.log(객체이름.프로퍼티이름); 결과 = 프로퍼티 값
대괄호 표기법 - console.log(객체이름['프로퍼티이름']); 결과 = 프로퍼티 값
객체 다루기
위 사진과 같이 console.log(codit.name); 을 하면 위 객체의 name값으로 지정된 코드잇 값이 나온다.
하지만 codeit.name = "codeit"; 이라고 값을 다시 지정해주면
console.log(codit.name); 을 다시 불러냈을때 새로지정된 codeit값을 불러오는걸 볼 수 있다.
위 그림처럼 객체 안에 없던 ceo에 값을 지정해주고 console를 불러내면 값이 나오는 것을 알수있다.
delete codeit.worstCourse; 문을 통해 객체 안에 있던 worstCourse의 값을 삭제 할 수 있다.
위 사진과 같이 in 을 통해 codeit 객체의 name 프로퍼티에 값이 지정 되어 있는지 알아볼 수 있다.
console.log(codeit.name !== undefined 문을 통해서도 알수 있지만, 어떠한 프로퍼티 이름에 지정된 값이 undefined일 경우 값이 지정되어 있지 않다고 나올수 있어 in을 쓰는편이 더 정확하다.
객체와 메소드
객체에는 어떠한 값도 넣어줄 수 있기 때문에 함수를 넣을수도 있다. 여기서 객체 안의 함수를 메소드 라고 한다.
이름: function () {
console.log(값);
}
위 형식으로 만들어지며 맨 처음 단어가 함수의 이름이다. 위 사진과 같이 greetings.sayHello(); 를 작성하면 greetings객체 안의 정의된 sayhello 메소드값이 나오는 것을 볼 수 있다.
소괄호 안의 파라미터를 활용하여 더 다양한 결과 값을 만들어 낼 수 있다.
문제가 되었던 실습 문제의 첫번째 질문
let myVoca = {
addVoca: function (key, value) {
myVoca[key] = value
},
위 코드 처럼 addVoca라는 이름의 메소드 에다가 myVoca객체에 새로운 프로퍼티를 추가하는 동작을 가진 함수를 만들 수 있다.
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);
작성한 객체와 메소드를 실행하기 위해 위 코드처럼 addVoca메소드의 파라미터에 프로퍼티 이름과 값을 지정해 준 후 myVoca객체를 실행해 주면 addVoca 메소드의 myVoca[key] = value 동작에 의해 아래의 결과 값이 나온다.
{
addVoca: [Function: addVoca],
deleteVoca: [Function: deleteVoca],
printVoca: [Function: printVoca],
parameter: '매개 변수',
element: '요소',
property: '속성'
}
여기서 엉뚱하게도 메소드에 지정된 동작 코드는 myVoca[key] = value 인데,
왜 결과값이 parameter = 매개 변수 가 아니고 : 과 , 로 되는지 하는 의문이 생겼다.
위 코드와 결과 값을 참고해 보면 아래와 같은 코드는 객체에 프로퍼티를 추가할때 사용하는 코드이다. 그리고 메소드의 동작 코드인 myVoca[key] = value 와 같은 모양이다. 당연히 실행을 하면 parameter: '매개 변수', 로 나오는것이 맞다.
여기서 대괄호 표기법을 쓴 이유는 만약 점 표기법으로 key값에 접근을 하게 되면, 파라미터 key를 가리키는 것이 아니라, myVoca에 문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문에 대괄호 표기법을 사용하였다.
myVoca.extend = '확장하다'
myVoca.export = '내보내다'
myVoca.import = '불러오다'
myVoca['default value'] = '기본값'
엉뚱한 의문으로 많은 시간을 소비하게 되었지만. 문제를 해결하기 위해 여러번 복습하고 알아보면서 더욱 단단히 객체에 대해서 알게 되었다.
앞으로도 많은 어려움이 있겠지만,
할수 있는 만큼! 대신 꾸준히 나아가는 개발자가 되겠다.😊
