- Constructor constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메소드를 호출하기 전에수행해야 하는 사용자 지정 초기화를 제공할 수 있다. Class를 new를 붙여서 (new User("John")) 인스턴스 객체로 생성하면넘겨받은 인수와 함께 constructor가 먼저 실행된다.이때 넘겨받은 인수인 John이 this.name에 할당된다.class User { constructor(name) { // 인스턴스 객체를 생성하면 constructor이 먼저 호출된다. this.name = name; } sayHi() { alert(this.name); }}let user = new User("John");user.sayHi();  - 자바스크립트에서 ..

ES6에 나온 Class를 사용하여 더 쉽게 OOP를 구현할 수 있다.이것은 문법을 OOP 방식을 사용하지만 내부에서 prototype을 사용하여 작동한다.  생성자 함수로 객체를 만들었을 때는생성자 함수에 넣어둔 메소드가 인스턴스 객체 자체에 포함되어 있었지만,Class의 경우 Class 안에 넣어둔 메소드가 바로 프로토타입에 들어가게 된다. class Person { constructor(name, email, birthday) { this.name = name; this.email = email; this.birthday = new Date(birthday); } introduce() { return `Hello my name is ${this.name}`; }}cons..

let user = { name: "John", age : 45}console.log(user.name);// Johnconsole.log(user.hasOwnProperty("email"));// false - hasOwnProperty는 어디서 왔나요? 현재 user 객체 변수에는 두 개의 속성(name, age)만 있는데hasOwnProperty는 어디서 나온 것일까?(객체 내부에는 메소드가 없다.) user 객체 변수를 콘솔로 찍어보면, [[Prototype]] : Object라는 것을 확인할 수 있다.아래를 내리다보면, hasOwnProperty라는 메소드를 찾을 수 있다.그리고 우리는 이것을 가져다 사용할 수 있다.=> 모든 객체는 global Object prototype을 가지며, 이것..

Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?  - Event Listener :마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.  - addEventListener() :위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.이벤트 리스너 등록 방법을 살펴보도록 하자. 1. 자바스크립트 코드에서 프로퍼티로 등록.window.onload = function () { // 문서가 load 될 때 이 함수를 실행 let text = document.getElementById("te..

- Window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다. 이 window 객체를 이용해서1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.   - Document Object Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.  이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.아래의 코드를 사용할 것이다.  M..

지금까지 자바스크립트를 꽤나 공부해왔다고 생각했지만, 정규표현식에 관하여 제대로 접하게 된 건 이번이 처음이었다. 검색, 유효성 검사 기능을 만들 때는 chat gpt의 도움을 많이 받았다...ㅠㅠㅠㅠ 그리하여, 고심하다 시작된 정규표현식 파헤치기! 그렇게 깊게 파헤친 것은 아니다. (너무 깊게 파고들면 시간이 엄청 소요된다고 들었기 때문에 기본적인 개념과 실습 정도만 해보도록 하겠다.) - 정규표현식의 역할 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) - 테스트 사이트 https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test ..