[목차]
- 메서드
- 생성자 함수
function showMessage() {
}
const showMseeage2 = function () {}
const showMessage3 = () => {}1. 메서드(method)
const user = {
name: 'Joo',
sum : function (a,b) {
return a+b
},
}객체의 프로퍼티가 함수일 경우, 이 함수를 메서드라 부른다.
const user2 = {
name: '고 길동',
age: 32,
sayHi : function() {console.log(this.name + "님 안녕하세요.")},
// setFirstName: function () {
// const arrName = this.name.split(" ")
//.split(" ") 띄어쓰기를 기준으로 배열을 잘라서 다른 배열에 담겠다는 의미
// // ["고", "길동"]
//.split("")은 모든 글자를 하나씩 잘라서 각기 다른 배열에 담겠다는 뜻
// this.firstName = arrName[1]
// },
// setLastName: function () {
// const arrName = this.name.split(" ")
// // ["고", "길동"]
// this.lastName = arrName[0]
// },
setName : function () {
const arrName = this.name.split(" ")
this.firstName = arrName[1]
this.lastName = arrName[0]
}, // 더 효율적인 코드
// setter로 값을 넣고(속성을 직접 기입) getter로 값을 가져온다.(method)
}this
여기서는 객체를 가리킴. (user2 === this)
추후에 다시 한 번 다루기로.
// user.name
// user.firstName
// user.lastName
메서드를 쓰지 않고 속성을 일일이 기입하는 것은 비효율적이다.
위와 같이 split 메서드를 이용해서 성과 이름이 분리하는 것이 간편.
.split()
let nm = "홍 길동" // length 4
let arr = nm.split(" ")
// ["홍", "길동"]. 띄어쓰기를 기준으로 split.(index 배열 2개를 만든다.)
console.log(arr[0]) // > 홍
console.log(arr[1]) // > 길동
console.log(arr[0].length) // > 1
console.log(arr[1].length) // > 2문자열을 특정 기준에 따라 자르고 싶을 때 사용하는 메서드.
(메서드의 리턴값은 배열이다.)
메서드의 종류와 용법을 되도록 많이 알아둘 것.
각 메서드의 리턴값이 무엇인지 아는 것도 중요하다.
(.replace(), .trim(), .split()...)
let str = " 자바스크립트 "
// string
console.log(str.length) // > 8. (따옴표 앞뒤로 띄어쓰기 포함 8글자)
console.log(str) // > [ 자바스크립트 ]
console.log(str.trim()) // > [자바스크립트]. 앞뒤 빈공간을 제거해서 출력한다.
// 찾아 바꾸기(.replace())
// string.replace(1. 찾을 단어, 2. 바꿀 값)
// (.replace() 메서드는 인자값이 두 개다)
console.log(str.replace("스크립트", "")) // > [ 자바 ] 출력
console.log(str)
// > [ 자바스크립트 ]. 참조형태이기 때문에 원본은 해치지 않는다.
// const replaceTXT = str.replace("스크립트", "2")
// conesole.log(replaceTXT)getter 와 setter
const user3 = {
name: "김XX",
lastName: "",
firstName: "",
// setName: function () {}
set _name (value) { //김XX라는 글자가 매개변수(value)로 전달
console.log(value)
const arr = value.split("")
this.name = value //현재 name
this.lastName = arr[0]
this.firstName= arr[1] + arr[2]
},
get _name () {
return this.firstName + " " + this.lastName
},
}user3.setName() // method를 만들더라도 매번 호출을 해야한다. (비효율적)
자바스크립트에는 get, set이라는 키워드가 숨겨져 있다.
user3._name = "김XX" // setter. 객체 안에 속성값을 입력할 때 쓰는 함수
console.log(user3)
// getter
console.log(user3._name) // > XX 김 출력
getter, setter를 쓰면 함수호출 과정이 필요없어진다.
(쓸 일은 거의 없다. 알아두는 것 자체에 의미를 두기로)
2. 생성자 함수
다음과 같이 객체를 찍어낼 '틀'을 만드는 함수가 존재한다. (줄여서 생성자)
function user4(_name, _lastName, _firstName, _age) {
// 매개변수가 속성값에 대응하도록 함수를 만든다
return {
name: _name,
lastName: _lastName,
firstName: _firstName,
age: _age,
}
}
const JH = user4('KimJH', 'Kim', 'JH', 32)
// 각 인자가 객체 틀에 담길 속성값이 된다.
const DD = user4('LeeDD', 'Lee', 'DD', 28)
const 배열 = [JH,DD]
console.log(JH)
// > {name: 'KimJH', lastName: 'Kim', firstName: 'JH', age: 32}
console.log(DD)
// > {name: 'KimJH', lastName: 'Kim', firstName: 'JH', age: 32}
console.log(JH === DD) // false
// 같은 객체 틀을 쓰지만 서로 다른 메모리 주소를 참조하고 있다 function User5(name,age) {
// 이때는 카멜표기법이 아닌 첫글자를 대문자로. (Java식 표기법)
this.name = name
this.age = age
const GG = new User5("ParkGG", 30)
// new 연산자. '인스턴스'(새 객체)를 생성해주는 역할을 한다.
const MR = new User5("LeeMR", 29)
console.log(GG) // User5 {name: 'ParkGG', age: 30}
console.log(GG === MR) // false
// 이 역시 다른 메모리 주소를 참조하고 있기 때문에 속성값을 바꿀 때 서로간 간섭이 없다
class User6 {
//생성자
constructor (name,age) {
this.name = name
this.age = age
}
}
const GD = new User6("KwonGD", 33)
console.log(GD) //User6 {name: 'KwonGD', age: 33}이 역시 동일한 문법. class도 객체를 찍어내는 틀 역할을 한다
(Java 문법을 자바스크립트에서도 쓸 수 있도록 추가했기 때문.
프로그래밍 언어는 통하는 부분들이 많다.)
