변수는 데이터 값을 하나밖에 저장하지 못하지만, 객체는 데이터 값을 필요한 대로 만들어 사용할 수 있다.
객체의 데이터는 '이름: 값'의 쌍으로 이루어 있으며 이것을 속성(Properties)이라고 한다.
| var 변수 = { name: '홍길동', age: 20, nationality: '한국', ... }; |
변수에 {이름: 값, 이름: 값,...}의 형태로 저장이 되면 변수는 객체가 된다.
| 객체의 분류 | 종류 | 설명 |
| 사용자 정의 객체 | - 객체 리터럴 - 객체 생성자 함수 - 클래스( ECMAScript 2015(ES6) ) |
사용자가 직접 정의해서 사용하는 객체 |
| 내장 객체 | - Number - String - Array - Math - Date - RegExp |
자바스크립트에서 제공해 주는 객체 |
< 내장 객체 >
1. Number 객체
▶ Number 객체 생성 방법
| var num = new Number(10); | var num = 10; |
▶ Number 객체 주요 메서드
| 메서드 | 설명 |
| toFixed( ) | toFixed(n)일 때 n값만큼 소수점 자릿수를 만든다. ( 자릿수 이전 값은 반올림 ) |
| toString( ) | toString(n)일 때 n값의 진수로 만든다. |
<script>
// toFixed( )
var num = 328.575;
console.log(num);
console.log('정수 : '+ num.toFixed());
console.log('소수점 1의 자리 : '+ num.toFixed(1));
console.log('소수점 2의 자리 : '+ num.toFixed(2));
//toString( )
var num1 = 12;
console.log(num1);
console.log('2진수 : '+num1.toString(2));
console.log('16진수 : '+num1.toString(16));
</script>
2. String 객체
▶ String 객체 생성 방법
| var str = new String('자바스크립트'); | var str = '자바스크립트'; |
▶ String 객체 프로퍼티
| 프로퍼티 | 설명 |
| length | 문자열의 개수 취득 |
▶ String 객체 주요 메서드
| 문자열 | J | a | v | a | s | c | r | i | p | t |
| index 번호 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 메서드 | 설명 |
| charAt( ) | charAt( n )인 경우 n과 같은 index 번호 문자 반환 |
| indexOf( ) | indexOf('a')인 경우 'a'를 왼쪽 문자부터 검색하여 일치하는 index 번호를 반환 |
| lastIndexOf( ) | lastIndexOf('a')인 경우 마지막 'a'를 오른쪽 문자부터 검색하여 일치하는 index 번호를 반환 |
| includes( ) | includes('str')인 경우 해당 문자열에 'str' 문자를 포함하고 있으면 true를 반환 |
| substring( ) | substring( 4, 9 )인 경우 문자열의 index 번호 4번부터 index 번호 9번 이전까지의 문자 반환 |
| substr( ) | substr( 4, 6 )인 경우 문자열 index 번호 4번부터 6개의 문자 반환 |
| split( ) | split( ' ' )인 경우 ' '(공백) 문자를 기준으로 문자열을 분할하고 분할한 문자열들을 배열로 생성 |
| replace( ) | replace( 'x', 'y' )인 경우 'x' 문자를 'y' 문자로 변경 |
| concat( ) | 문자와 문자를 연결 |
| trim( ) | 문자열의 앞 뒤 공백 제거 |
| toLowerCase( ) | 소문자로 변경 |
| toUpperCase( ) | 대문자로 변경 |
<script>
// String 객체 프로퍼티
var str = 'Javascript'
console.log('str 문자열의 개수 : '+str.length);
// charAt( )
console.log('index 0번 문자열 : '+str.charAt(0));
//indexOf( )
console.log('왼쪽 문자부터 검색하여 a가 있는 index 번호 : '+str.indexOf('a'));
//lastIndexOf( )
console.log('오른쪽 문자부터 검색하여 a가 있는 index 번호 : '+str.lastIndexOf('a'));
// includes( )
console.log('script 문자가 포함되어 있나? '+str.includes('script'));
// substring( )
console.log('index 2 ~ index 6의 문자열 : '+str.substring(2,6));
// substr( )
console.log('index 2부터 6개 문자열 : '+str.substr(2,6));
// split( )
var str1 = 'Javascript_jQuery'
var division = str1.split('_');
console.log('index 0 : '+division[0]+', index 1 : '+division[1]);
// replace( )
var str2 = 'm_out.gif';
console.log(str);
console.log('out을 over로 바꿔준다 : '+str.replace('out', 'over'));
// concat( )
var str1 = 'nav';
var str2 = '_bg';
console.log('str1 + str2 : '+str1.concat(str2));
// trim( )
var str = ' removeblank ';
console.log('공백 지우기 : '+str.trim());
// toLowerCase( ), toUpperCase( )
var str = 'LowerCase';
console.log('소문자로 '+str.toLowerCase());
var str = 'UpperCase';
console.log('대문자로 '+str.toUpperCase());
</script>3. Array 객체
Array 객체는 '객체 리터럴(Object literal)'처럼 변수에 데이터 값을 필요한 대로 저장할 수 있다. Array 객체는 저장된 값에 자동으로 index를 부여한다.
▶ Array 객체 생성 방법
| var subject = new Array(10, 20, 'javascript', 'jQuery', ...); | var subject = [ 10, 20, 'javascript', 'jQuery', ... ]; |
| index | 0 | 1 | 2 | 3 | . . . |
| 값 | 10 | 20 | 'javascript' | 'jQuery' | . . . |
▶ Array 객체 프로퍼티
| 프로퍼티 | 설명 |
| length | 배열의 개수 취득 |
▶ Array 객체 주요 메서드
* 표시가 붙은 메서드는 배열에 직접 영향을 주는 메서드입니다.
| 메서드 | 설명 |
| slice( ) | slice( 0, 3 )인 경우 배열 index 0번부터 index 2번 이전까지의 배열 반환 slice( 2 )처럼 매개변수 값이 하나만 있는 경우 index 2번과 이후 모든 배열 반환 |
| join( ) | join('-')인 경우 배열의 요소들을 '-'로 연결한 문자로 반환 |
| concat( ) | 배열 연결 |
| toString( ) | 배열을 문자로 변환 |
| shift( ) * | 첫번째 배열 삭제 |
| unshift( ) * | 첫번째 배열 추가 |
| pop( ) * | 마지막 배열 삭제 |
| push( ) * | 마지막 배열 추가 |
| splice( ) * | 지정된 부분의 배열을 추가, 삭제, 변경 |
| reverse( ) * | 배열의 순서를 바꿈 |
| sort( ) * | 배열을 오름차순으로 정렬 |
<script>
// Array 객체 생성
var alphabet = ['a', 'b', 'c', 'd', 'e'];
console.log(alphabet);
// Array 객체 프로퍼티 : 개수 취득
console.log(alphabet.length);
// slice( )
console.log(alphabet.slice(0,3)); // index 0 ~ index 3의 배열
console.log(alphabet.slice(2)); // index 2번과 이후의 모든 배열
// join( )
console.log(alphabet.join('-')); // '-'로 연결한 문자로 반환
// concat( )
var alphabet1 = ['a', 'b', 'c'];
var alphabet2 = ['d', 'e'];
console.log(alphabet1.concat(alphabet2)); // 배열 연결
// toString( )
console.log(alphabet.toString()); // 배열을 문자로 반환
// shift( )
alphabet.shift(); // 첫번째 배열 삭제
console.log(alphabet);
// unshift( )
alphabet.unshift('a'); // 첫번째 배열 'a' 추가
console.log(alphabet);
// pop( )
alphabet.pop(); // 마지막 배열 삭제
console.log(alphabet);
// push( )
alphabet.push('e'); // 마지막 배열 'e' 추가
console.log(alphabet);
//splice( )
var alphabet1 = ['a', 'b', 'c', 'd', 'e'];
alphabet1.splice(1, 0, 'f');
// index 1번 배열부터 0개를 삭제(없음)하고, 'f' 추가
console.log(alphabet1);
var alphabet2 = ['a', 'b', 'c', 'd', 'e'];
alphabet2.splice(1, 1); // index 1번 배열부터 1개 삭제
console.log(alphabet2);
var alphabet3 = ['a', 'b', 'c', 'd', 'e'];
alphabet3.splice(1, 1, 'f'); // index 1번 배열부터 1개 삭제('b')하고, 'f' 추가
console.log(alphabet3);
var alphabet4 = ['a', 'b', 'c', 'd', 'e'];
alphabet4.splice(0, 3, 'f', 'g', 'h');
// index 0번 배열부터 3개 삭제('a', 'b', 'c')하고, 'f', 'g', 'h' 추가
console.log(alphabet4);
// reverse( )
var alphabet = ['a', 'b', 'c', 'd', 'e'];
console.log(alphabet.reverse()); // 배열의 순서를 바꿔줌
//sort( )
var info = [45, 11, 7, 32, 20, 19];
info.sort(function(a, b){
return a - b;
}); // 오름차순으로 정렬
console.log(info.toString());
</script>▶ for... of 문 : 배열의 값을 쉽게 취득할 수 있다.
| for...in 문 | for...of 문 |
| for...in문의 i 변수는 city 배열의 index이다. | for...of문의 i 변수는 city 배열의 값이다. |
<script>
var city = ['서울', '대구', '대전', '부산'];
for ( var i in city ) {
console.log( i ); // 0 1 2 3
}
for (var i of city) {
console.log(i); // 서울, 대구, 대전, 부산
}
</script>
▶ forEach( ) 메서드 : 배열 요소에 순차적으로 접근하여 필요한 값을 만들 때 사용하는 메서드
<script>
var num = [1, 2, 3];
num.forEach(function(value, index, array) {
console.log(value); // 1 2 3 → num 배열의 값
console.log(index); // 0 1 2 → num 배열의 index 번호
console.log(array); // [1, 2, 3] → num 배열 자신
})
</script>위 예제에서 num 배열의 첫 번째 index부터 마지막 index가 될 때까지 익명 함수 (function (value, index, array) { ... })가 반복적으로 호출되어 실행하는 것을 확인할 수 있다. 이렇게 함수의 매개변수로 전달되어 반복적으로 실행되는 함수를 콜백(Collback) 함수라고 한다.
▶ map( ) 메서드 : 기존의 배열을 이용하여 새로운 배열을 만들 수 있다.
<script>
var base = [10, 20, 30];
base.map(function(value, index, array) {
console.log(value); // 10 20 30 → num 배열의 값
console.log(index); // 0 1 2 → num 배열의 index 번호
console.log(array); // [10, 20, 30] → num 배열 자신
});
var area = base.map(function(value) {
return value * 8; // area 변수의 배열 값으로 만들어준다.
})
console.log(area.toString()) // 80, 160, 240
</script>▶ filter( ) 메서드 : 조건에 맞는 배열 요소들만 새로운 배열로 만들어 준다.
<script>
var data = ['javascript', 20, 30, 'jQuery'];
data.filter(function(value, index, array) {
console.log(value); // javascript 20 30 jQuery → data 배열의 값
console.log(index); // 0 1 2 3 → num 배열의 index 번호
console.log(array); // ['javascript', 20, 30, 'jQuery'] → num 배열 자신
});
var num = data.filter(function(value) {
return typeof value === 'number';
// data의 배열 값 중 number 데이터만 num 변수의 배열로 만든다.
})
console.log(num.toString()) // 20, 30
</script>'Java Script' 카테고리의 다른 글
| Java Script-이벤트 (0) | 2020.12.14 |
|---|---|
| Java Script-내장 객체 2( Math, Date, 정규표현식(RegExp) ) (0) | 2020.12.14 |
| Java Script-사용자 정의 객체 (0) | 2020.09.21 |
| Java Script-함수 (0) | 2020.09.17 |
| Java Script-제어문 (0) | 2020.09.10 |
댓글