객체 타입
배열 ( array )
배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있다. 예를 들어 100개의 데이터를 처리해야 한다면 배열을 사용하지 않으면 100개의 변수가 필요하다. 그러면 코딩하기도 힘들고 코드량도 길어지기 때문에 배열을 이용하면 효율적으로 짤 수 있다. 자바스크립트 배열은 배열 내부의 데이터 타입이 서로 달라도 쓸 수 있고 배열의 크기가 동적으로 변할 수 있다. 배열안에 number, string, boolean, object, array 등 들어갈 수 있다.
배열의 선언
JavaScript의 배열 선언은 2가지 방법이 있다.
- 대괄호([])를 사용하여 만드는 방법
- Array() 생성자 함수로 배열을 만드는 방법
보통 첫 번째 방법이 일반적이다.var arr = [ '1', 2 'Hello' ]; // 선언과 동시에 할당 var arr = []; arr[0] = 'zero'; arr[1] = 'one'; // 빈 배열을 생성후 할당 var arr = new Array(); // 빈 배열을 생성후 할당 arr[0] = 1; arr[1] = 2; arr[2] = 3; var arr = new Array( 'a', 'b', 'c', 'd' ); // 선언과 동시에 할당배열 출력 방법
var arr = new Array( 'a', 'b', 'c', 'd' ); var arr = [ 'a', 'b', 'c', 'd']; for ( let i = 0; i < 4; i++ ){ console.log(arr[i]); } for ( let i = 0; i<arr.length; i++){ console.log(arr[i]); } // 보통 배열 데이터가 앞으로도 추가가 될수도 있고 삭제가 될수도 있기때문 // 에 이방법을 많이 사용한다.
배열 관련 함수
- Array.isArray()
JavaScript 배열은 typeof로 type을 출력해보면 object 객체라고 나온다. 그래서 더 정확하게 배열인지 아닌지 판별하기 위해 Array.isArray(배열명)을 써서 true가 나오면 배열이고 false가 나오면 아니다.var arr = [ 'a', 'b', 'c', 'd' ]; console.log(Array.isArray(arr); // true
- array.indexOf()
배열에서 특정 데이터를 찾고, 검색된 배열의 '첫번째'로 나타나는 위치 index를 리턴한다. 파라미터에 데이터를 넣어준다. ( 대소문자를 구분한다. )var arr = [ 'a', 'b', 'c', 'd' ]; console.log(a.indexOf('c')); // 2
- array.length
배열의 길이를 length를 통해 구할 수 있다. 배열에서 데이터의 갯수를 return 시켜준다.var arr = [ 'a', 'b', 'c', 'd' ]; console.log(arr.length); // 4
- array.toString()
배열뿐만 아니라 number 타입도 문자열화 시켜준다. 문자열화 될때 하나의 문자열로 된다. ( 구분되는 , 자동생성 ) 객체는 모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있는데 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속된다.var arr = [ 1, '2', [ 1, 2, 3 ], { name : 'lee' } ]; console.log(arr.toString()); // "1,2,1,2,3,[object Object]"
- array.join()
배열의 모든 데이터를 연결해 하나의 문자열로 만들어 준다. 매개변수는 separator - 분리 기호가 들어간다. ( 인자를 문자열로 ' ' - 사이띄어쓰기 '' 띄어씌기 없이 '-', '+', '안에 필요한거' 를 넣는다. ) 원본 배열은 변하지 않는다.var arr = [ '가', 2, '나', 4 ] ; console.log(arr.join('-')); // '가-2-나-4'
- array.concat()
concat()은 두개 이상의 배열을 하나의 배열로 만들어주는 역할을 하는 함수이다. concat().concat()으로 여러개의 배열도 붙일 수 있다. 원본 배열은 변하지 않는다.var arr = new Array( 'a', 'b', 'c', 'd' ); var arr1 = [ 'e', 'f' ]; console.log(arr.concat(arr1)); // ['a', 'b', 'c', 'd', 'e', 'f']
- array.slice()
배열에서 특정 부분만 골라내 반환해주는 함수이다. 매개변수는 ( start, end ) end의 이전까지만 포함된다. start가 end보다 크면 빈 array를 반환한다. index가 음수이면 뒤에서 부터 가져온다. ( 음수는 -1부터 시작 start, end 둘다 음수도 start가 더 작아야 제대로 가져온다. -1, -3 이면 빈 string 음수도 마찬가지로 end는 포함 x ) 원본 배열은 변하지 않는다.var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ]; console.log(str.slice(1,4)); // [ 'b', 'c', 'd' ] console.log(str.slice(-3)); // [ 'd', 'e', 'f' ]
- array.splice()
배열의 기존 원소를 삭제 또는 교체하거나 새 원소를 추가하여 배열의 내용을 변경한다. 원본 배열 자체를 수정 매개변수는 첫번째 start 배열의 변경을 시작할 index 음수일 경우 배열의 끝에서 -1부터 시작 두번째 deleteCount 첫번째 index부터 제거할 길이 0이거나 0보다 작은 수이면 어떤 원소도 삭제되지 않는다. 0일때 추가할때는 첫번째 매개변수 start뒤에서 부터 추가되고 0이면 빈배열 []를 반환한다. 세번째 배열에 추가할 원소이다. ( 제거된 마지막 원소자리에 추가된다. ) 제거된 원소가 반환값으로 나온다.var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ]; console.log(arr.splice(1,3)); // [ 'b', 'c' 'd' ] 시작은 index 1에서 시작하고 index 1포함 3개 1,2,3을 삭제 console.log(arr) // [ 'a', 'e', 'f' ] console.log(arr.splice(1,3,'가','나'); // [ 'b', 'c', 'd' ] console.log(arr) // [ 'a', '가', '나', 'e', 'f' ] 시작은 index 1에서 시작하고 index 1포함 3개 1,2,3을 삭제하고 1자리에 '가','나' 추가 var arr1 = [ '가', '나', '다', '라' ]; console.log(arr1.splice(1,0,'마','바); // [] console.log(arr1); // [ '가', '마', '바', '나', '다', '라' ];
- array.pop()
배열의 맨 마지막 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 xvar arr = [ 'a', 'b', 'c', 'd' ]; console.log(arr.pop()); // 'd' console.log(arr); // [ 'a', 'b', 'c' ]
- array.push()
배열의 마지막에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( push()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.var arr = new Array( 'a', 'b', 'c', 'd' ); arr.push('e'); console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ]; console.log(arr.push('e')); // 5
- array.shift()
배열의 첫 번째 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 xvar arr = [ 'a', 'b', 'c', 'd' ]; arr.shift(); console.log(arr.shift()); // 'a' console.log(arr); // [ 'b', 'c', 'd' ];
- array.unshift()
배열의 첫 번째에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( unshift()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.var arr = new Array( 'a', 'b', 'c', 'd' ); arr.unshift('a0'); console.log(arr.unshift('a0')); // 5 console.log(arr); // [ 'a0', 'a', 'b', 'c', 'd' ];
- array.reverse()
배열의 순서를 뒤집는다. 원본 배열도 순서가 뒤집힌다.var arr = [ 'a', 'b', 'c', 'd' ]; console.log(arr.reverse()); // [ 'd', 'c', 'b', 'a' ]
- array.sort()
sort()는 기본적으로 배열의 원소를 오름차순으로 정렬해준다. ( 인자에 아무것도 넣지 않을경우 number, string 해당) 하지만 대부분 sort함수의 인자값으로 비교 함수를 전달하여 정렬을 시킨다. ( 이 경우 같은 데이터 타입이여야 해당된다. )var arr = [ 'f', 4, '라', 2, 'c', '나', [ 1, 5, 3 ] ]; console.log(arr.sort()); // [ [ 1, 5, 3 ], 2, 4, 'c', 'f', '가', '다' ];
객체 ( object )
객체는 데이터와 그 데이터에 관련한 동작 ( 절차, 방법, 기능 ) 을 모두 포함할 수 있는 개념적 존재이다. 이름 ( key ) 과 값 ( value ) 을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드 ( method )를 포함할 수 있는 독립적 주체이다.
객체의 선언
JavaScript의 객체 선언은 2가지 방법이 있다.
- 중괄호({})를 사용하여 만드는 방법 - 객체 리터럴 방식
- Object() 생성자 함수로 객체를 만드는 방법
보통 첫 번째 방법이 일반적이다let obj = { name : '홍길동', age : 21 }; // 선언과 동시에 할당 obj.name = '홍길동'; obj['name'] = '홍길동'; obj.age = 21; let obj = new Object() // ()안에는 값을 넣는다. // 그럼 해당 데이터 타입의 객체가 생성된다 let obj = new Object('홍길동'); console.log(obj); String {'홍길동'} index 0 = '홍', index 1 = '길' index 2 = '동' // 이런경우는 String // 객체가 생성되고 let obj = new Object({ name: '홍길동', age: 21}); // 이렇게 하면 위와 똑같다.둘중 권고하는 방식은 객체 리터럴 방식이다 그 이유는
- 코딩하기 편하며 가독성이 좋다.
- 속도가 빠르다.
- 자바스크립트의 오버라이딩을 방지할 수 있다.
오버라이딩 이란 ?
생성자 함수 new를 이용하여 상속을 하다보면 종종 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 할 경우가 발생할 수 있을 때
객체 관련 함수
- Object.keys()
객체를 배열로 전환한다. 각각의 index 안에 객체의 key 값이 들어가 있다.
keys() 괄호안에 object 명을 써준다.let obj = { name: '홍길동', age: 20, country : '조선' }; console.log(Object.keys(obj)); // ['name', 'age', 'country']
- Object.values()
객체를 배열로 전환한다. 각각의 index 안에 객체의 value 값이 들어가 있다.let obj = { name: '홍길동', age: 20, country : '조선' }; console.log(Object.values(obj)); // ['name', 'age', 'country']
객체의 종류
- 배열
- 함수
- 객체
- 날짜
- 수학
- 정규표현식
- new 키워드로 만든 ( boolean, number, string .. )
객체가 아닌 기본 데이터 유형
- string
- number
- boolean
- null
- undefined
JavaScript의 객체 구성
1. JavaScript 내장 객체
JavaScript 엔진이 구동되는 시점에서 바로 제공되고 JavaScript코드 어디에서든 사용이 가능하다.
- object
- string
- number
- date
- array
- math
- boolean
2. 브라우저 내장 객체
브라우저 내장 객체도 JavaScript 엔진이 구동되는 시점에서 바로 제공 된다.
- 브라우저 객체 모델 ( BOM )
- 문서 객체 모델 ( DOM )
3. 사용자 정의 객체
사용자가 생성한 객체
객체 추가 / 수정 / 삭제 방법 / 확인
1. 객체 key 추가 / 수정
/* 추가 */ let obj = { name : '홍길동' }; obj.age = 23; 또는 obj['age'] = 23; /* 수정 */ let obj = { name : '홍길동', age : 22 }; obj.age = 23; 또는 obj['age'] = 23;2. 객체 key 삭제
let obj = { name : '홍길동', age : 22 }; delete obj.age;3. 객체 안 key 확인
let obj = { name: '홍길동', age: 22 } console.log('age' in obj);
