210730 CodeStates 10일차

오늘은 자바스크립트의 배열과 객체에 대해 공부했다.
기존에 알고 있던 내용들도 있지만 새로 알게된 내용들도 조금씩 찾을 수 있었다.
코드스테이츠의 자료들과 piemaweb 그리고 구글링을 하면서 공부한 내용들이다.

객체

자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트의 원시타입을 제외한 나머지 값들(함수,배열,정규표현식등)은 모두 객체이다.
자바스크립트의 객체는 키와 값으로 구성된 프로퍼티들의 집합이다.
프로퍼티의 값으로는 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.
값으로 함수도 사용이 가능한데, 프로퍼티의 값이 함수일 경우, 일반함수와 구분하기 위해 메서드(method)라고 부른다.
다시말해 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작하는 동작을 의미하는 메서드로 구성된 집합이다.

프로퍼티는 키와 값 쌍으로 구성된다.
프로퍼티 키는 프로퍼티를 식별하기 위한 식별자이다.
프로퍼티 키에 값을 할당하면 타입을 불문하고 암묵적으로 문자열 값으로 변환된다.
새로운 프로퍼티 키와 값을 선언하면 객체에 새로운 프로퍼티가 생성되고 기존의 프로퍼티에 값을 새로 할당하면 기존의 프로퍼티에 새로운 값을 덮어씌운다.
delete연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다.

let obj={} //빈 객체를 생성

obj['first']=1  // 'first':1 형태의 프로퍼티(키와 값쌍)를 생성

obj.second=2  // 'second':2 형태의 프로퍼티를 생성

console.log(obj)  // {first:1, second:2} 객체에 프로퍼티가 생성되었다.

obj.second=3  // 기존의 second프로퍼티에 새로운 값 3을 덮어씌움

console.log(obj)  // {first:1, second:3} second프로퍼티의 값이 변경되었다.

delete obj.second  //obj객체의 second프로퍼티를 삭제한다.

condsole.log(obj)  //{first:1}

객체는 프로퍼티를 열거할 때 순서를 보장하지 않지만 배열만은 예외적으로 순서를 보장한다.

대표적인 객체지향언어로 유명한 자바의 경우 클래스 기반 객체지향언어로 객체를 생성하기 위해서는 사전에 클래스를 정의하고 new연산자를 이용하여 인스턴스를 생성하는 방식으로 객체를 생성한다.

class Contact{
    String name;
    String phoneNum;
    String alert(){
        return this.name+"의 연락처는 "+this.phoneNum+"입니다.";
    }
}
  //위와 같이 사전에 class를 정의하고
  
public class main
{
    public static void main(String[] args)
    {
        Contact temp = new Contact();
        //main함수에서 정의한 클래스와 new연산자를 이용하여 새로운 객체를 만든다.
        temp.name="홍길동";
        temp.phoneNum="010-1234-5678";
        System.out.println(temp.alert());
    }
}
// 결과: 홍길동의 연락처는 010-1234-5678입니다.

자바스크립트는 프로토타입 객체지향언어로 위의 과정이 아닌 별도의 객체 생성 방법이 존재한다.(ECMA Script6부터는 클래스가 도입되었다고 한다.)

• 객체리터럴
  가장 일반적인 자바스크립트의 객체생성법으로 중괄호{}안에 프로퍼티의 키와 값쌍을 입력하는 방법이다.
  {}안에 아무것도 기술하지 않는다면 빈 객체가 생성된다.
  let temp={'first':1, 'second':2};
• Object 생성자함수
  new연산자와 Object 생성자함수를 이용하여 빈 객체를 생성하고 빈 객체에 프로퍼티나 메서드를 추가하여 객체를 완성하는 방법이다.

let temp=new Object();  //빈 객체를 생성
temp.first=1;
temp['second']=2;  //프로퍼티나 메서드를 빈 객체에 생성한다.

• 생성자함수
  객체를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티가 동일한 객체 가수를 간편하게 생성할 수 있다.
  생성자함수의 이름은 다른 함수와 헷갈리지 않도록 대문자로 시작한다.
  생성자함수를 통해 생성된 객체를 인스턴스라 한다.
  생성자함수 안의 this키워드는 생성자함수로 인해 생성되는 인스턴스를 의미한다.
  자바의 접근제어자같이 this가 사용된 프로퍼티는 외부에서 접근이 가능하고(public), 생성자 함수내에서 선언된 일반 변수는 외부에서 참조가 불가능(private)하다.

function Contact(name,phoneNum){
  this.name = name;
  this.phoneNum = phoneNum;
  let location = '서울';
  this.alert=function(){
    console.log(`${location}에 사는 ${this.name}의 연락처는 ${this.phoneNum}입니다.`);
  };
}
//생성자함수를 작성한다.

let temp=new Contact('홍길동','010-1234-5678');
//생성자함수와 new연산자를 이용해 객체를 생성한다.

console.log(temp.name, temp.phoneNum);
// 홍길동 010-1234-5678

console.log(temp.location);
// undefined. ->  생성자 함수 내에서 선언된 변수는 외부에서 참조가 불가능하다(private)

temp.alert();
// 서울에 사는 홍길동의 연락처는 010-1234-5678입니다.
// private인 location은 접근할 수 없지만 참조가능한
// alert메서드는 생성자내의 location변수를 활용할 수 있다.

배열

배열은 1개 변수에 여러개의 값을 순차적으로 저장할 때 사용한다.
배열을 생성할 때의 방법

• 배열리터럴
  대괄호[]안에 값을 쉼표로 구분하여 선언한다.
  첫번째 값의 인덱스는 0부터 시작한다.
  존재하지 않는 요소에 접근하면 undefined값을 반환한다.
  자바나 c의 경우 배열의 요소는 모두 같은 타입의 데이터여야 하지만, 자바스크립트의 배열은 데이터의 타입과 관계없이 모두 포함할 수 있다.

let temp=[1,2,3];
console.log(temp[0],temp[2]); // 1 3을 출력
console.log(temp[3]); // undefined를 출력

• Array() 생성자함수
  배열은 객체의 한 종류이기 때문에(배열은 객체에 포함되기 때문에) 객체와 마찬가지로 생성자함수를 이용할 수 있다.
  자바스크립트에는 배열을 만들기 위한 Array()생성자함수가 내장되어 있다.
  Array()생성자 함수는 매개변수의 개수에 따라 다르게 동작한다.
  매개변수가 1개일 때는 1개의 숫자값을 length값으로 갖는 빈 배열을 생성한다.
  그외의 경우(매개변수가 여러개인 경우)에는 전달된 값들을 요소로 갖는 배열을 생성한다.

let temp=new Array(3);
console.log(temp); // [empty X 3] -> 길이가 3인 빈배열

temp=new Array(1,2,3);
console.log(temp); // [1,2,3]

배열객체의 여러가지 프로퍼티와 메서드

• length: 배열의 길이를 반환한다.

let temp=[1,2,3];
console.log(temp.length); // 3

• push: 원본배열의 뒷부분에 전달받은 값을 추가하고 변경된 length값을 반환한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];
temp.push(4);
console.log(temp); // [1,2,3,4]
//push로 인해 원본배열(temp)에 4가 추가된 모습이다.

• pop: 원본배열의 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본배열이 빈배열일 경우 undefined를 반환한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];
temp.pop();
console.log(temp); // [1,2]
//pop으로 인해 원본배열에 3이 제거된 모습이다.

• reverse: 원본배열의 순서를 반대로 뒤집어 반환한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];
temp.reverse();
consoel.log(temp); // [3,2,1]
//reverse로 인해 temp의 순서가 반대로 바뀐 모습이다.

• shift: 원본배열의 첫 요소를 제거하고 제거한 요소를 반환한다. 빈배열일 경우 undefined를 반환한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];
temp.shift();
console.log(temp); // [2,3]
//shift로 인해 temp의 첫 요소인 1이 제거된 모습이다.

• unshift: 원본배열의 앞 부분에 전달받은 값을 추가하고 변경된 length를 반환한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];
temp.unshift(0);
console.log(temp); // [0,1,2,3]
//unshift로 인해 temp의 앞부분에 0이 추가된 모습이다.

• splice: 기존배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다. 원본배열을 변경하는 메서드이다.

let temp=[1,2,3];

temp.splice(1,1); //temp의 1번 인덱스를 포함해 1개의 값을 제거하는 메서드
console.log(temp); // [1,3]

temp.splice(1,0,2,2) 
//temp의 1번 인덱스를 포함해 0개의 값을 제거하고(아무것도 재거하지 않는다.) 2,2를 추가하는 메서드
console.log(temp); // [1,2,2,3]

• indexOf: 배열에서 전달받은 값을 검색하여 값이 있을경우 값의 인덱스를, 없을경우 -1을 반환한다. 원본배열을 변경하지 않는 메서드이다.

let temp=[1,2,3];

console.log(temp.indexOf(3)); // 2 -> 3의 인덱스 2를 출력한다.
console.log(temp.indexOf(4)); // -1 -> 4는 temp에 없으므로 -1을 출력

• includes: 배열이 전달받은 값을 포함하는지 여부를 boolean값으로 반환한다.

let temp=[1,2,3];

console.log(temp.includes(2)); // true
console.log(temp.includes(4)); // false

• concat: 전달받은 값(배열 혹은 값)을 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.

let temp=[1,2,3];

console.log(temp.concat(4)); // [1,2,3,4]
console.log(temp) // [1,2,3] -> 원본배열을 변경하지 않는다.

console.log(temp.concat([4,5])); //[1,2,3,4,5]
console.log(temp) // [1,2,3]

• join: 배열의 모든 요소를 문자열로 변환한 후 값으로 전달받은 구분자로 연결한 문자열을 반환한다.

let temp=['h','e','l','l','o'];

console.log(temp.join()); // 'h,e,l,l,o'
//구분자를 적지않을 경우 기본값인 콤마(,)를 구분자로 사용한다.

console.log(temp.join('')); // 'hello'
//구분자로 빈문자열('')을 적는다면 배열을 문자열로 반환한 값이 출력된다.

• slice: 시작과 끝 인덱스를 전달받아 시작이상 끝 미만의 인덱스를 가진 요소들을 배열로 복사하여 반환한다.

let temp=[0,1,2,3,4,5,6,7,8,9];

console.log(temp.slice(7)); // [7,8,9]
// 매개변수가 한개일때는 그 값부터 시작하여 끝까지 복사한 배열을 반환한다.

console.log(temp.slice(2,6)); // [2,3,4,5]
// 2이상 6미만의 인덱스를 가진 요소들(2,3,4,5)를 복사해 반환한다.

for-of와 for-in

for-in 문을 사용하면 객체(배열포함)에 포함된 모든 프로퍼티를 대상으로 반복문을 수행할 수 있다.

let temp={'first':1,'second':2,'third':3};
for(const i in temp){
console.log(i);
}
//first second third가 출력됨

다만 객체의 프로퍼티는 순서를 보장하지 않는다.
배열의 경우에는 프로퍼티의 키로 인덱스를 반환한다.
배열은 순서를 보장하는 데이터구조이지만 for-in문을 사용할 때는 순서를 보장하지 않기 때문에 배열에 for-in문을 사용하는 것은 좋지않다.
그러한 단점을 극복하기위해 ECMA Script6에서 for-of문이 추가되었다.
for-of문은 인덱스의 순서를 보장하고 배열의 요소만을 대상으로 반복문을 수행한다.

let temp=[1,2,3];
temp.time='time';
// 배열도 객체에 포함되므로 프로퍼티를 추가할 수 있다.

for(const i in temp){
  console.log(i, temp[i]);
}
// 0 1  ->  키(인덱스)와 값(요소)가 출력된 모습
// 1 2
// 2 3
// time time -> 프로퍼티임으로 출력된다.

for(const i of temp){
  console.log(i);
}
// 1
// 2
// 3
// for-of 문은 요소만을 순회하여 요소만 출력되었다.

for-in문은 객체의 프로퍼티를 순회할 때 사용하고 for-of문은 배열의 요소를 순회할 때 사용하는 것이 좋다.