객체 (object)
객체(object)란 실재로 존재하는 사물을 의미하고 이름과 값으로 구성된 속성을 가진 데이터 타입이다.
| > typeof ( [ ] ) "object" |
위와 같이 배열(array)도 객체라고 할 수 있다.
const object = {
name : '구름',
age : 6
}
console.log(object.name)
console.log(object.age)배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 key를 사용한다.
객체는 중괄호 {...} 로 생성하며, 다음과 같은 형태의 자료를 쉼표로 연결해서 입력한다.
| 키 : 값 |
const object = {
name : '구름',
age : 6
}
object.name = '별'
object.age = 4
console.log(object.name)
console.log(object.age)> 별
4
객체의 속성에 접근할 땐 object[' name '] 과 같은 형태와 object.name 과 같은 형태로 접근할 수 있다.
또 위와 같이 바꿀 수도 있다.
const object = {
'with space' : 273,
'with ~!@#&(*&@#(' : 52
}
console.log(object['with space'])
console.log(object['with ~!@#&(*&@#('])위와 같이 식별자로 사용할 수 없는 단어를 키로 사용할 경우 문자열을 사용해야하고, 접근할 때는 대괄호를 사용해서 접근해야 한다.
식별자로 사용할 수 있는 조건은 아래와 같다.
1. 숫자로 시작 x
2. 띄어쓰기 x
3. 기호는 $ 와 _ 만 가능
속성과 메소드
배열 내부에 있는 값을 요소(element)라고 하고, 객체 내부에 있는 값은 속성(property)라고 한다.
const pet = {
name : '구름',
age : 7,
bark : function(){
console.log(`${pet.name}이가 짖습니다!`)
},
sleep : () => {
console.log(`${pet.name}이가 잡니다!`)
}
}
pet.bark()
pet.sleep()위 코드처럼 객체 안에 함수를 사용할수 있는데 객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 부른다.
const pet = {
name : '구름',
age : 7,
bark : function(){
// console.log(`${pet.name}이가 짖습니다!`)
// console.log(`${this.name}이가 짖습니다!`)
console.log(this)
},
sleep : () => {
// console.log(`${pet.name}이가 잡니다!`)
console.log(this)
}
}
pet.bark()
pet.sleep()익명함수에서는 메소드 내부에서 this 을 사용했을 때 자기자신을 나타낸다.
{
name: '구름',
age: 7,
bark: [Function: bark],
sleep: [Function: sleep]
}
{}| 익명 함수 : this 바인딩을 한다
화살표 함수 : this 바인딩을 하지 않는다
* this 바인딩 : this 를 현재 객체와 연결하는 행위
|
동적으로 객체 속성 추가/제거
객체를 처음 만들 때 같이 만드는 것을 정적으로 생성한다고 하고 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을
'동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다' 라고 한다.
//객체의 키와 값을 정적으로 생성한다
const pet = {
name : '구름',
age : 7
}
//객체의 키와 값을 동적으로 생성한다
pet.color = 'brown'
//객체의 키와 값을 동적으로 제거한다
delete pet.age
console.log(pet)> { name: '구름', color: 'brown' }
메소드 간단 선언 구문
const pet = {
name : '구름',
eat(food){
console.log(`${this.name}은 ${food}을 먹습니다`)
}
}
pet.eat('밥')> 구름은 밥을 먹습니다
eat 함수에 food라는 매개변수에 '밥'이 들어가게 되고 함수 내의 console.log가 실행되게 된다.
함수를 호출할 때에는 위와 같은 형태로 호출한다.
6-1 확인 문제
const object = {
ko : '빵',
en : 'bread',
fr : 'pain',
es : 'pan',
lang : {
ko : '한국어',
en : '영어',
fr : '프랑스어',
es : '스페인어'
},
print : function(lang){
console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다`)
}
}
object.print('es')위 코드에서 메소드라고 부를 수 있는 속성은 함수가 들어가있는 print 속성이다.
object.print를 호출하면서 함수의 매개변수에 es를 전달하고 있다. 따라서 function(lang) 에서 lang = es 가 되고
{this.ko} = object.ko 라는 의미이므로 '빵'
{this.lang[lang]} = this.lang[es]이므로 '스페인어'
{this[lang]} = this[es] 이므로 'pan'
> 빵는 스페인어로 pan입니다
따라서 위와 같은 결과가 나오게 된다.
객체의 속성과 메소드 사용하기
# 기본 자료형 -> 스택에 값을 저장 -> 속성과 메소드를 가질 수 없음
- 숫자
- 문자열
- 불
# 객체 자료형 -> 스택과 힙을 연결 -> 속성과 메소드를 가질 수 있음
- 함수
- 배열
- 객체
- 등등
| Array.isArray( ) |
배열인지 아닌지를 확인할 때 쓴다. true 또는 false 값을 리턴함
기본 자료형
실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형 이라고 한다.
숫자, 문자열, 불이 기본 자료형에 속한다.
기본 자료형은 객체가 아니므로 속성을 가질 수 없다. 위와 같이 기본 자료형에 속성을 추가해보려고 하면 c.sample = 10
처럼 속성을 추가하는 것처럼 보이지만 c.sample을 보면 속성이 추가되지 않았다는 것을 알 수 있다.
문자열과 불 자료형도 기본 자료형이므로 같은 결과가 나온다.
기본 자료형을 객체로 선언하기
| const 객체 = new 객체 자료형 이름( ) |
| new Number(10) new String('안녕하세요') new Boolean(true) |
위와 같은 형태로 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있다. 단순한 기본 자료형이 아니므로 이전과 다르게 속성을 가진다
const f = new Number(273)
console.log(typeof f)
f.sample = 20
console.log(f.sample)
console.log(f)
console.log(f + 10)> object
20
[Number: 273] { sample: 20 }
283
new Number( )로 숫자 객체를 만들어주고 typeof f 를 찍어보니 object라고 출력이 되는 걸 확인할 수 있다.
마찬가지로 f.sample 또한 정상적으로 작동되고 속성을 가질 수 있고, 숫자로도 활용됨을 알 수 있다.
이때 new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동되므로 typeof를 찍어보면 object가 아닌 number를 출력할 것이다.
기본 자료형의 일시적 승급
위와 같이 문자열 자료형 등을 생성하고 뒤에 온점을 찍으면 자동 완성 기능으로 메소드들이 나오고 또 실행도 가능하다는 것을 알 수 있다.
원래 기본 자료형은 속성과 메소드를 가질 수 없는데 위와 같이 작동하는 이유는 일시적으로 기본 자료형을 객체로 승급시키기 때문이다.
이러한 승급은 일시적이고, 따라서 sample 속성에 기본 자료형이 추가되는 것처럼 보였지만 실제로는 추가되지 않는 현상이 일어난 것이다. 기본 자료형은 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다.
프로토타입으로 메소드 추가
prototype 객체에 속성과 메소드를 추가하면 모든 객체와 기본 자료형에서 해당 속성과 메소드를 사용할 수 있다.
| 객체 자료형 이름.prototype.메소드 이름 = function ( ) { } |
Number.prototype.sample = 10
const i = 273
console.log(i.sample)> 10
Number.prototype.power = function(n = 2){
return this.valueOf() ** n
}
const a = 12
console.log('a.power():', a.power())
console.log('a.power():', a.power(3))
console.log('a.power():', a.power(4))> a.power(): 144
a.power(): 1728
a.power(): 20736
function(n = 2) 여기서 n = 2 기본 매개변수이다. 즉 매개변수 값이 들어오지 않을 때 n = 2 가 된다는 의미이다.
따라서 첫번째 console은 기본 매개변수가 들어가서 n = 2 즉, 12 * 12 =144
두번째는 매개변수가 3으로 들어가므로 12 * 12 * 12 = 1728
마지막은 매개변수가 4로 들어가므로 12 * 12 * 12 * 12 = 20736
indexOf( ) 메소드
문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 indexOf() 메소드를 사용한다.
const j = '안녕하세요'
console.log(j.indexOf('안녕'))
console.log(j.indexOf('하세'))
console.log(j.indexOf('없는 문자열'))> 0
2
-1
문자열 내에 있는 문자열이라면 해당 인덱스를 출력한다. 없으면 - 1 을 출력한다. 배열의 indexOf( ) 메소드도 똑같이 작동한다.
const j = '안녕하세요'
console.log(j.indexOf('안녕') >= 0)
console.log(j.indexOf('하세') >= 0)
console.log(j.indexOf('없는 문자열') >= 0)> true
true
false
| 문자열.indexOf(문자열) >= 0 |
위 코드를 사용하면 어떤 문자열이 포함되어 있는지 true 또는 false 로 결과값을 얻을 수 있다.
| 문자열.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))> 안녕 in 안녕하세요 : true
없는데 in 안녕하세요 : false
273 in [273, 32, 103, 57, 52]: true
0 in [273, 32, 103, 57, 52]: false
프로토타입 객체에 String과 contain( ) 메소드를 추가했다. 따라서 contain 메소드를 사용할 수 있게 되는 것이다.
this.indexOf(data) >= 0 를 해석해보면 이 함수에 들어온 매개변수 즉 indexOf(매개변수)가 객체 내에 있으면 true, 없으면 false를 리턴하게 된다.
Number 객체
숫자 N번째 자릿수까지 출력 : toFixed( )
const a = 123.45678
console.log(a.toFixed(0))
console.log(a.toFixed(1))
console.log(a.toFixed(2))
console.log(a.toFixed(3))> 123
123.5
123.46
123.457
NaN 과 Infinity 확인 : isNaN( ) , isFinite( )
어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한) 인지 확인할 때 사용한다.
NaN : 자료형은 숫자인데 값이 숫자가 아닌 것
const a = Number('안녕하세요')
console.log(Number.isNaN(a))
console.log(Number.isNaN(10))> true
false
is 라는 이름으로 시작하는데 메소드는 true 혹은 false를 리턴한다.
console.log(Number.isFinite(10))
console.log(Number.isFinite(15))
console.log(10/0)
console.log(Number.isFinite(10 / 0))> true
true
false
Infinity
isFinite 메소드는 유한한 값일 때 true, 무한한 값일 때 false을 리턴한다.
string 객체
문자열 양쪽 끝의 공백 없애기 : trim()
console.log(' 안녕하세요 ')
console.log(' 안녕하세요 '.trim())> 안녕하세요
안녕하세요
trim 메소드를 사용하면 앞뒤 공백이 모두 사라진 것을 볼 수 있다.
문자열을 특정 기호로 자르기 : split()
split() 메소드는 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드이다.
const a = '21.12.05 | 김밥집 | 2000 | 2023 | 컴퓨터'
console.log(a.split('|'))> [ '21.12.05 ', ' 김밥집 ', ' 2000 ', ' 2023 ', ' 컴퓨터' ]
JSON 객체
가장 많이 사용되는 자료 표현 방식으로 JavaScript Object Notation 의 약자이다.
JSON 형식은 약간의 규칙이 있는데
- 값을 표현할 때는 문자열 , 숫자, 불 자료형만 사용할 수 있다(함수 등은 사용 불가)
- 문자열은 반드시 큰 따옴표로 만들어야 한다
- key에도 반드시 따옴표를 붙여야 한다
자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify( ) 메소드를 사용한다.
const data = [{
name: '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어'
}, {
name : 'HTML5 웹 프로그래밍 입문',
price : 26000,
publisher : '한빛아카데미'
}]
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2))> [{"name":"혼자 공부하는 파이썬","price":18000,"publisher":"한빛미디어"},{"name":"HTML5 웹 프로그래밍 입문","price":26000,"publisher":"한빛아카데미"}]
[
{
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publisher": "한빛미디어"
},
{
"name": "HTML5 웹 프로그래밍 입문",
"price": 26000,
"publisher": "한빛아카데미"
}
]
Math 객체
console.log(Math.floor(10.1))
console.log(Math.ceil(10.1))
console.log(Math.round(10.1))
console.log(Math.max(32, 273, 52))
console.log(Math.min(32, 273, 52))11
10
273
32
위에서부터 내림, 올림, 반올림, 최대값, 최소값을 찾아주는 메소드이다.
let a = Math.floor(Math.random() * 50)
console.log(a)Math.random( ) 메소드를 사용해 0 이상 1 미만의 랜덤한 숫자를 생성, 50을 곱해서 0부터 50까지의 랜덤한 숫자를 생성하게 한뒤
Math.floor( ) 메소드를 사용해 소숫점을 버리고 내림을하게 하면 0~50 사이의 랜덤한 정수가 출력된다.
6-2 확인 문제
1.
const num = 52000
num.원 = function(){
return this.valueOf() +'원'
}
console.log(num.원())num.원은 자신의 값에 '원'을 붙여서 출력을 하게 된다. 하지만 위 코드에서는 기본 자료형에 메소드를 추가하고 있으므로 정상적으로 실행이 불가능하다.
const num = new Number(52000)
num.원 = function(){
return this.valueOf() +'원'
}
console.log(num.원())따라서 이와 같이 new Number를 통해 객체로 만들어주거나
const num = 52000
Number.prototype.원 = function(){
return this.valueOf() +'원'
}
console.log(num.원())프로토타입을 활용해서 객체를 만들어주면 정상적으로 코드가 실행된다.
2.
function printLang(code){
return printLang._lang[code]
}
printLang._lang = {
ko : '한국어',
en : '영어',
ja : '일본어',
fr : '프랑스어',
es : '스페인어'
}
console.log('printLang("ko"):' , printLang('ko'))
console.log('printLang("en"):', printLang('en'))> printLang("ko"): 한국어
printLang("en"): 영어
함수는 객체 자료형이기 때문에 위 코드처럼 속성을 추가해서 사용할 수 있다는 점을 기억하자
3.
console.log(Math.sin(90))> 0.8939966636005579
Math.sin 함수는 라디언의 사인값을 반환한다. 따라서 일반각은 Math.PI / 180 을 곱해주어야 한다.
console.log(Math.sin(90 * Math.PI/180))> 1
4.
prototype : 어떤 종류의 객체들이 모두 공유하는 속성과 메소드를 추가할 때 사용하는 객체
5.
Lodash에 orderby 메소드를 검색해서 나온 코드이다.
<head>
<title>Document</title>
<script src="lodash.js"></script>
<script>
const books = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML 웹 프로그래밍 전문',
price: 26000,
publisher: '한빛아카데미'
}, {
name: '머신러닝 딥러닝 실전 개발 입문',
price: 30000,
publisher: '위키북스'
}, {
name: '딥러닝을 위한 수학',
price: 25000,
publisher: '위키북스'
}]
const output = _.orderBy(books, ['name'], ['asc'])
console.log(output)
</script>
</head>orderBy 메소드를 사용해 오름차순으로 정렬해주면
위와 같은 결과물이 나오게 된다.
객체와 배열 고급
const test = function(object){
return `${object.name}, ${object.age}, ${object.color}`
}
let a = test({name : '구름', age : 6, color : 'brown'})
console.log(a)> 구름, 6, brown
test 라는 함수의 매개변수( = object )에 배열(object)가 들어가게 해서 다음과 같이 리턴을 하게 하는 코드이다.
위와 같이 눈으로 봤을 때 명확하게 이해를 할 수 있게끔 코드를 짜는 것이 중요하다.
const object = {
name : '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어'
}
object.name = object.name !== undefined ? object.name : '제목 미정'
object.author = object.author !== undefined ? object.author : '저자 미상'
console.log(object.name)
console.log(object.author)> 혼자 공부하는 파이썬
저자 미상
객채 내부에 속성이 있는지 확인하는 코드이다.
object.name 이 undefined가 아니라면 object.name이 실행되고 undefined 라면 '제목 미정' 이 실행될 것이다.
짧은 조건문을 활용해 객체 내의 속성이 있는지 위와 같이 확인할 수 있다.
const object = {
name : '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어'
}
object.name = object.name || '제목 미정'
object.author = object.author || '저자 미상'
console.log(object.name)
console.log(object.author)마찬가지로 속성이 false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있으면 위와 같은 짧은 조건문으로도 구현할 수 있다.
object.name이 있다면, 즉 true라면 object.name 실행, 아니라면 '제목 미정' 실행
다중 할당
| [ 식별자, 식별자, 식별자, ... ] = 배열 |
let [a,b] = [1,2]
console.log(a,b)> 1 2
let array = [1,2,3,4,5]
const[a,b,c] = array
console.log(a,b,c)위와 같이 다중 할당하게되면 앞에 세개만 할당되게 된다.
배열 전개 연산자
얕은 복사
const 물건200301 = ['우유','식빵']
const 물건200302 = 물건200301
물건200301.push('고구마')
물건200302.push('토마토')
console.log(물건200301)
console.log(물건200302)특이하게도 같은 값이 나오게 된다. 이렇게 복사했을 때 다른 이름이 붙을 뿐인 것을 얕은 복사(참조 복사) 라고 한다.
깊은 복사
| [ ... 배열 ] |
const 물건200301 = ['우유','식빵']
const 물건200302 = [...물건200301]
물건200302.push('고구마')
물건200302.push('토마토')
console.log(물건200301)
console.log(물건200302)깊은 복사는 복사한 두 배열이 완전히 독립적으로 작동한다. 전개 연산자를 사용해 위와 같이 입력해 사용한다.
const 물건200301 = ['우유','식빵']
const 물건200302 = ['고구마', ...물건200301, '토마토']
console.log(물건200301)
console.log(물건200302)> [ '우유', '식빵' ]
[ '고구마', '우유', '식빵', '토마토' ]
위와 같이 자료를 앞에 추가할 수도 있다.
객체 전개 연산자
얕은 복사
| {...객체} |
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = 구름
별.이름 = '별'
별.나이 = 1
console.log(구름)
console.log(별)> { '이름': '별', '나이': 1, '종족': '강아지' }
{ '이름': '별', '나이': 1, '종족': '강아지' }
깊은 복사
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {...구름}
별.이름 = '별'
별.나이 = 1
console.log(구름)
console.log(별)> { '이름': '구름', '나이': 6, '종족': '강아지' }
{ '이름': '별', '나이': 1, '종족': '강아지' }
이렇게 전개 연산자를 통해 깊은 복사를 하면 두 객체가 독립적으로 동작하는 것을 볼 수 있다.
전개 연산자를 사용한 객체 요소 추가
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {
...구름,
이름 : '별',
나이 : 1,
예방접종 : true
}
console.log(구름)
console.log(별)> { '이름': '구름', '나이': 6, '종족': '강아지' }
{ '이름': '별', '나이': 1, '종족': '강아지', '예방접종': true }
위와 같은 형태로 전개연산자를 사용하면 '구름'이라는 객체가 앞부분에 전개가 된다. 따라서 뒤에 있는 이름과 나이가 앞에 있는 이름과 나이를 덮어쓴다.
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {
이름 : '별',
나이 : 1,
예방접종 : true,
...구름
}
console.log(구름)
console.log(별)> { '이름': '구름', '나이': 6, '종족': '강아지' }
{ '이름': '구름', '나이': 6, '예방접종': true, '종족': '강아지' }
만약 전개를 뒤에서 하게 된다면 위와 같이 결과가 달라지게 된다. 구름이라는 객체가 모두 덮어 씌우게 된다.
'Record > TIL' 카테고리의 다른 글
| TIL 20230315(온보딩 8일차) (0) | 2023.03.16 |
|---|---|
| TIL 20230313(온보딩 6일차) (0) | 2023.03.15 |
| TIL 2023.03.08(온보딩 4일차) (0) | 2023.03.10 |
| TIL 2023.03.08(온보딩 3일차) (0) | 2023.03.08 |
| TIL 2023.03.07(온보딩 2일차) (0) | 2023.03.07 |
댓글