인사이드 자바스크립트(송형주) http://www.yes24.com/Product/Goods/37157296 책을 참고했습니다.
JS 데이터 타입과 연산자
JS 기본 타입
특징
그 자체가 하나의 값을 나타냄.
JS는 느슨한 타입 체크 언어. 변수를 선언할 떄 타입을 미리 정하지 않고, var 라는 한 가지 키워드로만 변수를 선언.
이렇게 선언된 변수에는 어떤 타입의 데이터라도 저장하는 것이 가능.
1. 숫자
var num = 5/2;
console.log(num); // (출력값) 2.5
console.log(Math.floor(num)) // (출력값) 2
위의 코드와 같이 자바스크립트에서는 5와 2가 둘 다 정수가 아닌 실수로 취급되므로 소수 부분까지 출력된 2.5가 결과값이 된다.
자바스크립트는 하나의 숫자형만 존재한다.(Number 타입) → 자바스크립트에서는 모든 숫자를 64비트 부동 소수점 형태로 저장하기 때문이다.이는 C 언어의 double 타입과 유사하다.
2. 문자열
// str 문자열 생성
var str = "test";
console.log(str[0], str[1], str[2], str[3]); // 출력값 test
// 문자열의 첫 글자를 대문자로 변경?
str[0] = 'T';
console.log(str); // (출력값) test자바스크립트에서는 한 번 생성된 문자열은 읽기만 가능하지 수정은 불가능하다.
3. 불린값
true, false
4. null과 undefined
두 타입 모두 JS에서 '값이 비어있음'을 나타낸다.
undefined
자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined이다. 이처럼 자바스크립트에서 undefined는 타입이자 값을 나타낸다.
null
// null 타입 변수 생성
var nullVar = null;
console.log(typeof nullVar === null); // (출력값) false
console.log(nullVar === null); // (출력값) true
null 타입 변수의 typeof 결과가 null이 아니라 object라는 것을 주의하자.
null 타입 변수인지를 확인할 때는 typeof 연산자가 아닌 일치 연산자(===)를 사용해서 변수의 값을 직접 확인해야 한다.
null 타입 변수는 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용한다.
5. 기본 타입과 표준 메서드
// 숫자 메서드 호출 / 숫자를 지수 형태의 문자열로 변환하며 인자로 받는 값은 소수점 아래 몇 번쨰 자리까지 호출할 것인지 지정
var num = 0.5;
console.log(num.toExponential(1)); // '5.0e-1'
// 문자열 메서드 호출
console.log("test".charAt(2)); // 's'
기본 타입 값들에 대해서 객체 형태로 메서드를 호출할 경우, 이들 기본값은 메서드 처리 순간에 객체로 변환된 다음, 각 타입별 표준 메서드를 호출하게 된다. 그리고 메서드 호출이 끝나면 다시 기본값으로 복귀하게 된다.
자바스크립트 참조 타입(객체 타입)
자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 해시라는 자료구조와 상당히 유사하다.
자바스크립트에서 기본 타입은 하나의 값만을 가지는 데 비해, 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.
프로퍼티의 성질에 따라 객체의 프로퍼티는 함수를 포함할 수 있으며, 자바스크립트에서는 이러한 프로퍼티를 메서드라고 부른다.
1. 객체 생성
자바에서는 클래스를 정의하고, 클래스의 인스턴스를 생성하는 과정에서 객체가 만들어진다.
이에 비해 자바스크립트에서는 클래스라는 개념이 없고, 객체 리터럴이나 생성자 함수 등 별도의 생성 방식이 존재한다.
객체를 생성하는 방법에는 크게 세 가지
1. 기본 제공 Object()객체 생성자 함수 이용
// Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();
// foo 객체 프로퍼티 추가
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';
console.log(typeof foo) // (출력값) object
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male'2. 객체 리터럴을 이용
var foo = {
name: 'foo',
age: 30,
gender: 'male'
}객체 리터럴 방식 이용(사실 객체 리터럴로 생성한 객체는 Obejct()라는 내장 생성자 함수로 생성된 것이다.)
3. 생성자 함수 이용
2. 객체 프로퍼티 읽기 쓰기 갱신
var foo ={
name : 'foo',
major: 'cs',
};
console.log(foo.name); // 출력값 foo
console.log(foo['name']); // 출력값 foo
console.log(foo.nickname); // 출력값 undefined
// 대괄호 표기법만을 사용 : 프로퍼티가 표현식이거나 예약어일 경우
foo['full-name'] = 'foo bar';
3. for in 문과 객체 프로퍼티 출력, 프로퍼티 삭제
var foo ={
name : 'foo',
major: 'cs',
};
var prop;
for (prop in foo){
console.log(prop, foo[prop]);
}
// 출력 결과->
// name 'foo'
// major 'cs'
delete foo.name;
console.log(foo.name); // undefined
delete foo;
console.log(foo.major); // 출력값 cs
// delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체는 삭제 못함.참조 타입 특성
- 실제 값을 아닌 참조값을 가지고 있음. 변수가 객체 자체를 저장하고 있는 것이 아닌, 생성된 객체를 가리키는 참조값을 저장.
- 동등 연산자(==)를 사용하여 두 객체를 비교할 때에도 객체의 프로퍼티 값이 아닌 참조값을 비교. 기본 타입을 비교할 때에는 값을 비교
- 함수 호출 방식이 call by reference방식이라는 점.
함수를 호출할 때 인자로 기본 타입의 값을 넘길 경우, 호출된 함수의 매개변수로 복사된 값이 전달됨.
함수를 호출할 때 인자로 참조 타입인 객체를 전달할 경우, 객체의 프로퍼티 값이 함수의 매개변수로 복사되지 않고, 인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달됨. - 참조 타입, call by reference
- 기본 타입의 경우, 함수 호출 방식이 call by value
프로토타입
자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 그것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특징이 있다.
자바스크립트에서는 이러한 부모 객체를 프로토타입 객체(프로토타입)라고 부른다.
앞서 toString() 메서드를 정의하지 않았지만 에러가 발생하지 않음
→ foo 객체의 프로토타입에 toString() 메서드가 이미 정의되어 있고, foo 객체가 상속처럼 toString() 메서드를 호출했기 때문이다.
ECMAScript 명세서에는 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다고 설명한다. 크롬 브라우저에서는 proto 가 바로 이 숨겨진 [[Prototype]] 프로퍼티를 의미한다. 즉, foo 객체는 자신의 부모객체를 __proto__라는 내부 프로퍼티로 연결하고 있는 것이다.
모든 객체의 프로토타입은 객체를 생성할 때 결정된다. 위의 코드의 처럼 객체 리터럴 방식으로 생성된 객체의 경우 Object.prototype객체가 프로토타입 객체가 된다는 것만 기억하자.
foo 객체의 proto 프로퍼티가 가리키는 객체가 바로 Object.protype 이며, toString(), valueOf() 등과 같은 모든 객체에서 호출 가능한 자바스크립트 기본 내장 메서드가 포함되어 있다. 그 결과 foo객체는 foo.toString() 과 같이 자신의 프로토타입인 Object.prototype 객체에 포함된 다양한 메서드를 마치 자신의 프로퍼티인 것처럼 상속받아 사용할 수 있다.
객체를 생성할 떄 결정된 프로토타입 객체는 임의의 다른 객체로 변경하는 것도 가능하다. 즉, 부모 객체를 동적으로 바꿀 수도 있다. 자바스크립트에서는 이러한 특징을 활용해서 객체 상속 등의 기능을 구현한다.
배열
배열은 객체의 특별한 형태. [] 대괄호 이용
- 배열의 length 프로퍼티
배열 메서드는 length 프로퍼티를 기반으로 동작함. ex) push(): length 값 위치에 새로운 원소값 추가
배열 내에서 가장 큰 인덱스에 1을 더한 값. 코드를 통해 명시적으로 값 변경 가능. - 배열과 일반 객체의 차이점
- length 프로퍼티 존재 여부
- 배열 표준 메서드 호출 여부.
- 객체 리터럴 방식으로 생성한 객체
- Object.prototype 객체가 프로토타입
- 배열
- Array.prototype 객체가 프로토타입.
- Array.prototype 객체는 배열에서 사용할 push(), pop() 같은 표준 메서드를 포함하고 있음.
그리고 Array.prototype 객체의 프로토타입은 Object.prototype 객체가 된다. - 객체는 자신의 프로토타입이 가지는 모든 프로퍼티 및 메서드들을 상속받아 사용할 수 있다고 했으므로, 배열은 Array.prototype에 포함된 배열 표준 메서드와 Object.prototype의 표준 메서드들을 모두 사용할 수 있다
- 객체 리터럴 방식으로 생성한 객체
- 배열도 객체
4. 배열 생성
1) 배열 리터럴
arr = []2) Array 생성자 함수
var foo = new Array(3);
console.log(foo); // [undefined, undefined, undefined]
console.log(foo.length); // 3
var bar = new Array(1, 2, 3);
console.log(bar); // [1, 2, 3]
console.log(bar.length); // 35. 배열 삭제
1) delete 연산자
var arr = ['zero', 'one', 'two', 'three'];
delete arr[2];
console.log(arr); // ["zero", "one", undefined, "three"]
console.log(arr.length); // 4
2) splice() 배열 메서드
splice(start, deleteCount, item...)
- start -> 배열에서 시작 위치
- deleteCount -> start에서 지정한 시작 위치부터 삭제할 요소의 수
- item -> 삭제할 위치에 추가할 요소
var arr = ['zero', 'one', 'two', 'three'];
arr.splice(2, 1);
console.log(arr); // ["zero", "one", "three"]
console.log(arr.length); // 3
6. 유사 배열 객체
일반 객체에 length라는 프로퍼티가 있으면 유사 배열 객체.
객체임에도 불구하고, apply() 메서드를 사용하면 자바스크립트의 표준 배열 메서드를 사용하는 게 가능해짐
var arr = ['bar'];
var obj = { name : 'foo', length : 1};
arr.push('baz');
console.log(arr); // ['bar', 'baz']
Array.prototype.push.apply(obj, ['baz']);
console.log(obj); // { '1': 'baz', name: 'foo', length: 2 }
연산자
typeof 연산자
피연산자의 타입을 문자열 형태로 리턴
==(동등) 연산자와 ===(일치) 연산자
==연산자는 비교하련느 피연산자의 타입이 다를 경우에 타입 변환을 거친 다음 비교한다.
===연산자는 피연산자의 타입이 다를 경우에 타입을 변경하지 않고 비교한다.
!!연산자
피연산자를 불린값으로 변환. 객체는 비어있는 빈 객체라도 true로 변환되는 것에 주의
console.log(!!0); // false
console.log(!!1); // true
console.log(!!'string'); // true
console.log(!!''); // false
console.log(!!true); // true
console.log(!!false); // false
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!{}); // true
console.log(!![1,2,3]); // true