함수 유형 : 객체 안에 함수를 이용한 형태
const info = {
num1: 1,
name1: "함수",
num2: 2,
name2: "자바스크립트",
num3: 3,
name3: "리액트",
word: "실행",
result1: function(){
document.write(info.num1 + ". " + info.name1 + "가 " + info.word + "되었습니다", "<br>");
},
result2: function(){
document.write(info.num2 + ". " + info.name2 + "가 " + info.word + "되었습니다", "<br>");
},
result3: function(){
document.write(info.num3 + ". " + info.name3 + "가 " + info.word + "되었습니다", "<br>");
},
}
info.result1();
info.result2();
info.result3();
}결과
객체 info를 선언하고 num1~3, name1~3, result1~3 속성을 가지고 있으며 result1, result2, result3 함수는 객체 info의 속성들을 참조하며, 안에 저장된 문자열을 순서대로 호출하여 출력된다.
각 함수는 document.write( )메서드를 사용하여 num1, naem1, word, num2, name2, num3, name3 속성의 값을 조합하여 문자열을 생성하고 출력한다.
info 객체 안에는 result1, result2, result3과 같은 함수들이 포함되어 있다.
이 함수들은 객체 내부에 정의된 매서드로 해당 객체를 통해 호출할 수 있다.
즉, info.result1( ); , info.result2( ); , result3( );은 info 객체에서 result1,2,3 메서드를 호출하는 것을 의미하며, 해당 메서드가 실행되어 결과를 반환한다.
결과적으로 info.result1( );은 result1 메서드를 호출하고, 해당 메서드가 반환한 결과를 출력한다.
객체 생성자 함수
: 자바스크립트에서 객체를 생성하기 위한 함수이다.
생성자 함수는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현한다는 특징이 있다.
생성자 함수로 생성된 객체의 속성 추가나, 삭제, 변경은 다른 객체 속성에 영항을 주지 않는다.
this 키워드를 사용하여 생성될 객체의 프로퍼티 1와 메서드를 정의한다.
새로운 객체를 생성할 때마다 객체의 프로퍼티와 메서드를 각각 생성하여 사용할 수 있다.
function Func (num, name, word) {
this.num = num; //함수 안의 this는 함수를 통하여 생성되는 객체를 의미한다.
this.name = name;
this.word = word;
this. result = function () {
document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
}
}
//인스턴스 생성
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();결과
"Func" 라는 생성자 함수를 정의하고, 이를 사용하여 세 개의 인스턴스 info1, info2, info3을 생성한다.
Func 생성자 함수는 num, name, word 라는 세 개의 프로퍼티를 가지고 있으며, this 키워드를 이용하여 세 개의 프로퍼티를 현재 생성되는 객체에 할당하고 있다.
이렇게 객체 생성 시 초기값을 핼당할 수 있다.
또한, result 메서드를 this 키워드를 이용하여 생성되는 객체에 할당하고 있다.
이 메서드는 인스턴스 객체를 통해 호출된다.
각각의 인스턴스에서 result( ) 메서드를 호출하면, 해당 객체의 num, name, word 프로퍼티를 사용하여 메시지를 출력한다.
Func 라는 객체 생성자 함수를 사용하여 생성된 info1, info2, info3까지 3개의 인스턴스는 각각 num, name, word 라는 속성을 가지고 있으며, result라는 메서드를 공유한다.
이렇게 생성된 인스턴스들은 info.result1( ), inforesult2( ), inforesult3( )과 같이 메서드를 호출하여 각자의 정보를 출력할 수 있다.
인스턴스
: 객체 생성자 함수를 사용하여 만든 객체를 말한다.
객체 생성자 함수는 템플릿처럼 사용할 수 있으며, 이를 이용해 동일한 속성과 메서드를 가진 여러 개의 객체를 만들 수 있다.
객체 생성자 함수를 통해 인스턴스를 만들면, 그 인스턴스는 해당 객체의 생성자 함수에 속성과 메서드를 상속받아 사용할 수 있다.
템플릿
: 미리 만들어놓은 형태나 양식으로, 내용을 채워서 사용하는 것을 말한다.
일반적으로 HTML, CSS, Javascript 등 웹 개발에서도 많이 사용된다.
Javascript에서는 문자열을 리터럴 내에 백틱 ` 을 사용하여 멀티라인 문자열을 만들 수 있으며, 이를 활용하여 HTML 템플릿을 만들어 사용하기도 한다. 이를 템플릿 리터럴 (Template Literal)이라고 한다.
템플릿 리터럴을 사용하면, 동적으로 값이 변하는 문자열을 만들기도 쉽다.
템플릿 리터럴(Template Literal)
에크마스크립트 2015에서 도입된 새로운 문자열 표기법이다.
기존의 문자열 표기법에서는 작은 따옴표(' ')나 큰 따옴표(" ")를 사용하여 문자열을 감싸고, 변수나 표현식을 문자열 안에 삽입하기 위해 연결 연산자인 +를 사용했지만,
템플릿 리터럴에서는 역따옴표(백틱 `)을 사용하며, ${ } (달러와 중괄호)를 이용하여 문자열 내에서 변수나 표현식을 쉽게 사용할 수 있다.
ex)
기존 문자열 표기법
for(let i=2; i<=9; i++){
document.write(i + "단","<br>");
for(let j=1; j<=9; j++){
document.write(i + "X" + j + "=" + i*j);
document.write("<br>");
템플릿 리터럴
for(let i=2; i<=9; i++){
document.write(`${i}단<br>`);
for(let j=1; j<=9; j++){
document.write(`${i}X${j}=${i*j}`);
}
프로토타입 함수
: 자바스크립트에서 객체가 생성될 때, 해당 객체가 상속받는 속성들을 포함하고 있는 객체이다.
이 프로토타입 객체는 해당 객체의 생성자 함수의 prototype 속성에 저장되어 있다.
프로토타입 함수를 생성하여 생성자 함수의 prototype 속성에 할당하면, 해당 생성자 함수로부터 생성된 모든 객체가 프로토타입 함수를 상속받을 수 있다.
이를 통해, 각 객체마다 동일한 기능을 구현하는 것이 아니라 프로토타입 객체에 구현하여 모든 객체가 공유할 수 있도록 할 수 있다.
프로토타입 함수를 이용하면, 객체의 메서드를 동적으로 추가하거나, 수정하도록 할 수도 있다.
이러한 유연성과 재사용성이 강점 중 하나가 된다.
function Func(num, name, word) {
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype.result = function (){
document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
}
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();결과
생성자 함수 Func를 정의하고 Func의 프로토타입에 result 함수를 추가한 후, Func 생성자 함수로 세 개의 객체 (info1, info2, info3)를 만들어 result 함수를 호출하는 코드이다.
객체가 만들어질 때 num, name, word 프로퍼티는 Func 생성자 함수에서 this를 이용하여 각 객체에 할당된다.
그리고 Func.prototype.result에 result 함수를 추가함으로써, Func 생성자 함수로 만들어진 객체들이 result 함수를 공유할 수 있다.
세 개의 객체 info1, info2, info3의 result 함수를 호출하면, this가 info1, info2, info3 객체를 가리키게 되며, result 함수에서 해당 객체의 num, name, word 프로퍼티를 이용하여 문장을 출력하게 된다.
- 객체에서 값을 저장하거나 메서드를 포함하는 "이름 - 값" 쌍을 말한다. 객체의 프로퍼티는 "키 : 값" 형태로 구성되며, 쉽게 말해 객체의 속성이나 특정을 정의하는 것이다. [본문으로]