[JAVASCRIPT] 객체

Programming/HTML+ CSS + JAVASCRIPT

[JAVASCRIPT] 객체

너굴위 2023. 8. 11. 12:26

728x90

이전 포스팅 정리

[선언 함수]

function 함수명(parameter...){

return

}

[익명함수]
const 참조변수=function(parameter...){
return;
};

[화살표함수]
const 참조변수 = (parameter)=> {return};

[호출 ]
프로그램
함수명(참조변수명)(parameter..);
html
이벤트에 포함
onclick="함수명(참조변수명)()"

[{}블럭]

1. 코드

2. 제어문

3. 함수

변수사용영역

[배열]

- 한 개의 변수에 여러 개의 데이터를 저장 => index사용하여 데이터를 구분

=> (참조)변수에 저장되는 내용 (실제 데이터가 아니라 참조 주소값)

기본 변수 = 변수 안에 직접적으로 변수가 있음

참조 변수 = 변수가 참조할 주소값을 받아옴

=> 얕은복사(참조값/주소값)/깊은복사(값)

1. 선언

[]

2. 길이

.length

3.데이터

[인덱스]

4. 전체데이터

기본 for

for in

for of

5. 1차원/2차원

*구구단 풀이 (쬠 어려움)

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

//단수를 입력받아서 구구단 출력

//출력, 입력

const gugudan=function(num){ //단에 따라 다른 구구단을 표시하도록 하는 함수

let html= '<table border="1" width="200">';

for(let row=1;row<=9;row++){

html+='<tr>';

html+= '<td align="center">'+num+'X'+row+'='+num*row+'</td>';

html+='</tr>';

}

html+='</table>';

return html;

};

</script>

</head>

<body>

//함수를 사용하여 구구단 출력

document.write(gugudan(1));

</script>

</body>

</html>

[객체(Object)]

객체/ 클래스

자동차(현대)

=>프로그램 관리

공통데이터

객체

사물

아반떼 자동차 카탈로그를 통해 확인가능 변수(아반떼)

소나타 문법- 클래스 -데이터변수(소나타)

그랜저 변수(그랜저)

인스턴스 (참조변수/객체변수)

==============================

추상화(abstraction) (공통화,요약)

=> 그림 (UML)

속성-값->변수 - 멤버변수(property, member field)

기능- 동작 ->함수 - 메서드(method)

클래스

- 사용자 정의 클래스

- 내장 클래스 (객체)

Object

- 외부 클래스 (외부 업체에서 제공:라이브러리)

- 외부 클래스에서는 메서드 많이 사용 (멤버필드는 별로 많이 사용하지 않,,,ㅎ)

클래스명 - 식별자

대문자로 시작

선언 클래스

class 클래스명 {

멤버 필드

메서드

}

익명 클래스

const 객체변수명 = class{

}

*클래스 선언과 사용

<!DOCTYPE html>

<head>

<title>Document</title>

class Student{

//멤버필드 선언

name='홍길동';

kor= 90;

mat=92;

}

</script>

</head>

<body>

let stu1= new Student();

console.log(stu1);

// . 객체참조 연산자

console.log(stu1.name);

console.log(stu1.kor);

console.log(stu1.mat);

let stu2= new Student();

console.log(stu2.name);

console.log(stu2.kor);

console.log(stu2.mat);

</script>

</body>

</html>

* this (자기참조)

<!DOCTYPE html>

<head>

<title>Document</title>

class Student{

name='홍길동';

showStudent(){

//console.log('showStudent() 호출', this);

console.log('showStudent() 호출', this.name); //객체 안에서 this자기참조를 통해 name을 가져와 함수 안 콘솔에서 띄우는 것

//this : 자기참조

//지역변수

let name='손수빈';

console.log('showStudent()호출',name); //함수 안의 지역변수를 설정해 함수 안 콘솔에서 띄우는 것

}

</script>

</head>

<body>

let stu1= new Student();

//console.log(stu1);

stu1.showStudent(); //클래스 안 메서드 호출

</script>

</body>

</html>

*객체 멤버변수의 초기화

<!DOCTYPE html>

<head>

<title>Document</title>

class Student{

//멤버변수의 초기화

//생성자 (constructor)

//setter/getter

//멤버변수의 선언이 없으면 자동선언된다. =>초기화

constructor(){

console.log('생성자 호출');

this.name='손수빈';

this.kor=92;

this.mat=94;

}

showStudent(){

console.log(this.name);

console.log(this.kor);

console.log(this.mat);

}

</script>

</head>

<body>

//new+생성자 =>메모리를 생성하는 동시에 생성자를 초기화 시킨다.

let stu1= new Student();

console.log(stu1); //얘는 객체를 출력하는 것

stu1.showStudent(); //얘는 객체 안 함수를 참조하는 것 (함수 안 콘솔이 작동해서 출력됨)

</script>

</body>

</html>

#constructor?

클래스는 초기화를 위하여 생성자(constructor)라는 특별한 코드 블록을 가질 수 있다. 즉, 생성자는 클래스가 new 표현식에 의해 인스턴스화되어 객체를 생성할 때 객체의 레퍼런스를 생성하기 전에 객체의 초기화를 위해 사용되는 코드의 블록이다.

참조

https://javacan.tistory.com/entry/37

* 얕은복사의 예시

<!DOCTYPE html>

<head>

<title>Document</title>

class Student{

constructor(name,kor,mat){

this.name= name;

this.kor=kor;

this.mat=mat;

}

showStudent(){

console.log(this.name);

console.log(this.kor);

console.log(this.mat);

}

</script>

</head>

<body>

//new+생성자 =>메모리를 생성하는 동시에 생성자를 초기화 시킨다.

let stu1= new Student('손수빈',90,92); //new Student는 공간을 만드는 방법이다.

stu1.showStudent();

let stu2=stu1;

console.log(stu2);

console.log(stu1.name);

console.log(stu2.name);

stu2.name='홍길동'; //stu2.name을 바꿨는데 stu1.name도 바뀐 이유는 같은 메모리 주소를 참조했기 때문이다.

console.log(stu1.name);

console.log(stu2.name);

</script>

</body>

</html>

*setter과 getter을 통해 데이터를 변경하고 가져오기

<!DOCTYPE html>

<head>

<title>Document</title>

class Student{

//name='홍길동';

//setter-변경

//set멤버필드이름 = setName

//getter-읽기

//get멤버필드이름 = getName

//set을 통해 초기화 작업을 할 수 있다.

setName(name){ //데이터를 변경함

this.name=name;

}

getName(name){ //데이터를 가져옴

return this.name;

}

</script>

</head>

<body>

let stu1=new Student();

//멤버필드를 직접 변경

/*console.log(stu1.name);

stu1.name='손수빈';

console.log(stu1.name);*/

stu1.setName('손수빈'); //setter과 getter으로 필드를 변경하고 불러올 수 있음

console.log(stu1.getName());

</script>

</body>

</html>

*익명 클래스로 호출하기

<!DOCTYPE html>

<head>

<title>Document</title>

const Student=class{

showStudent(){

console.log('showStudent 호출');

}

</script>

</head>

<body>

let stu1=new Student();

stu1.showStudent();

</script>

</body>

</html>

클래스 안에는 여러 인스턴스(객체)들이 있을 수 있으며 이를 참조하여 사용할 수 있다.

[JSON] - Javascript object notation)

1. Object표시법

2. 프로그램 데이터 교환하는 프로토콜

!!!문자열 조작 관련 메서드(암기)!!!

<!DOCTYPE html>

<head>

<title>Document</title>

</script>

</head>

<body>

//String

let str1='Hello';

let str2= new String('Hello');

//형태는 달라도 메서드 사용법은 같음

console.log(typeof str1);

console.log(typeof str2);

let str ="Hello String 안녕";

//문자열의 길이

console.log(str.length);

//문자 분리

console.log(str[0]);

let char=str.charAt(0); //String으로 저장된 문자열 중에서 한 글자만 선택해서 char타입으로 변환

console.log(char);

console.log(str.charAt(str.length-1)); //0부터 시작하기 때문에 -1해줘야 마지막 문자열을 나타낼 수 있다.

//문자열 추출

//substr, substring, slice

console.log(str.substr(6)); //6번째부터 끝까지 출력

console.log(str.substr(6,5)); //6번째부터 5개까지 출력

console.log(str.substring(6,9));

//substring (n,m) --> n부터 m까지(인덱스 기준)

//slice()

//문자열 검색 : 위치

//indexOf, lastIndexOf //search / match

console.log(str.indexOf('S')); //문자열의 처음부터 몇번째에 해당 문자가 있는지 확인

console.log(str.lastIndexOf('S')) //문자열의 마지막부터 몇 번째에 해당 문자가 있는지 확인

console.log(str.indexOf('S',7)); //숫자 기준으로(인덱스) 몇 번째에 해당 문자가 있는지 확인

console.log(str.search('a')); //결과는 -1

// search() - 첫번째로 매칭되는 것의 인덱스를 반환하며, 일치하는 부분이없다면 -1을 리턴한다.

//match() - 매칭되는 것이 있다면 매칭된 문자열을 출력한다.

//대소문자 변환 toUpperCase() / toLowerCase()

console.log('abc'.toUpperCase()); //소문자->대문자

console.log('ABC'.toLowerCase()); //대문자->소문자

//문자열 치환

console.log(str.replace('Hello', '안녕')); //앞에 있는 문자를 뒤에 있는 문자로 치환할 수 있음 (Hello->안녕)

console.log(str.replaceAll('Hello', '안녕')); //replace와 동일한 결과 나옴

//문자열 검색

//startsWith(~시작: true) /endsWith(~끝: true)

//문자열 결합: +

console.log(str.concat('1')); //기존 문자열에 연결되어 나타낼 수 있다.(가변인자이기 때문에 몇 개를 계속 써도 상관없다.)

console.log(str.concat('1','3','4','5'));

//앞뒤 공백제거

console.log(' abc '); //문자열과 문자열 사이는 공백이 아닌 데이터로 구분되기 때문에 없어지지 않음(주의)

console.log(' abc '.trim());

let tstr=str.replaceAll('Hello','안녕').toUpperCase(); //Hello를 안녕으로 치환시킨 후에 영어를 다 대문자로 변경시키는 코드

console.log(tstr); //이런식으로 적용할 메서드를 다 연결시킨 후에 변수에 저장하고 출력을 변수로만 진행하는 것이 기본 구조이다.

//, 구분자 단위로 분리해서 저장

let str1='사과, 딸기, 수박, 참외'; //여러개로 나누어지기 때문에 배열의 방식으로 사용(split사용하면 알아서 나눠짐)

let arr1 =str1.split(',');

console.log(arr1);

console.log(arr1[0]);

</script>

</body>

</html>

*이름의 첫글자를 대문자로 변환하기

<!DOCTYPE html>

<head>

<title>Document</title>

//css- capitalize

//hong gil dong => Hong Gil Dong

//공백 기준으로 뒤쪽 글자 대문자로 만들기

</script>

</head>

<body>

const capitalize=function(sentence){

let words=sentence.split(' '); //split공백으로 나누는 순간 배열의 방식으로 사용 가능해짐

// 따라서 모양새는 ['hong', 'gil', 'dong']이런식으로 나누어 지며, hong gil dong 해당 문장이 공백 포함 인덱스로 이름지어지게됨

let result=' '; //result에는 문자열을 일렬로 표현하기 위함

for(let i=0;i<words.length;i++){

result+= words[i].substring(0,1).toUpperCase()+ words[i].substring(1)+' ';

//0부터 1까지 문자열을 분리한다음 대문자 적용. 인덱스 1부터 나머지 문자열들은 그냥 이어 붙임

}

//console.log(result);

return result;

};

console.log(capitalize('hong gil dong'));

</script>

</body>

</html>

728x90