#3 자바스크립트 데이터 타입과 연산자
1. 자바스크립트의 데이터 타입
- 기본타입(숫자, 문자열, 불린값, nudefined, null)
- 참조타입(배열, 함수, 정규표현식)
1-1) 숫자는 num이라는 타입 하나만 있다.
1-2) 문자열은 작은 따옴표나 큰따옴표로 생성하며, char와 같이 하나의 문자만을 별도로 나타내는 데이터 타입은 없음.
또한 한번 정의된 문자열은 변하지 않는다!
1-3) null과 undefined는 모두 값이 비어있음을 나타내지만, undefined는 타입이자, 값을 나타낸다. null은 타입이 없으므로, 타입을 null로 확인할수 없다. 따라서 일치 연산자 (===)를 사용해서 값을 직접확인해야한다.
1-4) Object() 생성자 함수 사용
: 객체 프로퍼티 읽기/쓰기/갱신-> 대괄호표기법, 마침표 표기법 사용
1-5) for in문
var foo {
name : 'foo'
age : 30,
major : 'computer science'
};
//for in 문을 사용한 객체 프로퍼티 출럭
var prop;
for (prop in foo) {
console.log(prop, foo[prop])
}
// 출력결과
// name foo
// age 30
// major 'computer science'
1-6) 객체 프로퍼티 삭제
: 자바스크립트에서는 객체의 프로퍼티를 delete연산자를이용해 바로 삭제할수 있다. 단, 프로퍼티를 삭제할뿐 객체 자체를 삭제하지는 못한다.
1-7 ) 참조타입의 특성
: 자바스크립트에서는 기본타입인 숫자, 문자열, 불린값, null, undefinde 5가지를 제외한 모든 값은 객체다.
: 객체는 참조타입이라고 부른다. 모든 연산이 실제갑싱 아닌 참조값으로 처리되기 때문.
1-8) 객체비교
: 동등연산자(==)를 사용하여 두 객체를 비교할때도 프로퍼티값이 아닌 참조값을 비교한다.
2. 배열 (교재 p52)
2-1) 크기를 지정하지 않아도되고, 어떤위치에 어느타입의 데이터를 저장하더라도 괜찮다!
2-2) 배열 리터럴
: 배열 리터럴은 대괄호를 사용한다.
var coloArr = ['orange', 'yellow', 'blue', 'green','red'];
console.log(colorArr[0]); // (출력값) orange
console.log(colorArr[1]); // (출력값) yellow
console.log(colorArr[4]); // (출력값) red
2-3) length프로퍼티
: 현재 배열의 맨 마지막 원소의 인덱스 +1, 즉 맨끝에 값을 추가하는것
2-4) 배열과 객체
: 자바스크립트에서는 배열 역시 객체지만, 배열은 일반객체와는 약간 차이가 있다.
//배열
var colorsArray = ['orange','yellow', 'green'];
console.log(colorsArray[0]); // (출력값) orange
console.log(colorsArray[1]); // (출력값) yellow
console.log(colorsArray[2]); // (출력값) green
//객체
var colorsObj= {
'0':'orange',
'1' : 'yellow',
'2' : 'green'
};
console.log(colorsObj[0]) // (출력값) orange
console.log(colorsObj[1]); // (출력값) yellow
console.log(colorsObj[2]); // (출력값) green
//typeof연산자 비교
//모두 object다.
console.log(typeof colorsArray); // (출력값) object (not array)
console.log(typeof colorsObj); // (출력값) object
//length 프로퍼티의 존재여부
//colorsObj는 객체이므로 length 프로퍼티가 존재하지 않는다.
console.log(typeof colorsArray); // (출력값) 3
console.log(typeof colorsObj); // (출력값) undefined
//배열 표준 메서드 push해보기.
//colorsObj이 아니므로 배열에서 적용할수 있는 메서드를슬수 없다.
console.log(typeof colorsArray); // ['orange','yellow', 'green','red']
console.log(typeof colorsObj); // 불가
2-5) 배열의 프로퍼티 동적 생성
: 배열의 length 프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우만 변경된다.
2-6) 배열요소 삭제
: delete연산자로 배열 요소를 삭제하더라도 undefined가 할당될뿐 원소자체가 삭제되지않는다.
: splice메서드를 사용해서 완전히 삭제해준다.
2-7) splice()메서드
: splice(start, deletecount, item..)
: splice(배열시작위치, 시작위치부터 삭제할 요소의 수, 삭제할 위치에 추가할 요소)
2-8) 유사 배열 객체도 배열 메서드를 사용하는 것이 가능하다. (p65)
3. 기본 타입과 표준 메서드
3-1) 기본 타입의 경우는 객체가 아닌데 메서드를 호출할수 있는이유는? 메서드 처리순간에 객체로 변환된 다음 각 타입별 표준 메서드 를 호출하게된다. 그리고 메서드 호출이 끝나면 다시 기본값으로 복귀하게 된다.
: 즉 기본 타입도 이들을 위해 정의된 표준 메서드들을 객체처럼 호출할수 있다는것!
3-2) 연산자
: + 연산자는 더하기연산, 문자열 연결 연산을 수행
: typeof연산자는 피연산자의 타입을 문자열 형태로 반환한다. 여기서 null과 배열이 'object'이고 함수는 'function'이라는 점이다.
: 기본타입-숫자-'number'
: 기본타입-문자열-'String'
: 기본타입-불린값-'boolean'
: 기본타입-null-'object'
: 기본타입-undefined-'undefined'
: 참조타입-객체-'object'
: 참조타입-배열-'object'
: 참조타입-함수-'function'
3-3) 동등연산자(==)와 일치연산자(===)
: 동등연산자는 비교하려는 피연산자의 타입이 다를경우 타입변환을 거친다음 비교, 일치연산자는 타입이 다른경우 변경하지않고 그대로 배고함.
: 즉 일치연산자는 타입까지 완전히 같아야한다.
3-4) !!연산자
: 피연산자를 불린값으로 바꾼다.
console.log(!!0) // false
console.log(!!1) // ture
console.log(!!'String') // ture
console.log(!!'') // false
console.log(!!ture) // ture
console.log(!!false) // false
console.log(!!null) // false
console.log(!!undefined) // false
console.log(!!{}) // ture ----> 객체는 값이 비어도 ture임
console.log(!![1,2,3]) // ture
'개발공부 > JavaScript' 카테고리의 다른 글
[인사이드 자바스크립트] 교재 정리 #4 함수와 프로토타입 체이닝(2) (0) | 2022.05.12 |
---|---|
[인사이드 자바스크립트] 교재 정리 #4 함수와 프로토타입 체이닝(1) (0) | 2022.05.10 |
[바닐라 js로 크롬 앱만들기] 인강정리 (#8) (0) | 2022.04.07 |
[바닐라 js로 크롬 앱만들기] 인강정리 (#7) (0) | 2022.04.02 |
[바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) (0) | 2022.03.26 |
댓글