자바스크립트에서 'this' 키워드를 사용한 블로그 제작 방법

18 Sep 2023

javascript

블로그는 많은 사람들에게 정보를 공유하고 소통할 수 있는 플랫폼입니다. 자바스크립트를 사용하여 동적인 블로그를 만들 수 있으며, ‘this’ 키워드는 블로그 제작에 매우 유용한 역할을 합니다.

‘this’ 키워드란?

자바스크립트에서 ‘this’는 현재 실행 중인 함수의 객체를 가리키는 특별한 키워드입니다. ‘this’를 사용하면 객체 내에서 프로퍼티와 메서드를 참조하거나 호출할 수 있습니다.

블로그 제작에 ‘this’ 활용하기

객체 생성하기: 블로그 포스트와 관련된 정보를 담고 있는 객체를 생성합니다.

const blogPost = {
  title: '블로그 포스트 제목',
  content: '블로그 포스트 내용',
  author: '글쓴이',
  getPostDetails: function() {
    console.log(`제목: ${this.title}\n내용: ${this.content}\n작성자: ${this.author}`);
  }
};

‘this’를 활용한 메서드 호출하기: 객체의 메서드를 호출할 때 ‘this’를 사용하여 객체 내부의 다른 프로퍼티에 접근할 수 있습니다. 예를 들어, ‘getPostDetails’ 메서드에서 ‘this’를 사용하여 블로그 포스트의 제목, 내용 및 작성자를 출력할 수 있습니다.

blogPost.getPostDetails(); // 제목: 블로그 포스트 제목
                           // 내용: 블로그 포스트 내용
                           // 작성자: 글쓴이

생성자 함수를 활용한 블로그 포스트 객체 생성하기: 블로그 포스트를 여러 개 생성해야 하는 경우에는 생성자 함수를 사용하여 객체를 생성할 수 있습니다. ‘this’를 사용하여 생성된 객체의 프로퍼티를 초기화할 수 있습니다.

function BlogPost(title, content, author) {
  this.title = title;
  this.content = content;
  this.author = author;
  this.getPostDetails = function() {
    console.log(`제목: ${this.title}\n내용: ${this.content}\n작성자: ${this.author}`);
  }
}

const post1 = new BlogPost('포스트 1 제목', '포스트 1 내용', '글쓴이1');
const post2 = new BlogPost('포스트 2 제목', '포스트 2 내용', '글쓴이2');

post1.getPostDetails(); // 제목: 포스트 1 제목
                        // 내용: 포스트 1 내용
                        // 작성자: 글쓴이1
post2.getPostDetails(); // 제목: 포스트 2 제목
                        // 내용: 포스트 2 내용
                        // 작성자: 글쓴이2

결론

이처럼 ‘this’ 키워드는 자바스크립트에서 객체 내부에서 다른 프로퍼티 및 메서드를 참조 또는 호출하는 데 사용될 수 있습니다. 블로그 제작에 ‘this’를 활용하면 동적이고 유연한 블로그를 만들 수 있습니다.

#javascript #프로그래밍언어