[JS]_

wstudee·2021년 6월 5일
0

개인공부

목록 보기
1/1

JavaScript의 데이터 타입과 연산자

데이터타입

기본타입

숫자(Number)

문자열(String)

불린값(Boolean)

undefined

null

참조타입

객체: 배열(Array), 함수(Funcion), 정규표현식


기본타입

  • 숫자, 문자열, 불린값, null, undefined
  • typeof 연산자 : 피연산자의 타입을 리턴
  • 자바스크립트는 느슨한 타입 체크 언어
    : 변수를 선언할 때 타입을 미리 정하지 않고, var라는 한 가지 키워드로만 변수 선언

숫자

  • 모든 숫자를 64비트 부동 소수점 형태로 저장하기 때문에 하나의 숫자형만 존재 Number
  • 모든 숫자를 실수로 처리하므로 나눗셈 연산에 주의
// java 
int num = 5/2 = 2 
// javascript
var num = 5/2 = 2.5
  • 정수 부분만 구하고 싶을 때 : Math.floor() 메서드 사용

문자열

  • 큰따옴표 또는 작은 따옴표로 생성
  • 한 번 정의된 문자열은 변하지 않음 : 읽기만 가능, 수정 불가능
var str = "string";
str[0] = "S";
console.log(str);  // string 

불린값

var bool = true;
console.log(typeof bool); // boolean

null 과 undefined

  • 값이 비어있음

undefined

  • "undefined는 타입이자 값"
    • 자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수의 타입은 undefined
    • undefined의 값은 undefined
var empty; 
console.log(typeof empty); // undefined

null

  • typeof null은 null이 아니라 Object
  • null 타입 변수인지 확인할 때 typeof 연산자가 아니라 일치연산자(===) 사용하여 변수의 값 직접 확인

참조타입(객체타입)

  • 숫자, 문자열, 불린, null, undefined 기본타입 제외한 모든 값
  • 배열, 함수, 정규표현식 등도 모두 객체로 표현됨
  • 자바스크립트에서 객체는 단순히 "이름(key):값(value)" 형태의 프로퍼티들을 저장하는 컨테이너

객체생성

  • 첫번째 방법 : 기본 제공 Object() 객체 생성자 함수 이용
  • 두번째 방법 : 객체 리터럴을 이용하는 방법
  • 세번째 방법 : 생성자함수 이용

Object() 생성자 함수 이용

//  Object()
var obj = new Object();

// obj 객체 프로퍼티 생성
obj.name = 'name';
obj.age = 30;
obj.gender = 'female';

console.log(typeof obj); // objec
console.log(obj);  // {name:"name", age:30, gender:"female"}

객체 리터럴 방식 이용

// 객체 리터럴(표기법)
var obj = {
	name : 'name',
	age : 30,
	gender : 'female'
};

console.log(typeof obj); // objec
console.log(obj);  // {name:"name", age:30, gender:"female"}

// {}안에 아무것도 적지 않은 경우
var emptyObj = {};
console.log(typeof emptyObj); // objec
console.log(emptyObj);  // {}
  • 중괄호{}를 이용해서 객체 생성
  • {}안에 아무것도 적지 않으면 빈 객체 생성
  • { 프로퍼티이름 : 프로퍼티값 }
    • 값 : 함수일 경우 이런 프로퍼티를 메서드라고 함

생성자 함수 이용

  • 생성자 함수 : 객체를 생성하는 함수
  • 나중에 자세히!

객체 프로퍼티 읽기/쓰기/갱신

// 대괄호 표기법 []
console.log(obj['name']); // name
console.log(obj[name]); // undefined 

// 마침표 표기법 .
console.log(obj.name); // name 

대괄호 표기법을 사용할 경우 프로퍼티를 '문자열' 형태로 만들어야 함

obj.age = 32; // 갱신 30->32 
obj.addr = 'Seoul'; // 동적생성

자바스크립트 객체의 프로퍼티에 값을 할당할 때

  • 프로퍼티가 이미 있는 경우 : 해당 값이 갱신
  • 없을 경우 : 새로운 프로퍼티가 동적으로 생성된 후 값 할당

NaN : Not a Number

  • 수치연산해서 정상적인 값을 엊지 못할 때 출력되는 값
  • ex. 프로퍼티 이름 : full-name 인 경우 마침표 표기법 사용하면
  • obj.full-name // NaN

객체 프로퍼티 출력 : for in

for in 문을 사용하면 객체에 포함된 모든 프로퍼티에 대해 루프 수행

var prop;
for ( prop in obj ){
	console.log(prop, obj[prop]);
}
// prop 에 프로퍼티 이름이 하나씩 할당됨 

객체 프로퍼티 삭제 : delete

delete 연산자 : 객체의 프로퍼티 삭제, 객체 자체 삭제 못함

var tempObj = {
	name : "name",
  	age : 100,
  	addr : "seoul"
}

console.log(tempObj.addr); // Seoul
delete tempObj.addr;  // addr 프로퍼티 삭제 
console.log(tempObj.addr); // undefined

delete tempObj;       // 객체 삭제 시도 
console.log(tempObj); // {name:"name",age:100}

참조타입의 특성

객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문에 배열이나 함수 또한 객체로 취급

var objA = {val : 100};
var objB = objA;

객체 비교

동등연산자 ==

기본 타입의 경우 을 비교

var a = 100;
var b = 100;
console.log(a==b); // true

참조 타입의 경우 참조값이 같아야 true

var objA = {value:100};
var objB = {value:100};
var objC = objB;

console.log(objA==objB); // false
console.log(objB==objC); // true

참조에 의한 함수 호출 방식

기본타입의 경우 값에 의한 호출(call by value)

  • 함수를 호출할 때 인자로 기본타입의 값을 넘길 경우
    호출된 함수의 매개변수로 복사된 값이 전달
  • 함수 내부에서 매개변수를 이용해 값을 변경해도 실제로 호출된 변수의 값이 변하지 않음

참조타입의 경우 참조에 의한 호출(call by reference)

  • 함수를 호출할 때 인자로 참조타입임 객체를 전달할 경우
    인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달
  • 함수 내부에서 실제 객체의 값 변경 가능

프로토타입

  • 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있음
    이런 부모객체를 프로토타입 객체(또는 프로토타입)이라고 함
  • 부모 객체의 프로퍼티를 내꺼처럼 쓸 수 있음
  • 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가짐(크롬 : __prototype--)
  • 모든 객체의 프로토타입은 자바스크립트 룰에 따라 객체를 생성할 때 결정됨
  • 임의로 다른 객체로 변경하는 것도 가능 = 부모 객체를 동적으로 바꿀 수 있음
  • 자바스크립트는 이런 특징을 활용해서 객체 상속 등의 기능을 구현함

배열

크기 지정하지 않아도 됨. 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않음

배열리터럴

객체리터럴은 중괄호{} 사용
배열리터럴은 대괄호[] 사용

var arr = ["apple", "banana", "red", "yello"];
console.log(arr[0]); // apple
  • 각 요소의 값만을 포함
  • 배열 내 위치의 인덱스값으로 접근

배열 요소 생성

아무 인덱스 위치에 값을 동적으로 추가할 수 있음

var emptyArr = [];
console.log(emptyArr); // undefined

// 요소 생성
emptyArr[0] = 0;
emptyArr[3] = 3;
emptyArr[7] = 7;

console.log(emptyArr);
// 크롬 [0, empty × 2, 3, empty × 3, 7]
// IE [0, undefined, undefined, 3, undefined, undefined, undefined, 7]

console.log(emptyArr.length);  // 8 

배열의 length 프로퍼티

배열 내의 가장 큰 인덱스 +1
배열의 length 프로퍼티 값 변경 가능

var arr = [0,1,2];
console.log(arr.length); // 3

arr.length = 5;
console.log(arr); // [0,1,2, undefinedx2 ] 

arr.length = 2;
console.log(arr); // [0,1]
console.log(arr[2]); // undefined 

배열과 객체

자바스크립트에서 배열 역시 객체. 그러나 배열과 일반 객체는 차이가 있음

var arr = ['orange', 'yellow', 'green'];
var obj = { 
  '0' : 'orange',
  '1' : 'yellow',
  '2' : 'green'
};

// 1.
console.log(arr[0]); // orange
console.log(obj[0]); // orange : 대괄호 안에 숫자는 자동으로 문자열로 변환됨 

// 2. typeof
console.log(typeof arr); // object
console.log(typeof obj); // object

// 3. length
console.log(arr.length); // 3
console.log(obj.length); // undefined

// 4. 배열 표준 메서드 호출 
arr.push('red'); // ['orange', 'yellow', 'green', 'red'];
obj.push('red'); // Uncaught TypeError : Object #<Object> has no method 'push'
// 배열과 객체의 프로토타입(부모객체)가 다르기 때문 

프로토타입

  • 객체 : Object.prototype - 객체
  • 배열 : Object.ptototype - Array.prototype - 배열

0개의 댓글