자바스크립트 기초 - 4

 

 

1. 기본 자료형과 객체

기본 자료형이란 자바스크립트의 여섯가지 자료형(String, Number, Boolean, Null, undifined, Symbol) 중 Number, String, Boolean자료형을 의미한다.

 

속성과 메서드는 객체가 가질 수 있는 것인데 기본 자료형에도 속성과 메서드가 있다. 기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환된다. 

 

하지만 기본 자료형은 객체가 아니므로 속성과 메서드를 추가할 수는 없다. 그래도 프로토타입을 사용하면 메서드를 추가할 수 있다.

 

 

 

 

2. Object 객체

Object 객체는 자바스크립트의 가장 기본적인 내장 객체이다. 정확히는 Object 생성자 함수로 만든 인스턴스이다. 

 

<!-- Object 객체 생성법 --!>
var object = {};
var object = new Object();

 

자바스크립트의 모든 기본 내장 객체는 Object 객체를 기본으로 만들어진다. 따라서 자바스크립트의 모든 기본 내장 객체는 일곱가지 메서드를 갖는다.

 

 

 

 

3. String 객체

String 객체는 자바스크립트에서 가장 많이 사용하는 내장 객체이다. 

 

 

3-1. length 속성 : 문자열의 길이를 나타냄

 

글자수를 이용하는 프로그램은 굉장히 많다. 다음과 같이 비밀번호의 길이를 지정하는 경우도 많이 사용하듯..

 

var password = prompt("사용할 비밀번호를 입력해주세요", "6자리 이상");

if(password.length < 6) {
    alert("6자리 이상의 비밀번호를 입력해주세요.")
} else {
    alert("완료 되었습니다.");
}

 

3-1-1. 여섯자리 미만을 입력 했을 때

 

 

3-1-2. 여섯자리 이상을 입력 했을 때

 

 

3-2. String 객체의 기본 메서드

 

 String 객체의 속성은 하나밖에 없지만 메서드는 굉장히 많다. String 객체의 메서드는 크게 기본 메서드와 HTML 관련 메서드로 구분된다.

 

 

3-2-1. 잘못된 String 객체의 메서드 사용 

 

<script>
var string = 'abcde';
string.toUpperCase();

alert(string);
</script>

 

 

위 코드는 다음과 같은 결과를 출력한다. 그 이유는 String 객체의 메서드는 자기 자신을 변화시키지 않고 리턴하기 때문이다.  따라서 다음과 같이 리턴값을 사용해 주어야 한다. 

 

 

<script>
var string = 'abcde';
string = string.toUpperCase(); //저장

alert(string);
</script>

 

 

 

 

 

 

4. 메서드 체이닝: 메서드 줄줄이 사용하기

<script>
var output = 'VellaLog';

output = output.toLowerCase();
output = output.substring(0, 4);
output = output.anchor('name');

alert(output);
</script>

 

 

String 객체의 메서드는 자기 자신의 내용을 바꾸지 않고 리턴하기 때문에 조금 귀찮지만 이렇게 사용해주어야 한다.

하지만 메서드 체이닝을 사용하면 다음과 같이 연속해서 메서드를 사용할 수 있다.

 

<script>
var output = 'VellaLog';

output - output.toLowerCase().substring(0, 4).anchor('name');

alert(output);
</script>

 

 

 

 

5. Array 객체의 생성

Array 객체는 여러가지 자료를 쉽게 관리할 수 있게 도와주는 객체이다. 아래 표의 생성자 함수를 사용해서 생성한다.

 

Array 생성자 함수
생성자 함수	설명
Array()	빈 배열을 만듦
Array(number)	매개변수만큼의 크기를 가지는 배열을 만듦
Array(mixed, ..., mixed)	매개변수를 배열로 만듦

 

 

 

5-1. Array 객체의 속성과 메서드

 

배열은 몇 개의 요소를 가지고 있는지 나타내는 length 속성을 가지고 있다. 

단순 for 반복문을 사용해 Array 객체의 요소를 확인할 때 length 속성을 사용한다.

 

<script>
var array = [20, 492, 619];

for (let i = 0; i < array.length; i++) {
    const element = array[i];
}
</script>

 

Array 객체는 다음과 같은 메서드를 갖는다.

메서드 이름	설명
concat()	매개 변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴
join()	배열 안의 모든 요소를 문자열로 만들어 리턴
pop()	배열의 마지막 요소를 제거하고 리턴
push()	배열의 마지막 요소에 새로운 요소를 추가
reverse()	배열의 요소의 순서를 뒤집음
slice()	배열 요소의 지정한 부분을 리턴
sort()	배열의 요소를 정렬하고 리턴
splice()	배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴

String 객체와 달리 Array 메서드는 자기 자신을 직접적으로 바꾸는 경우가 있다.

 

 

5-2. Array 객체의 요소 제거

 

Array 객체의 splice() 메서드를 사용하면 특정 요소를 제거하는 기능을 쉽게 만들 수 있으며 프로토타입에 remove() 메서드를 추가하면 배열의 요소를 쉽게 제거할 수 있다.

 

Array.prototype.remove = function(index) {
	this.splice(index, 1);
}

 

위 코드는 매개 변수로 삭제하고자 하는 인덱스를 적으면 되는 코드이다.

 

반복문을 사용해 특정 조건에 맞는 Array 객체의 요소를 제거할 땐 주의사항이 있다.

 

Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

var array = [52, 2049, 330, 30, 421, 100];

for (let i = 0; i < array.length; i++) {
    if(array[i] > 100) {
        array.remove(i);
    }
}

alert(array);

 

위 코드는 100이 넘는 배열의 요소를 모두 삭제할 것 처럼 보이지만 결과는 그렇지 않다. 이유는 배열의 요소가 제거 되면서 인덱스가 앞으로 당겨지기 때문이다. 따라서 역 for 반복문(뒤에서부터 실행)을 사용해야한다.

 

Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

var array = [52, 2049, 330, 30, 421, 100];

for (let i = array.length; i >= 0; i--) {
    if(array[i] > 100) {
        array.remove(i);
    }
}

alert(array);

 

출력 결과

 

 

 

 

6. JSON (JavaScript Object Notation)

ES5부터 정식으로 JSON 객체를 지원한다.

JSON은 자바스크립트 객체의 형태를 가지는 문자열을 뜻한다.

 

JSON 객체의 메서드
메서드 이름	설명
JSON.parse()	JSON 형식의 문자열을 자바스크립트 객체로 만든다.
JSON.stringify()	자바스크립트 객체를 JSON 형식의 문자열로 만든다.

 

자바스크립트에서 JSON 형태로 백엔드에 데이터를 보내기 위해선 JSON.stringify()를 사용한다.

JSON과 관련되어 Date 객체도 toJSON()이라는 메서드를 가지게 됨.

 

 

 

 

---

썸네일