배열 array와 객체 object / property와 method

1. 배열 array

  - property와 method

2. 객체 object

3. 익명함수

 

1. 배열 array 

수많은 속성과 메소드가 있지만, 아직은 기초를 배우는 시기여서 우선은 속성 하나 메소드 하나만 배워보았다.

 

 

1/ 배열의 속성 중 하나인 length

 

length : 배열의 길이 = 즉, 배열 안의 데이터 개수를 나타내준다.

10개 데이터가 있으니까 length = 10! 

 

 

2/ datatype 과 prototype

 

array 자체를 출력하고 콘솔창에서 펼쳐보면,  index# : value 이렇게 풀어서 볼수도 있는데, 어디서 많이 본 것 같다.

 

=> 객체 object의 형태와 같다! 즉, array는 데이터타입이 객체인 것이다. 

=> 그렇기 때문에 객체의 속성 값을 불러올 때, 변수명.key 라는 키워드를 썼듯이, 

=> length라는 속성의 값을 불러올 때도, 배운대로 콤마로 불러온다. 배열명.length 이렇게 

 

 

이때 콘솔창에 추가로 prototype : array라고 뜨는데, 펼쳐보면 아래와 같이 array에 쓸 수 있는 속성 함수들(?)이 뜬다. 

즉, 배열이란 것에서 아래 프로퍼티들을 이용하여 다양한 작업을 할 수 있는 것 같은데... 아직까진 이 개념이 좀 헷갈린다.. 

 

datatype : object

prototype : array

 

JS 에서는 기본 데이터타입인 number/string/boolean 이 존재하고 null/undefined도 있다. 
이외의 데이터타입은 모두 객체 (object) 라고 한다. 
function / array / object 등이 모두 객체 타입인 것이다.

JS 의 모든 객체는 프로토타입 (prototype) 이라는 객체를 가지고 있다고 한다. 
모든 객체는 그들 각자의 prototype으로부터 property(속성)과 method(메소드)를 상속 받는다.   
즉, prototype이라는 객체는 상속할 속성과 메소드에 대한 정보를 제공해주는 역할을 한다.
알거도 같으면서 모르겠다. 이건 차차 다시 정리해야겠다...  

 

 

anyway,, 다시 본론으로...

 

3/ push 메소드

 

배열 뒤에다가 값을 하나 추가하는 행위 

 block = [10,20,30,40,50,60,70,80,90,100]
 block.push(103)
 console.log(block)

 

결과물은 아래와 같다. 103이 추가되었다.

 

 

 

프로퍼티 vs 메소드가 조금 헷갈렸는데, 아래와 같이 차이가 있다.

 

Property	Method
사용법 : 객체명.속성 괄호가 없음 ex) block.length	사용법 : 객체명.메소드(인자들) 함수를 호출하는 개념이므로 뒤에 괄호를 붙여 인자를 넣는다. ex) block.push(12, 'a')
객체의 속성을 표현해주는 것 (like 명사) 뭔가 인자를 넣어서 값을 호출해내는 개념이 아닌 객체 그 자체를 나타내주는 값들	객체의 행동을 보여주는 것 (like 동사) 인자를 넣어서 값을 호출해내는 개념 함수로 된 property 같은 개념 / property에 생동감을 준 느낌

 

 

지금 같이 데이터가 단순하면 문제가 문제가 아닌게 되지만, 응용을 위해서 연습해보자..

 

기본 문제 - 1

#1. block이라는 배열의 가장 마지막 데이터를 구하시오. 

 block = [10,20,30,40,50,60,70,80,90,100]
 block.push(102, 103, 105, 107, 109)
 console.log(block)​

가장 마지막 데이터를 구할 땐, 
주로 배열의 length값에서 1을 빼준 값을 변수로 잡고 그걸 배열의 인덱스넘버로 넣어 출력해준다.

let key = block.length -1;
console.log(block[key])
// 109 출력

 

기본 문제 - 2

#2. block 배열에 있는 모든 값을 출력하세요.

for(let i=0;i<block.length;i++){
    console.log(`총 데이터갯수는 ${block.length}입니다. ${i}번째 배열값 : ${block[i]}`)}

 

기본 문제 - 3

#3. 강아지를 배열로 나타내보세요.

let dog=["|\\_/|", "|q p|   /}", '( 0 )"""\\', '|"^"`    |', '||_/=\\\\__|']
for(let i=0; i<dog.length; i++){
	console.log(dog[i])
}​

 

---

2. 객체 object

 

배열과 같은 군집형 데이터 타입이다.

 

객체가 하위 데이터를 불러오는 방법부터 배워보자.

 

#1. 배열처럼 인덱스 개념으로 가져오는 것도 가능 

console.log(block["name"])​

#2. 속성을 가져오는 것처럼 객체명.객체의 key 로 가져오는 것도 가능 

console.log(block.name)

 

객체 안에 객체를 저장할 수도 있다. (블록체인 배울 때와도 연관되있을 거라고 한다..)

간단한 예시
한 객체 안에 string도 넣고, function도 넣고, object도 한번 더 넣고, 배열도 넣었다.

objblock = {
  name: "yj",
  creat: function(){
  	console.log('함수생성')
  },
  babyblock: {
  	index:1,
	nonce:1023
  },
  list:[
	10,20,30
  ]
}​

함수 자체를 출력해보면 아래와 같다.

console.log(objblock) 
objblock.creat() // 익명함수가 출력 
console.log(objblock.name)// 객체 안의 name 출력
console.log(objblock.babyblock.nonce) // 객체안의 객체 안에 있는 nonce값 출력
console.log(objblock.list[2]) // 객체 안의 배열 안의 인덱스2번째값 출력
console.log(objblock.list.length) // 객체 안의 배열의 길이 출력

 1 - 객체안의 객체 속에서 key값을 불러올 때 늘 하듯이, 마침표(.)를 써서 불러온다.
 2 - object 자체는 속성에 length가 없어서 .length로 길이 구하는 게 불가능하다. 
 3 - creat: f 는 이름이 없는 익명함수를 뜻한다.  

 

---

3. 익명함수 (anonymous function)

 

위에서 등장한 익명함수에 대해서 알아보았다. 일반함수와 비교해서 정리해봄

 

익명함수	일반함수
함수의 이름이 없다.	함수의 이름이 정해져있다.
변수에 저장되어서 변수를 호출해야 함수를 읽을 수 있다. 변수에 담기니까, 함수의 호이스팅 개념이 사라진다. 함수를 담는 변수의 선언이 변수의 호출보다 위에 있어야함.	함수 전체가 호이스팅 되어서 어느 위치에서 함수를 호출하던간에 함수를 읽을 수 있다.
재사용 불가, 한번만 사용 가능 => 정확히 해당 함수가 필요한 위치에서만 해당 함수가 구현되고 사라지면 메모리를 아낄 수 있게 된다.	재사용이 가능하다