2023/04/07__JavaScript__03
** 객체(object) **
1. 여러 개의 값을 가지는 자료구조
2. 값은 이름: "값" 쌍으로 기록
3. 일반적으로 const 키워드로 선언
* 객체 정의
1. 객체 리터럴을 사용하여 정의
const person = {firstName="John", lastName:"Doe", age:50, eyeColor:"blue"};2. 공백, 줄바꿈 무관
3. 여러 줄에 걸쳐 객체 정의 가능
const person = {
firstName: "John",
lastName: "Doe",
age:50,
eyeColor:"blue"
};* 객체 생성자
1. 생성자 함수의 이름 첫 글자는 가급적 대문자 지정
# EX
function Person(first, last, age, eye){
this.firtName = first;
this.lastName = last;
this.age = age;
this.eye = eye;
}
const myFather = new Person("John", "Deo", 50, "blue");
const myMother = new Person("Sally, "Rally", 48, "green);
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ".";2. 프로토타입 상속
Person.prototype.nationality = "English";
document.getElementById("demo").innerHTML = "The nationality of my father is " + myFather.nationality;
3.prototype 속성을 이용한 메서드 추가
const person = {firstName="John", lastName:"Doe", age:50, eyeColor:"blue"};
Person.prototype.name = fuction(){
return this.firstName + " " + this.lastName;
};
person.name()
/// John Doe
* 객체 속성
1. 이름 : 값 의 쌍
*개체 속성에 액세스
1. objectName.propertyName
2. objectName.["propertyName "]
* 속성 추가
1. 단순히 값을 지정하여 기존 개체에 새 속성 추가
# EX
person.nationality = "English";
||
// const person = {nationality="English"}* 속성 삭제
1. delete 키워드 : 속성과 값 모두 삭제
# EX
const person = {
firstName: "John",
lastName: "Doe",
age:50,
eyeColor:"blue"
};
delete person.age;
또는
delete person["age"]* 중첩 개체 엑세스
1. 개체의 값에 다른 객체 사용
# EX
myObj = {
name:"John",
age:30,
cars:{
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}2. 점(.) 표기법 또는 대괄호 표기법을 사용하여 중첩된 객체에 액세스
# EX
- myObj.cars.car2;
- myObj.cars["car2"];
- myObj["cars"]["car2"];
- let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];* 객체 메서드
1. 객체에 대해 수행할 수 있는 작업
2. 함수정의로 속성에 저장
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function(){
return this.firstName + " " + this.lastName;
}
};* 객체 메서드 사용
1. objectName.methodName()
# EX
name = person.fullName();2. () 괄호 없이 메서드에 액세스하면 함수 정의 반환
# EX
name = person.fullName;* 객체 반복(for .. in)
const person = {
fname:"John",
lname:"Doe",
age:25
};
for (let x in person) {
txt += person[x];
}1. x는 속성 변환
2. 속성값 반환 : 변수명[객체를 담은 변수]
* 중첩 배열 및 객체 반복
1. 객체의 값은 배열이 될 수 있고 배열의 값은 객체가 될 수 있음
#EX
const myObj = {
name: "Jonh",
age: 30,
cars: [
{name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]},
]
}
for (let i in myObj.cars) {
x += "<h1>" + myObjs.cars[i].name + "</h1>";
for (let j in myObjs.cars[i].models) {
x += myObj.cars[i].models[j]
}
}* JSON.stringify() ( <--> JSON.parse())
1. JavaScript 함수를 사용하여 모든 JavaScript 객체를 문자열로 변환
# EX
const person = {
name:"John",
age:30,
city:"New York"
};
let myString = JSON.stringify(person);
# Result : JSON 표기법(문자열)
{"이름":"존","나이":50, "도시":"뉴욕"}* 객체 접근자
1. get : 객체 속성값 가져오기
#EX)
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.languasge;
}
};
document.getElementById("demo").innerHTML = person.lang;2. set : 객체 속성값 변경(정의)하기
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
return this.languasge;
}
};
person.lang = "en";
document.getElementById("demo").innerHTML = person.language;3. 함수방식과 속성 방식
1. fullName : function() { } - 함수 방식
- person.fullName()
2. get fullName() { } - 메소드 방식
- person.fullName
* Javascript 문자열
1. 텍스트를 저장하고 조작하기 위한 자료형
2. 따옴표 안에 쓰여진 0개 이상의 문자
#EX)
let text = "John Doe";
let text = 'John Doe';3. 문자열을 둘러싼 따옴표와 일치하지 않으면 문자열 내에서 따옴표 사용가능
#EX)
let answer1 = "It's alright";
let answer2 = "He is called `Johnny`";
let answer3 = 'He is called "Johnny"';* length : 문자열 길이
1. 문자열의 길이 반환
#EX)
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
let length = text.length; // 26* 이스케이프 문자
1. 백슬래시( \ ) 사용
2. 특수 문자를 문자열 문자로 변환
#EX)
--------------------------------
Code | Result | Description
--------------------------------
₩' | ' | Single quote
₩" | " | Double quote
₩₩ | ₩ | Backslash3. ₩" 시퀀스 : 문자열에 큰 따옴표 삽입
#EX)
let text = "We are the so-called ₩"Vikings₩" from the north.";4. ₩' 시퀀스 : 문자열에 작은 따옴표 삽입
#EX)
let text = 'It₩'s alright';5. ₩₩ 시퀀스 : 문자열에 백슬래시 삽입
#EX)
let text = 'The character ₩₩ is called backslash.";6. 기타 이스케이프 시퀀스
---------------------------------
Code Result
---------------------------------
₩b Backspace
₩f Form Feed
₩n New Line
₩r Carriage Return
₩t Horizontal Tabulator
₩v Vertical Tabulator- 이 6개의 이스케이프 문자는 타자기, 텔레타이프 및 팩스 기계를 제어하도록 설계
- HTML에서는 적용되지 않음
* 긴 코드 줄 끊기
1. 가독성을 위해 긴 코드 행을 여러 행으로 분리
2. 중단하기에 가장 좋은 위치는 연산자 다음
#EX)
document.getElementById("demo").innerHTML =
"Hello Dolly!!";3. 단일 백슬래시를 사용하여 텍스트 문자열 내의 코드 줄 분리
#EX)
document.getElementById("demo").innerHTML = "Hello ₩
Dolly!!";
// 1) 일부 브라우저는 문자 뒤에 공백 허용 않음4. 문자열 추가
#EX)
document.getElementById("demo").innerHTML = "Hello +
"Dolly!";5. 백슬래시로 코드 줄 분리
#EX)
document.getElementById("demo").innerHTML = ₩
"Hello Dolly!!";* 문자열 부분 추출
1. slice(start, end)
2. substring(strat, end)
3. substr(start, length)
* slice()
1. 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반화
2. 시작위치, 종료위치(끝은 포함되지 않음)의 2개 매개변수 사용
#EX) : 위치 7에서 위치 13 전 까지 문자열의 일부 추출
let text = "APPLE, BANABA, KIWI";
let part = text.slice(7,13);# 메모
1. JavaScript는 0부터 위치를 계산
0: 첫 번째 위치
1: 두 번째 위치
# EX) : 두 번째 매개변수를 생략하면 문자열의 나머지 부분 추출
let text = "APPLE, BANAN, KIWI";
let part = text.slice(7);
# EX) : 매개변수가 음수이면 문자열의 끝부터 추출
let text = "APPLE, BANAN, KIWI";
let part = text.slice(-12);
# EX) : 매개변수가 음수이면 문자열의 끝부터 추출
let text = "APPLE, BANAN, KIWI";
let part = text.slice(-12, -6);* substring()
1. slice()와 유사
2. ()보다 작은 시작 및 끝 값은 에서 0으로 처리
#EX)
let str = "APPLE, BANANA, KIWI";
let part = srt.substring(7,13);
#EX) : 두번째 매개변수를 생략하면 나머지 문자열 반환
let str = "APPLE, BANANA, KIWI";
let part = srt.substring(7,13);* substr()
1. slice()와 유사
2. 두 번째 매개변수가 추출된 부분의 길이를 지정
#EX)
let str = "APPLE, BANAN, KIWI";
let part = str.substr(7,6);
#EX) : 두 번째 매개변수를 생략하면 나머지 문자열 반환
let str = "APPLE, BANAN, KIWI";
let part = str.substr(7);
#EX) : 첫 번째 매개변수가 음수이면 문자열의 끝부터 계산
let str = "APPLE, BANAN, KIWI";
let part = str.substr(-4);*replace()
1. 지정된 값을 문자열의 다른 값으로 변경
#EX)
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "APPLE");2.replace()메서드는 호출된 문자열을 변경하지 않고 새 문자열 반환
3.첫 번재 일치 항목만 변경
4. 모든 일치 항목을 바꾸면 /g 플래그가 설정된 정규식 사용
#EX) : 첫 번째 일치 항목만 변경(기본)
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "APPLE");5. 대/소 문자 구분
#EX)
let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "APPLE");6. 대소문자를 구분하지 않으려면 정규 표현식을 /i 플래그 (구별하지 않음) 사용
#EX)
let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "APPLE");* replaceAll()
1. 문자열 모두 바꾸기
#EX)
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");2. 바꿀 문자열 대신 정규식 지정 가능
3. 매개변수가 정규식이면 전역 플래그(g) 설정 필수
(TypeError)
#EX)
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");* 대/소문자 변환
1. toUpperCase()
2. toLowerCase()
#EX)
let text1 = "Hello World!";
let text2 = text1.toUpperCase();
let text3 = text1.toLowerCase();* concat()
1. 두 개 이상의 문자열을 결합
#EX)
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ", text2)2. 더하기 연산자 대신 사용 가능
#EX)
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!")# 메모
1. 모든 문자열 메서드는 원래 문자열을 수정하지 않고 새 문자열을 반환
2. 문자열은 변경할 수 없으며 교체만 가능
*trim()
1. 문자열 양쪽의 공백 제거
#EX)
let text1 = " Hello World! ";
let text2 = text1.trim();
javascript 문자열 trimStart()2. trimStart() : 문자열 시작 부분에서만 공백제거
#EX)
let text1 = " Hello World! ";
let text2 = text1.trimStart();3. trimEnd() : 문자열 끝에서만 공백 제거
#EX)
let text1 = " Hello World! ";
let text2 = text1.trimEnd();* padStart(), padEnd()
1. 주어진 길이에 도달할 때까지 다른 문자열로 채우기
2. 문자열의 처음부터 채우기
*문자열 문자 추출
1. charAt(position)
2.charCodeAt(position)
3. 속성 액세스 []