온보딩 커리큘럼[객체]

객체의 기본

객체란?

실제로 존재하는 사물을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입

객체에는 배열도 포함된다.

typeop([])
//"object"

출력된 object가 객체이다.

배열은 객체 기반으로 만들어졌으며 배열에는 인덱스와 요소가 있다.

객체는 키와 값으로 표현이 된다.

키:값

<예제>

const product = {
  제품명: '7D 건조 망고',
  유형: '당절임',
  성분: '망고,설탕',
  원산지: '필리핀'
}

키값에는 제품명, 유형, 성분, 원산지가 들어가고

속성값에는7D건조망고, 당절임, 망고, 설탕, 필리핀이 들어간다.

console.log(product['제품명'])
console.log(product['유형'])
console.log(product['성분'])
console.log(product['원산지'])

// 7D 건조 망고
// 당절임
// 망고,설탕
// 필리핀

객체 뒤에 대괄호[…]를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다.

대괄호방식이 아닌 온점(.)을 사용할 수도 있다.

console.log(product.제품명)
console.log(product.유형)
console.log(product.성분)
console.log(product.원산지)

// 7D 건조 망고
// 당절임
// 망고,설탕
// 필리핀

온점을 사용하면 보조기능을 더 많이 사용할 수 있다.

💡식별자로 사용 할 수 없는 단어를 키로 사용 할 경우

식별자로 사용할 수 없는 단어를 키로 사용할 떄는 문자열을 사용해야하며 문자열을 키로 사용할땐 대괄호를 사용해야 객체의 요소에 접근이 가능하다.

const object = {
  "with space !@#$": 273
}

console.log(object['with space !@#$'])
//273

속성과 메소드

객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다.

const pet = {
  eat:function(food){}
}

// 메소드를 호출한다.
pet.eat()

매소드 내부에서 this키워드 사용하기

자기 자신이 가진 속성이라는것을 표시할 때는 this키워드를 사용한다.

const pet = {
  name: '유리',
  eat: function (food) {
    console.log(this.name + '은/는' + food + '을/를 먹습니다.')
  }
}

// 메소드를 호출한다.
pet.eat('밥')
//유리은/는밥을/를 먹습니다.

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

객체를 처음 생성 후에 속성을 추가하거나 제거하는 것

 

제거하기

delete를 사용해서 제거할 수 있다.

메소드 간단 선언 구문

const pet = {
  name: '유리',
  eat(food) {
    console.log(this.name + '은/는' + food + '을/를 먹습니다.')
  }
}

// 메소드를 호출한다.
pet.eat('밥')
//유리은/는밥을/를 먹습니다.

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

익명함수와 화살표 함수는 객체의 메소드로 사용될 때 this키워드를 다루는 방식이 다르다.

const test = {
  a: function () {
    console.log(this)
  },
  b: () => {
    console.log(this)
  }
}

test.a()
test.b()

익명함수는 현재코드에서 test객체를 출력했는데

화살표함수는 window에서 객체를 출력한다.

window객체는 웹브라우저 자체를 나타내는거고 이처럼 메소드 내부에서 this키워드를 사용할 때

의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편이다.

 

---

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

객체 자료형

속성과 메소드를 가질 수 잇는 모든 것은 객체이다.

 

함수는 ‘실행이 가능한 객체’라는 특이한 자료로 typeof연산자를 사용해서 자료형을 확인하면

function이 출력된다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서

함수를 일급 객체에 속한다고 표현하기도 한다.

 

객체가 아닌걸로 기본자료형으로는 숫자,문자열,불이 있다.

 

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

자료형을 변환하는 함수(Number,String,Boolean)

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

 

이렇게하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있다.

new Number(10)
new Strint('안녕하세요')
new Boolean(true)

new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동하니 주의해야한다.

 

기본 자료형의 일시적 승급

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

이러한 승급은 일시적이다.

 

프로포토타입으로 메소드 추가하기

객체 자료형 이름.prototype.메소드 이름 = function(){ }

Number.prototype.sample = 10

const i = 273

console.log(i.sample)
//10

//power()메소드를 추가합니다.
Number.prototype.power = function (n = 2) {
  return this.valueOf() ** n
}

//Number객체의 power()메소드를 사용합니다.
const a = 12
console.log(a.power())
console.log(a.power(3))
console.log(a.power(4))
// 144
// 1728
// 20736

코드에서 this.valueOf()로 숫자 값을 꺼냈습니다. 그냥 this**n을 해도 아무 문제 없이 계산된다.

하지만 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해서 valueOf()메소드를 사용하는 것이 일반적이다.

 

<문자열의 indexOf() 메소드를 사용하는 예>

const j = "안녕하세요."

j.indexOf('안녕')
0

j.indexOf('하세')
2

j.indexOf('없는 문자열')
-1

배열의 indexOf()메소드도 마찬가지로 작동한다.

const k = [1,2,3]

k.indexOf(2)
1

k.indexOf(3)
2

k,indexOf(100)
-1

따라서 “문자열.indexOf(문자열)> =0”등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되어 있는지 true 또는 false로 얻을 수 있다. “문자열.contain(문자열)”했을 때 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(a.contain('안녕')) // true
console.log(a.contain('없는데')) // false

//Array 객체의 contain()메소드를 사용합니다.
const b = [273, 32, 103, 57, 52]
console.log(b.contain(273)) // true
console.log(b.contain(0)) // false

Number객체

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

toFixed() →소수점 이하 몇 자리까지만 출력하고 싶을 때 사용합니다.

소수점 아래 2까지 출력하고 싶다면 toFixed(2) 3자리까지 출력하고 싶다면 toFixed(3)형태로 사용한다.

const i = 123.45678

console.log(i.toFixed(2))
// 123.46

console.log(i.toFixed(3))
// 123.457

NaN과 Infinity 확인하기:isNaN(),isFinite()

어떤 숫자가 NaN인지 또는 Infinity인지 확인할 때는 Number.isNaN()메소드와

Number.isFinite()메소드를 사용한다.

숫자 자료 뒤에 온점을 찍고 사용하는것이 아니라 Number뒤에 점을 찍고 사용한다.

isNaN() -> NaN인지 확인함.
Infinity -> 숫자를 0으로 나누는것과 같이 무한대 숫자를 의미한다.

const m = Number('숫자로 변환할 수 없는 경우')

console.log(m)
//NaN을 생성한다.
console.log(m === NaN)
//false / NaN과 비교해서는 NaN인지 확인 할 수 없다.
console.log(Number.inNaN(m))
//true

const n = 10 / 0

console.log(n)
//Infinity 양의 무한대를 생성합니다.

const o = -10/ 0

console.log(o)
// -Infinity 음의 무한대를 생성합니다.

Number.isFinite(n)
Number.isFinite(0)
//false isFinite(유한한 숫자인가?)가 false로 나옵니다.

Number.isFinite(1)
Number.isFinite(10)
//true 일반적인 숫자는 셀 수 잇으므로 true가 나옵니다.

무한대 숫자는 양의 무한대 숫자와 음의 무한대 숫자로 나뉜다. isFinite()메소드가 false인 경우는

양의 무한대 숫자와 음의 무한대 숫자 2가지 경우이다.

n === Infinity || n === -Infinity
//true

 

String 객체

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

const stringA = '     메세지를 입력하다보니 앞에 줄바꿈도 들어가고    '

console.log(stringA.trim())
//메세지를 입력하다보니 앞에 줄바꿈도 들어가고

문자열 특정 기호로 자르기 : split()

쉼표(또는 다른것)로 구분된 문자열을 읽어서 분해한다.

const stringA = "가,나,다,라,마,바,사"

console.log(stringA.split(','))
// ['가','나', '다','라', '마', '바', '사']

---

JSON(javaScript Object Notation) 객체

• 값을 표현할 때는 문자열,숫자,불 자료형만 사용할 수 있다.(함수 등은 사용불가)
• 문자열은 반드시 큰따옴표로 만들어야한다.
• 키에도 반드시 따옴표를 붙여야 한다.

{
  "name":"유리",
  "age":"3",
}

JSON.stringify()

자바스크립트 객체를 JSON문자열로 변환한다.

const data = [{
  "name": "유리",
  "age": "3",
}, {
  "name": "르탄이",
  "age": "2"
}]

//JSON으로 변환
console.log(JSON.stringify(data))
// [{"name":"유리","age":"3"},{"name":"르탄이","age":"2"}]
console.log(JSON.stringify(data, null, 2))
// [
//   {
//     "name": "유리",
//     "age": "3"
//   },
//   {
//     "name": "르탄이",
//     "age": "2"
//   }
// ]

console.log(JSON.stringify(data, null, 2))
//두번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 떄 사용하거나 거의 사용하지 않으며,
//일반적으로는 null(아무것도 없음)을 넣는다.
//3번째 매개변수는 들여쓰기를 뜻해서 2는 들여쓰기 2칸이다.

JSON.parse()

JSON문자열을 자바스크립트 객체로 전개한다.

const data = [{
  "name": "유리",
  "age": "3",
}, {
  "name": "르탄이",
  "age": "2"
}]

//자료를 JSON으로 변환
const json = JSON.stringify(data)
console.log(json)
// [{"name":"유리","age":"3"},{"name":"르탄이","age":"2"}]

//JSON문자열을 자바스크립트 객체로 변환
console.log(JSON.parse(json))
// [{ name: '유리', age: '3' }, { name: '르탄이', age: '2' }]

---

 

Math객체

Math란?

수학과 관련된 기본적인 연산을 할 때 사용한다.

Math.random() →랜덤한 숫자 만들기

0이상 1미만의 랜덤한 숫자를 생성한다.

const num = Math.random()

console.log('# 랜덤한 숫자')
console.log('0~1 사이의 랜덤한 숫자:',num)
//0 <= 결과 < 1의 범위를 갖는다.

console.log('# 랜덤한 숫자 범위 확대')
console.log('0~10 사이의 랜덤한 숫자:',num*10)
//0 <= 결과 < 10의 범위를 갖는다.
console.log('0~50 사이의 랜덤한 숫자:',num*50)

console.log('# 랜덤한 숫자 범위 이동')
console.log('-5~5 사이의 랜덤한 숫자:',num*10 -5)
//-5 <= 결과 < 5의 범위를 갖는다.
console.log('-25~25 사이의 랜덤한 숫자:',num*50 -25)

 

---

외부 script 파일 읽어들이기

html페이지 내부에 script태그를 만들고 자바스크립트 코드를 입력하면

간단한 프로그램은 만들 수 있지만 프로그램의 규모가 커지면

파일 하나가 너무 방대해지기 때문에 파일을 분리 하는게 좋다.

 

비주얼스튜디오 코드에서 html파일과 js 확장자 파일을 따로 생성해서 같은 폴더에 넣어준다.

<script src = "test.js"></script>

---

Lodash 라이브러리

다른사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리 라고 부른다

https://lodash.com/

Lodash 사이트 다운로드 페이지에서 [Full Build]를 클릭하면 웹브라우저에 따라 다음과 같은 2가지 상황이 발생한다.

• 곧바로 파일 다운로드가 될 경우 : 다운로드한 파일을 HTML파일과 같은 위치에 놓고 읽어들인다.
• 파일 내용이 출력 될 경우 : 마우스 오른쪽 버튼을 클릭하고 [다른 이름으로 저장]을 선택한 뒤 HTML파일과 같은 위치에 놓고 다운로드한다.

---

객체와 배열 고급

속성 존재 여부 확인

객체 내부에 어떤 속성이 있는지 확인해보는 코드

객체에 없는 속성에 접근하면 undefined자료형이 나옵니다. 따라서 조건문으로 undefined인지 아닌지 확인하면 속성 존재 여부를 확인할 수 있습니다.

const object = {
  name: '유리',
  age: 3
}
//객체 내부에 속성이 있는지 확인합니다.
if (object.name !== undefined) {
  console.log('name 속성이 있습니다.')
} else {
  console.log('name 속성이 없습니다.')
}

if (object.author !== undefined) {
  console.log('author 속성이 있습니다.')
} else {
  console.log('author 속성이 없습니다.')
}
{/* <결과값>
name 속성이 있습니다.
author 속성이 없습니다. */}

짧게 사용한다면 다음과 같은 짧은 조건문을 사용할 수도 있다.

const object = {
  name: '유리',
  age: 3
}
//객체 내부에 속성이 있는지 확인합니다.
object.name || console.log('name 속성이 없습니다.')
object.author || console.log('author 속성이 없습니다.')
//author 속성이 없습니다.
//name은 true이기 때문에 console에 찍히지 않는다.

<기본 속성 지정하기>

const object = {
  name: '유리',
  age: 3
}

//객체에 기본속성 지정하기
object.name = object.name !== undefined ? object.name : '이름미정'
object.author = object.author !== undefined ? object.author : '저자 미상'

console.log(JSON.stringify(object, null, 2))
// {
//   "name": "유리",
//   "age": 3,
//   "author": "저자 미상"
// }
//author은 속성이 없었기 때문에 "저자미상"으로 추가되어 출력됨

이것도 짧게 코드를 만들 수 있다.

object.name = object.name || '이름미정'
object.author = object.author || '저자미정'

배열 기반의 다중 할당

배열과 비슷한 작성 방법으로 한 번에 여러 개의 변수에 값을 할당

[식별자, 식별자, 식별자, ...]= 배열

let arrayA = [1, 2, 3, 4, 5]

const [a, b, c] = arrayA

console.log(a, b, c)
//1,2,3

• 배열의 크기는 같을 필요가 없다.
• const 키워드로도 사용할 수 있다.

객체 기반의 다중 할당

{속성이름,속성이름} = 객체
{식별자 = 속성이름, 식별자 = 속성이름} = 객체

const object = {
  name: '유리',
  age: '3',
  life: 'seoul'
}

//객체에서 변수 추출
const { name, age } = object
console.log('# 속성 이름 그대로 꺼내서 출력하기')
console.log(name, age)
console.log('')

const { a = name, b = age } = object
console.log('# 다른 이름으로 속성 꺼내서 출력하기')
console.log(a, b)

// # 속성 이름 그대로 꺼내서 출력하기
// 유리 3

// # 다른 이름으로 속성 꺼내서 출력하기
// 유리 3

배열 전개 연산자

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

const information = ["유리", "3살"]
const information2 = information
information2.push('르탄')
information2.push('2살')

console.log(information)
// [ '유리', '3살', '르탄', '2살' ]
console.log(information2)
// [ '유리', '3살', '르탄', '2살' ]

깊은복사 - 클론을 만드는 것

[...배열]

const information = ["유리", "3살"]
const information2 = [...information]
information2.push('르탄')
information2.push('2살')

console.log(information)
// [ '유리', '3살' ]
console.log(information2)
// [ '유리', '3살', '르탄', '2살' ]

 

복사한 뒤에 자료를 추가하는 코드도 많이 사용되므로 다음과 같은 패턴으로 쉽게 작성 할 수 있다.

[...배열,자료,자료,자료]

const information = ["유리", "3살"]
const information2 = ['르탄', ...information, '2살']

console.log(information)
// [ '유리', '3살' ]
console.log(information2)
// [ '유리', '3살', '르탄', '2살' ]

const a = ['유리', '3살']
const b = ['르탄', '2살']

console.log([...a, ...b])

 

객체 전개 연산자

객체 얕은복사

{...객체}

const 유리 = {
  name: '유리',
  age: 3
}

const 르탄 = 유리
르탄.name = '르탄'
르탄.age = 2

console.log(유리)
console.log(르탄)
//{ name: '르탄', age: 2 }
//{ name: '르탄', age: 2 }

전개 연산자를 사용한 객체 요소 추가

{...객체, 자료, 자료, 자료}

const 유리 = {
  name: '유리',
  age: 3
}

const 르탄 = { ...유리, name: '르탄', age: 2 }

console.log(유리)
console.log(르탄)
// { name: '유리', age: 3 }
// { name: '르탄', age: 2 }

객체는 전개 순서가 중요하다. 전개라는 이름처럼 전개한 부분에 객체가 펼쳐진다.

const 유리 = {
  name: '유리',
  age: 3
}

const 르탄 = { name: '르탄', age: 2, ...유리 }

console.log(유리)
console.log(르탄)
// { name: '유리', age: 3 }
// { name: '유리', age: 3 }

뒤에쓰면 앞에추가된걸 덮어써버린다.

 

객체는 {} 이거인줄알았다. 여러강의를 봤지만 많이 본것도 아니지만 객체는 이거다 ! 하는 그런게 없었다.. 객체는 코딩의 꽃이고 중요한건데.. 난 무지하다...하하하하...

제일 어려웠던건 프로토타입이였다 

이해가 전혀 안가긴했는데 매니저님이 설명해주시니 그래도 아 ㅡ.~~ 그렇구나..!! 정도는 알것같다 하하하...