4. javascript4

[배열]{객체}(메서드)

6-1 객체 (object)

객체는 여러 속성을 하나의 변수에 저장하는 데이터타입.

배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용

객체는 중괄호{...}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력

키 : 값

접근방법

1. 대괄호 사용[] ex> product['제품명']

2. 온점. 사용 ex> product.제품명 (띄어쓰기 있으면 대괄호 써야함)

<!DOCTYPE html>

<head>

<title>Document</title>

//변수를 선언합니다.

const pet={

eat:function(food){ //eat 은 key, function은 속성값. 속성값이 함수로 들어가면 메소드임.

alert(this.name+'은/는' + food + '을/를 먹습니다.') //this 자기자신의 이

}

//메소드를 호출합니다.

pet.eat('밥') //객체.메소드

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

//객체를 선언합니다.

const student={}

student.이름='윤인성'

student.취미='악기'

student.장래희망='생명공학자'

delete student.취미

//출력합니다

console.log(JSON.stringify(student,null,2)) //console이 가진 log 메소드. (log는 출력해주는 능력). JSON 형태로.

</script>

</head>

<body>

</body>

</html>

속성과 메소드

객체의 속성은 모든 형태의 자료값을 가질 수 있음

속성과 메소드 구분하기

메소드: 객체의 속성 중 함수 자료인 것

=eat메소드

const pet={

name:'구름'

eat:function(food){}

}

person.eat()

this 키워드 사용하기

자기자신이 가진 속성 표현

동적으로 객체 속성 추가/제거

메소드 간단 선언 구문

화살표 함수를 사용한 메소드

function(){} 형태로 선언하는 익명함수와 () => {} 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다름

화살표는 윈도우 객체를 출력 . 화살표는 윈도우 운영체제 원리를 이용하여 만든것임

<!DOCTYPE html>

<head>

<title>Document</title>

const test={

a:function(){

console.log(this) //익명함수로 선언

b:()=>{

console.log(this) //화살표함수로 선언

}

// 메소드를 호출합니다.

test.a()

test.b()

</script>

</head>

<body>

</body>

</html>

6-2 객체의 속성과 메소드 사용하기

속성과 메소드를 가질 수 있는 모든 것은 객체

자바스크립트에서는 함수를 일급객체 또는 first-class citizen에 속한다고 표현

기본자료형

실체가 있는것 중에 객체가 아닌것

= 숫자. 문자열.불

=이러한 자료형은 객체가 아니므로 속성을 가질 수 없다

기본자료형을 객체로 선언하기

: 숫자객체, 문자열객체,불 객체를 생성

const 객체= new 객체 자료형 이름()

기본자료형과 객체자료형의 차이
기본자료형 a: 메모리 a 영역에 저장
객체자료형 a: 메모리 a 영역에는 주소값, 그 주소값에 내용 저장

int i = 10; 이라는 값이 있을때, int는 기본 자료형이기 때문에 메모리에 할당된 i영역에 10이라는 값이 바로 들어간다.
String s = "ABC"; 이라는 값이 있을때, String은 객체 자료형이기 때문에 메모리에 "ABC"라는 값이 메모리 어딘가에 저장이 되고, 메모리에 할당된 s영역에는 "ABC"가 들어있는 주소값이 들어간다.

기본자료형을 객체로 선언하거나 일시적 승급하는 이유: 편의를 위해. 속성과 메서드를 가질 수 있게됨

기본자료형의 일시적 승급

자바스크립트는 사용의 편리성을 위해서 기본자료형의 속성과 메소드를 호출할때(기본 자료형 뒤에 온점.을 찍고 무언가 하려고하면) 일시적으로 기본 자료형을 객체로 승급시킴.

프로토타입으로 메소드 추가하기 -만들어두면 언제든지 쓸 수 있다

prototype 객체에 속성과 메소드를 추가하면 모든 객체에 해당 속성과 메소드를 사용할 수 있음

객체자료형이름.prototpye.

ex> Number.prototype.power=function(n=2){

return this. valueOf()**n}

그냥 썼으면 Number.power= ~~ 임!!

<!DOCTYPE html>

<head>

<title>Document</title>

//power()메소드를 추가합니다.

Number.prototype.power=function(n=2){

return this.valueOf() **n

}

//Number 객체의 power() 메소드를 사용합니다.

const a=12 //객체가 아니지만 일시적 승급어로 사용가능

console.log('a.power():', a.power())

console.log('a.power(3):', a.power(3))

console.log('a.power(4):', a.power(4))

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

//contain()메소드를 추가합니다.

String.prototype.contain=function (data){

return this.indexOf(data) >=0

}

Array.prototype.contain=function(data){

return this.indexOf(data)>=0

}

//string 객체의 contain()메소드를 사용합니다.

const a= '안녕하세요'

console.log('안녕 in 안녕하세요:', a.contain('안녕'))

console.log('없는데 in 안녕하세요',a.contain('없는데'))

//Array 객체의 contain () 메소드를 사용합니다.

const b=[273,32,103,57,52]

console.log('273 in [273,32,103,57,52]:', b.contain(273))

console.log('0 in [273,32,103,57,52]:', b.contain(0))

</script>

</head>

<body>

</body>

</html>

객체의 메서드

indexOf

자바스크립트에서 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인

있으면 인덱스를 출력하고 없으면 -1을 출력함.배열의 indexOf 메소드도 동일하게 작동함

contains() 메소드는 대상 문자열에 특정 문자열이 포함되어 있는지를 확인하는 역할을 한다.

<!DOCTYPE html>

<head>

<title>Document</title>

//contain()메소드를 추가합니다.

String.prototype.contain=function (data){

return this.indexOf(data) >=0

}

Array.prototype.contain=function(data){

return this.indexOf(data)>=0

}

//string 객체의 contain()메소드를 사용합니다.

const a= '안녕하세요'

console.log('안녕 in 안녕하세요:', a.contain('안녕'))

console.log('없는데 in 안녕하세요',a.contain('없는데'))

//Array 객체의 contain () 메소드를 사용합니다.

const b=[273,32,103,57,52]

console.log('273 in [273,32,103,57,52]:', b.contain(273))

console.log('0 in [273,32,103,57,52]:', b.contain(0))

</script>

</head>

<body>

</body>

</html>

Numbers 객체에서 자주 사용되는 메서드

-숫자 N번쨰 자릿수까지 출력하기: toFixed()

-isNaN(),isFinite() :NaN인지, Infinity인지 확인

String 객체에서 자주 사용되는 메서드

-문자열 양쪽 끝의 공백 없애기: trim()

-문자열을 특정 기호로 자르기: split() 해당기준으로 자르기임. split('\n') : 엔터기준으로 자른다.

JSON 객체

JSON 아래모양으로 정렬해줌

{

"":""

}

자바스크립트->JSON JSON.stringify

인터넷에서 문자열로 데이터를 주고 받을때는 CSV,XML,CSON 등 다양한 자료 표현 방식을 사용.

현재 가장 많이 사용되는 자료 표현 방식은 JSON객체

- 값을 표현할때는 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용불가)

-문자열은 반드시 큰따옴표로 붙여야 함.

-키key에도 반드시 따옴표를 붙여야 함.

두번쨰값은 어떤 속성만 정해서 추출할때 사용함. 거의 사용하지않고 null 값을 넣음 !

마지막값은 공백

*JSON->자바스크립트 JSON.parse

<!DOCTYPE html>

<head>

<title>Document</title>

//자료를 생성합니다.

const data=[{

price: 18000,

publisher: '한빛미디어'

},{

price: 26000,

publisher: '한빛아카데미'

}]

//자료를 JSON으로 변환합니다.

console.log(JSON.stringify(data))

console.log(JSON.stringify(data,null,2))

</script>

</head>

<body>

</body>

</html>

Math 객체에서 자주 사용되는 메서드

수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용

-객체의 속성으로는 pi, e 와 같은 수학상수가 있음

-메소드로는 Math.sin(), Math.cos() 와 같은 삼각함수도 있음

-랜덤한 숫자를 생성할 때 사용되는 Math.random() 메소드는 0이상, 1미만의 랜덤한 숫자를 생성

<!DOCTYPE html>

<head>

<title>Document</title>

const num=Math.random()

//Math.random

console.log('#랜덤한 정수 숫자')

console.log('3~27 사이의 랜덤한 정수 숫자:', Math.floor(num*24+3))

</script>

</head>

<body>

</body>

</html>

[참조]모질라 객체의 속성과 메소드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

Math 는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다.

developer.mozilla.org

-ex> Math.random()

<head>

<title>Document</title>

const num=Math.random()

//Math.random

console.log('#랜덤한 정수 숫자')

console.log('사이의 랜덤한 정수 숫자:',num)

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

const num=Math.random()

//Math.random

console.log('#랜덤한 정수 숫자')

console.log('3~27 사이의 랜덤한 정수 숫자:', Math.floor(num*24+3))

</script>

</head>

<body>

</body>

</html>

Lodash 라이브러리

개발할때 보조적으로 사용하는 함수들을 제공해주는 유틸리티 라이브러리 중 가장 많이 사용

-CDN: 콘텐츠 전송 네트워크 (Contents Delivery Network)

*sortBy() : 배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴

_.sortBy(Collection, fieldName);

<!DOCTYPE html>

<head>

<title>Document</title>

<script src="

https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js

"></script>

//데이터를 생성합니다.

const books=[{

name:'혼자 공부하는 파이썬',

price: 18000,

publisher:'한빛미디어'

},{

name:'HTML 웹 프로그래밍 입문',

price: 26000,

publisher:'한빛미디어'

},{

name:'머신러닝 딥러닝 실전 개발 입문',

price: 30000,

publisher:'위키북스'

},{

name:'딥러닝을 위한 수학',

price: 25000,

publisher:'위키북스'

}]

//가격으로 정렬한 뒤 출력합니다.

const output= _.sortBy(books,

(book)=>book.price)

console.log(JSON.stringify(output,null,2))

</script>

</head>

<body>

</body>

</html>

-실체가 있는것 중 객체가 아닌것 : 기본자료형

-객체를 기반으로 하는 자료형을 객체 자료형이라고 하며, new 키워드를 활용하여 생성

-기본 자료형의 승급이란 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것을 의미

-prototype

6-3. 객체와 배열고급

속성존재여부 확인

!==undefined

if (object.name) ->true, false 로 할수도있지만

객체의 특정 속성이 false 로 변환될 수 있는 값 (0, false, 빈 문자열 등) 이 아닐때와 같은 전제가 있어야함.

<!DOCTYPE html>

<head>

<title>Document</title>

const object={

name:'혼자 공부하는 파이썬',

price: 18000,

publisher:'한빛미디어'

}

//객체 내부에 속성이 있는지 확인합니다.

if (object.name !==undefined){

console.log('name 속성이 있습니다.')

}else{

console.log('name 속성이 없습니다.')

}if (object.author !==undefined){

console.log('author 속성이 있습니다.')

}else{

console.log('author 속성이 없습니다.')

}

</script>

</head>

<body>

</body>

</html>

기본속성지정하기

<!DOCTYPE html>

<head>

<title>Document</title>

const object={

name:'혼자 공부하는 파이썬',

price: 18000,

publisher:'한빛미디어'

}

//객체 내부에 속성을 지정합니다.

object.name=object.name !== undefined ? object.name : '제목 미정'

object.author=object.author !== undefined ? object.author : '저자 미상'

console.log(JSON.stringify(object,null,2))

</script>

</head>

<body>

</body>

</html>

<짧게 작성하는법>

object.name=object.name ||'제목미정'

object.author=object.author ||'저자미상'

배열기반의 다중할당

배열과 비슷한 작성 방법으로 한번에 여러개의 변수에 값을 할당하는 다중 할당 기능이 추가.

-할당 연산자(=)왼쪽에 식별자(변수 또는 상수)의 배열을 넣고,

오늘쪽에 배열을 위치시키면 배열의 위치에 맞게 값들이 할당.

-처음에 [a,b]=[1,2]라고 할당했으므로 a에 1 이 해당 b 에 2가 할당.

<!DOCTYPE html>

<head>

<title>Document</title>

//객체를 생성합니다

const object={

price: 18000,

publisher: '한빛미디어'

}

//객체에서 변수를 추출합니다.

const{name, price} = object

console.log('#속성 이름 그대로 꺼내서 출력하기')

console.log(name, price)

console.log('')

const {a=name, b=price} =object

console.log('#다른 이름으로 속성 꺼내서 출력하기')

console.log(a,b)

</script>

</head>

<body>

</body>

</html>

1. 기본자료형은 메모리에 저장

2. 객체자료형은 메모리에 저장하고 그 주소값을 가져오는거임

3. 기본자료형은 얕은복사 깊은복사할게없고 객체는 메모리/주소가 존재하니까 깊,얕이 있는거임

4. 기본자료형을 승급이나 객체로 선언하는 이유는 주소값을 만들어서 쓰고싶기때문임?

5. 전개는 배열(=메서드)을 찢어서 메모리에 넣는거임

배열 전개 연산자

얕은 복사와 깊은 복사

배열과 객체는 할당할 때 얕은 복사라는 것이 이루어짐.

배열은 복사해도 다른 이름이 붙을 뿐. 이를 얕은 복사(참조 복사)라고 부른다.

얕은 복사의 반대말은 깊은 복사.

깊은 복사는 복사한 두 배열이 완전히 독립적인 작동. 자바스크립트 개발에서는 클론을 만드는 것이라고 표현하기도함.

참조화가능하게 바뀐다= 객체화된다.

깊은복사는 클론복사 = 새로생긴거 =new : 메모리에 관여하는것

얕은복사는 주소값만 복사해온것 : 주소만 !!

얕은복사는 창고로 가는 길만 연결해준것

깊은복사는 복제해서 창고 하나 더 생긴거임

배열은 메모리에 할당되어서 생성됨.

앝은 복사는 메모리의 위치를 복사.

전개는 배열을 찢어서 하나하나 메모리에 집어넣는거임.

-> 전개로 깊은 복사함.

* const 는 변할 수 없는데

const 에 들어있는건 주소값임.

기본자료형은 그자체 그대로 주소를 가지고 있는거임.

기본자료형은 객체가 아니므로 메모리에 할당되지 않음.

실제객체인지, 기본자료형인지 구분해야함. 기본자료형을 객체로 바꾸는게 new임.

const 물건1=const 물건2 =>불가능

const 물건1= 물건2 => 물건2에게 물건1이랑 같은 주소값을 주는것이므로 가능함!! (얕은 복사가 되는거임)

*얕은복사

<!DOCTYPE html>

<head>

<title>Document</title>

//얕은 복사 예시 (둘다 출력값이 똑같이 우유, 식빵, 고구마. 토마토임)

//사야하는 물건 목록

const 물건_200301= ['우유','식빵']

const 물건_200302= 물건_200301

물건_200302.push('고구마') //push는 속성 추가하는 메소드

물건_200302.push('토마토')

//출력

console.log(물건_200301)

console.log(물건_200302)

</script>

</head>

<body>

</body>

</html>

*깊은 복사

<!DOCTYPE html>

<head>

<title>Document</title>

//깊은복사

//사야하는 물건 목록

const 물건_200301= ['우유','식빵']

const 물건_200302= [...물건_200301] //얕은 복사와 차이점. 전개연산자(...) 사용

물건_200302.push('고구마') //push는 속성 추가하는 메소드

물건_200302.push('토마토')

//출력

console.log(물건_200301)

console.log(물건_200302)

</script>

</head>

<body>

</body>

</html>

*복사한뒤에 자료를 추가

<!DOCTYPE html>

<head>

<title>Document</title>

//사야하는 물건 목록

const 물건_200301=['우유','식빵']

const 물건_200302=['고구마', ...물건_200301, '토마토']

//출력

console.log(물건_200301)

console.log(물건_200302)

</script>

</head>

<body>

</body>

</html>

객체전개연산자

*객체도 깊은 복사를 할 때 전개 연산자 사용가능

<!DOCTYPE html>

<head>

<title>Document</title>

const 구름={

이름: '구름',

나이: 6,

종족: '강아지'

}

const 별= 구름 //주소를 불러왔음

별.이름='별' //그 주소에 있는 객체를 변환했음

별.나이=1

console.log(JSON.stringify(구름))

console.log(JSON.stringify(별))

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

const 구름={

이름: '구름',

나이: 6,

종족: '강아지'

}

const 별= {...구름} //전개연산자로 펼쳐서 각각 저장함

별.이름='별'

별.나이=1

console.log(JSON.stringify(구름))

console.log(JSON.stringify(별))

</script>

</head>

<body>

</body>

</html>

*전개연산자를 사용하여 객체 요소를 추가

[...객체,자료,자료,자료]

순서 중요함!

전개연산자를 앞에 쓰면 나중에 수정한것이 반영됨

전개연산자를 뒤에 쓰면 기존객체값으로 덮어써짐 : 기존과 겹치지 않는 내용만 추가되는거랑 똑같음

<!DOCTYPE html>

<head>

<title>Document</title>

const 구름={

이름:'구름',

나이: 6,

종족: '강아지'

}

const 별={

...구름,

이름:'별',//기존의 속성 덮어쓰기

나이:1, //기존의 속성 덮어쓰기

예방접종: true

}

console.log(JSON.stringify(구름))

console.log(JSON.stringify(별))

</script>

</head>

<body>

</body>

</html>

-------------------

속성 존재 여부 확인은 객체 내부에 어떤 속성이 있는지 확인하는 것을 의미

객체에 없는 속성은 접근하면 undefined 가 나오는데, 이를 활용하면됨

다중할당은 배열과 객체 하나로 여러변수에 값을 할당하는 것

얕은복사(참조복사)는 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작

깊은복사는 두 객체를 완전히 독립적으로 복사.

'Javascript' 카테고리의 다른 글

6. javascript 6 (예외처리, Class) (0)	2024.03.11
5. javascript 5 (0)	2024.03.08
3. javascript3 (0)	2024.03.06
2. javascript2 (0)	2024.03.05
1. javascript (0)	2024.03.04

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

khjxit

4. javascript4

6-1 객체 (object)

6-2 객체의 속성과 메소드 사용하기

기본자료형

객체의 메서드

Lodash 라이브러리

6-3. 객체와 배열고급

'Javascript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

4. javascript4

6-1 객체 (object)

6-2 객체의 속성과 메소드 사용하기

기본자료형

객체의 메서드

Lodash 라이브러리

6-3. 객체와 배열고급

'Javascript' 카테고리의 다른 글

'Javascript' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역