배열과 객체 관련 기초

자바스크립트 배열과 객체 관련 기초

 

배열과 객체

🐇 배열과 객체의 비교
const 배열 = [값, 값, ...]
const 객체 = {키: 값, 키: 값}
식별자인 키는 숫자로 시작하지 않음. 기호는 $랑 _만 사용가능

 

🐇 내부 요소 접근 방법
배열[index]
객체.키
객체['키'] 이것도 가능한데 잘 안씀

 

🐇 요소와 속성
요소 : 배열에서 값 하나하나를 '요소'라고함
속성 : 객체에서 키: 값 하나를 '속성'이라고 함

 

🐇 this 활용
익명함수에서는 this는 자기 자신!!
하지만 화살표함수에서는 this가 따로 연결이 안됨

const 디스 = {
  익명 : function() { console.log(this) },
  화살 : () => { console.log(this) }
}

 

디스.익명() 를 호출하면 디스 객체가 나옴
디스.화살() 를 호출하면 window객체 (문서객체)가 나옴

즉, 익명함수는 this 바인딩을 한다. 하지만 화살표 함수는 this 바인딩을 안한다
this 바인딩 : this를 현재 객체와 연결하는 행위

그냥 객체 만들고 내부에서 this 쓰려면 익명함수를 쓰자 ^^

 

🐇 객체에 동적으로 속성 추가하기
객체.속성 = 값

 

🐇 객체에 동적으로 속성 제거하기
delete 객체.속성
참고로 객체도 스택에 저장되서 const로도 수정 쌉가능 (주소는 그대로니까!)

 

🐇 기본 자료형과 객체 자료형 비교
기본 자료형 : 스택에 값을 저장하여 값 이외에 아무것도 못가짐
-숫자, 문자열, 불

 

🐇 객체 자료형 : 스택과 힙을 연결하여 속성과 메서드를 가질 수 있음
- 함수, 배열, 객체 등등

 

🐇 배열 자료 확인하기
Array.isArray()를 활용. (트루 or 폴스 리턴)

 

참고로 typeof 아니다! ... 배열에 typeof 를 활용하면 object 라고 나옴

배열한테 타입이 뭐냐고 물으면 object

너 배열이니? 라고 물으면 yes ㅇㅈㄹ

 

그런데 함수한테 typeof()하면 function 이라고 나옴

엥??

 

그러니까 ... 함수 확인할때는 typeof 가 맞음

이렇게 함수를 객체처럼 쓰는 언어는 드뭄.
그래서 특별하게 취급하여

"자바스크립트는 함수를 일급객체(first-class object)로 다룬다" 라고 한다고 한다 ^^;

객체처럼 안생긴게 객체처럼 다뤄질때를 말하는 듯 ... 그냥 알아두자

 

🐇 기본자료형을 객체자료형으로 선언하기
자바스크립트는 조금 관종같아서

기본자료형을 기본자료형이 아닌 객체자료형으로 선언하는 것도 제공한다

... 그냥 알아두자

예를 들면
const a = new Number(10); → 그냥 10
const b = new String('문자열');  → 그냥 '문자열'
const c = new Boolean(true);  → 그냥 true

무슨 객체선언하는 것처럼 했지만 그냥 기본자료형임

 

🐇 기본자료형의 승급
아니 .... 기본자료형은 속성과 메서드를 가질 수 없는데
a.length 이런거 왜 가능하냐면 ...
자바스크립트는 기본자료형 뒤에 점(.)을 찍고 속성이랑 메서드를 쓰면

일시적으로 객체로 변경해서 속성과 메서드를 쓸 수 있게 된다 ㅋㅋㅠ

그니까 이론적으론 기본자료형은 속성, 메소드 추가 안되지만
쓸 수 있는 이유가 일시적으로 객체자료형으로 변환되어서!! 라고 알아두자

🐇 프로토타입을 활용한 속성과 메서드 추가하기
String.prototype.value = 10
const tay = '나는문자열인디'
console.log(tay.value) ==> 10

prototype을 활용하는 방법은 예를 들어서 ..
자바스크립트에는 특정 문자열 포함하는지 확인해주는 메서드가 없는데

확인하려면 indexOf(문자열)로 찾고 그게 0보다 큰지 작은지 확인하는 수 밖에 없음 ..
이럴때 프로토타입으로 찾는 메서드를 만드는 것

String.prototype.contain = function (문자열들어갈곳){
  return this.indexOf(문자열들어갈곳) >= 0
}

이렇게 만들면

const a = '아롤하구싶다'
console.log(`${a.contain('롤')}`) ==> true

 

contain 이라는 메서드를 활용할 수 있게됨!

 

 

객체와 배열 고급

객체 기본값을 지정하는 내용

🐇 일반적인 함수
매개변수로 들어온 값을 기반으로 문자열로 리턴하게 하기

1번 방법

const test = function (name, age){
  return `${name}은 ${age}살`
}
console.log(test('김테이', 7)) ==> '김테이는 7살'

 

2번 방법

const test = function (object){
  return `${object.name}은 ${object.age}살`
}
console.log(test({
  name: '김테이',
  age: 7
}))

둘 다 정답! 하지만
1번 방법보다 2번 방법이 더 현대적임
1번은 눈으로 보기만 하면 각각의 값이 무엇인지 모름 (김테이가 뭘 의미하고 7은 뭘 의미하는거야)

현대적인 개발 관점은

"개발은 보는 것이 더 쉬워야 한다" 라서
코드가 길어져도 읽기 쉬운 것을 선호한다!!!


🐇 객체 기본 매개변수 지정 방법 (디폴트 값) 다섯가지

과거에 쓰던 방법1 → 아무것도 안들어가면 undefined 그러면 '이상없음'

const test = function (object){
  object.status = object.status !== undefined ? object.status : '이상없음'
}

과거에 쓰던 방법2

const test = function (object){
  object.status = object.status ? object.status : '이상없음'
}

과거에 쓰던 방법3

const test = function (object){
  object.status = object.status || 이상없음'
}

요즘 쓰는 방법1 → 전개 연산자 활용. status값이 있으면 덮어씌는 것

const test = function (object){
  object = { status: '이상 없음', ...object}
}

요즘 쓰는 방법2 

const test = function (object){
  function ({name, age, color, status = '이상없음'})
}