JavaScript .05
004. 객체와 메소드(Method)
연관성 있는 여러 함수들을 하나로 묶고 싶은경우(=객체)
객체의 프로퍼티는 어떤 자료형이든 저장할수가 있기 때문에 프로퍼티값으로 함수를 넣어주면 된다
let greetings = { // sayHello, sayHi, sayBye : 세가지의 메소드
sayHello: function() { // sayHello(프로퍼티네임) = 함수이름대신사용
console.log("hello!");
},
sayHi: function() {
console.log("hi!");
},
sayBye: function() {
console.log("BYE");
}
};
greetings.sayHello(); //"hello!"
// 파라미터 사용시
let greetings = { // sayHello, sayHi, sayBye : 세가지의 메소드
sayHello: function(name) { // sayHello(프로퍼티네임) = 함수이름대신사용
console.log(`Hello ${name}!`);
},
sayHi: function() {
console.log("hi!");
},
sayBye: function() {
console.log("BYE");
}
};
greetings.sayHello("JM"); //(=console.log와 모양이 비슷 콘솔이라는 객체의 로고 메소드)
greetings["sayHello"]("JM"); //대괄호표기법 : [프로퍼티에 먼저접근](메소드 호출)
- 메소드를 사용해서 함수를 사용하는 이유 메소드는 어떤 객체의 고유한 동작으로써 함수에 의미를 부여할수 있어서!
-
메소드를 활용하면 다른 함수의 이름 중복을 피할수 있음
-
좀더 객체에 집중해서 함수의 동작 부분을 작성할 수가 있음
-
사용할때도 객제의 고유한 동작으로 구분할수 있기때문에 좀더 의미있는 코드로 활용가능
let rectAngle = { width: 30, height: 50, getArea: function() { return rectAngle.width * rectAngle.height; } } let triAngle = { width: 15, height: 40, getArea : function() { return triAngle.width * triAngle.height / 2; } } // 메소드를 활용하면 다른 함수의 이름 중복을 피할수 있음 // 좀더 객체에 집중해서 함수의 동작 부분을 작성할 수가 있음 // 사용할때도 객제의 고유한 동작으로 구분할수 있기때문에 좀더 의미있는 코드로 활용가능
-
예제(영단어 추가 삭제 출력)
- 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용
- 메소드도 프로퍼티기 때문에, 잊지 말고 꼭 쉼표로 각 프로퍼티를 구분
let myVoca = {
// 코드를 작성해 주세요.
addVoca : function(word,meaning) {
myVoca[word] = meaning; // 파라미터로 다른 변수에 담긴값을 가져올때 : [표기법]
},
deleteVoca : function(word){
delete myVoca[word]; //메소드도 프로퍼티기 때문에 꼭 쉼표로 각 프로퍼티를 구분
},
printVoca : function(word) {
console.log(`"${word}"의 뜻은 "${myVoca[word]}"입니다.`);
}
};
// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);
// // deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);
// // printVoca메소드 테스트 코드
myVoca.printVoca('property');
005. for...in 반복문
객체안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할때사용
- 객체의 프로퍼티 네임을 가져오는 반복문이기 때문에 일반적인 for문으로는 대체할수 없는 특별한 반복문
- 객체 내부에 있는 모든 프로퍼티 값들을 하나씩 다루어야 하는경우 사용
(특정한 변수 in 반복할 객체) : 객체의 프로퍼티 네임이 변수에 할당 -> 객체에 프로퍼티 개수만큼 반복동작
for(변수 in 객체) {
// (특정한 변수 in 반복할 객체) : 객체의 프로퍼티 네임이 변수에 할당 -> 객체에 프로퍼티 개수만큼 반복동작
동작부분
};
let miinii = {
name : "MIINII",
bornYear : 1800,
insungGood : true,
worst : null,
bestPoint : "미니공주"
}
for (let key in miinii) { //key라는 변수에 miinii의 프로퍼티 개수만큼 반복
console.log(key);
}
for (let key in miinii) { //key라는 변수에 miinii의 프로퍼티 개수만큼 반복
console.log(key); // 네임
console.log(miinii[key]); // 대괄호 : 프로퍼티값(벨류)에도 접근
}
Author And Source
이 문제에 관하여(JavaScript .05), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@miinii/JavaScript-.05저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)