TIL : JavaScript 데이터타입

자료구조를 알아보자.

 

원시값 : 객체를 제외한 모든 타입은 불변 값을 정의한다. 이를 원시값이라고 한다.

Boolean : true or false

Number: 1. 배정밀도 부동소수점 숫자 (double precision floating number) 로 알려진 64비트 형식의 IEEE-754에 저장.

                2. BigInt : 일반적인 숫자는 2⁵³ 이상이거나 - 2⁵³ 이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어짐. 아주 특                                   별한 경우에만 사용됨

null : 어떤 값이 의도적으로 비어있음을 표현한다. 불리언 연산에서는 거짓으로 취급된다.

undefined: 값을 할당하지 않은 변수는 undefined값을 가진다. 그리고 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우에                                undefined를 반환한다. 함수는 값을 명시적으로 반환히지 않으면 undefined를 반환한다.

 

null과 undefined 

공통점: "없음"을 의미

차이점: null은 주로, 이 값이 없다라고 선언 할 때 사용한다.

            undefined는 아직 값이 설정되지 않은 것을 의미한다. (서버와 통신시 데이터가 들어오는 속도가 렌더링 속도보다 조금 느리기 때              문에 처음에 변수가 undefined로 찍힘)

 

객체 : 식별자로 참조할 수 있는 메모리 상의 값. 

 중괄호를 이용해 만든다. {...} 속성 값으로 다른 객체를 포함해 모든 타입을 사용. 속성은 'key'값으로 식별하며, 문자열이나 심볼을 키로 사용 가능.

 

리터럴과 프로퍼티

중괄호 {...}안에는 '키:값' 쌍으로 구성된 프로퍼티가 들어감.

let dog = {
	name: "kongjji"
	age: 2
}

// 점 표기법으로 프로퍼티 값 얻기

alert(dog.name); // kongjji
alert(dog.age); // 2

 

프로퍼티 값엔 모든 자료형이 올 수 있다. 불린형으로 프로퍼티를 추가 하면

dog.isMale = true;

 

delete연산자로 프로퍼티를 삭제할 수도 있다.

delete dog.age;

 

여러 단어를 조합해서 프로퍼티 이름을 만들면 프로퍼티 이름을 따로 묶어주자.

let dog = {
	name : "kongjji",
	age : 2,
	"like 고구마": true //복수 단어는 따옴표로 묶기.
};

마지막 프로퍼티 끝은 , 로 끝날수도, 안붙여도 된다.

 

 

대괄호 표기법

여러단어를 조합해서 프로퍼티 키를 만들면, 점 표기법으로 프로퍼티 값을 읽을 수 없다. 

//문법 에러가 남
dog.likes 산책 = true;

 

'점'은 키가 '유효한 변수 식별자' 인 경우만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 함. 또한 숫자로 시작하지 않아야 하고 $와 _를 제외한 특수문자가 없어야한다.

 

키가 유요한 변수 식별자가 아니라면 점 표기법 대신 '대괄호 표기법'이라 불리는 방법을 사용 할 수 있다.

대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.

 

let dog = {};

//set
dog["likes 고구마"] = true;

//get
alert(dog["likes 고구마"]); //true

//delete
delete dog["likes 고구마"];

이렇게 하면 문법에러는 나지 않지만 대괄호 안에서 문자열 사용시엔 따옴표로 묶어주어야 함을 기억하자. 

 

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이를 응용하면 코드를 유용하게 작성할 수 있음.

 

let dog = {
	name: "kongjji",
        age: 2 
};

let key = prompt("강아지의 어떤 정보를 얻고 싶나요?", "name");

//변수로 접근
alert(dog[key]); //kongjji (프롬프트 창에 "name"을 입력한 경우)

점 표기법은 이런 방식이 불가능함.

let dog={
  name:"kongjji",
  age:2,
};

let key="name";
alert(user.key) // undefined

 

계산된 프로퍼티

객체를 만들 때 객체의 리터럴 안의 프로퍼티가 대괄호로 둘러쌓여 있는 경우에 계산된 프로퍼티라고 함. (computed property)

예시:

let fruit = prompt("어떤 과일을 구매하겠습니까?", "apple");

let bag = {
	[fruit]:5,
};

alert(bag.apple); // fruit에 "apple"이 할당되었다면, 5가 출력됨.

위 예시의 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.

사용자가 프롬프트 대화상자에 apple을 입력했다면 bag엔 {apple:5}가 할당되었을 것이다.

 

아래는 위와 같은 동작을 함.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

//변수 fruit을 사용해 프로퍼티 이름을 만듦.
bag[fruit] = 5;

두 방식 중 계산된 프로퍼티를 사용한 예시가 더 깔끔해 보인다. 한편, 다음 예시처럼 대괄호 안에는 복잡한 표현식이 올 수 있음.

let fruit = 'apple';
let bag = {
	[fruit + 'Computers']: 5 //bag.appleComputers = 5
};

 

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력함. 그런데 작성하기 번거로움.

프로퍼티 이름이 확정된 상황이고 단순한 이름이면 처음엔 점 표기법을 사용하다가 뭔가 복잡한 상황이 발생하면 대괄호 표기법으로 바꾸는 경우가 많음.

 

단축 프로퍼티

실문에서 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있다.

예: 

fucntion makeUser(name, age) {
	return{
    	name: name,
        age: age,
        // ...등등
    }
}

let user = makeUser("John", 30)
alert(user.name); // John

위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일함. 이런 경우 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있음.

name: name 대신 name만 적어줘도 프로퍼티를 설정 가능.

function makeUser(name, age) {
	return{
    	name, //name: name과 같음
        age,  //age: age와 같음
        //...
    };
}

한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용 할 수도 있다.

 

let user = {
    name, // name: name
    age: 30
};

 

프로퍼티 이름의 제약사항

아시다시피 변수 이름(키)엔 'for', 'let', 'return' 같은 예약어를 사용하면 안됩니다.

그런데 객체 프로퍼티엔 이런 제약이 없다.

 

//예약어를 키로 사용해도 가능.
let obj = {
	for: 1,
    let: 2,
    const: 3
};

alert( obj.for + obj.let + obj.return); //6

어떤 문자형, 심볼형 값도 프로퍼티 키가 될 수 있음.

문자형이나심볼형에 속하지 않은값은 문자열로 자동 형 변환됨.

 

let obj = {
	0: "test"  // "0":"test"와 동일.
};

//숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근.
alert(obj["0"]); //test
alert(obj[0]);   //test (동일한 프로퍼티)

 

 

'in' 연산자로 프로퍼티 존재 여부 확인하기

자바스크립트 객체의 중요한 특징 중 하난 다른 언어와 달리 , 존재하지 않는 프로퍼티에 접근하려고 해도 에러가 발생하지 않고 undefined를 반환하는 것.

이런 특징을 응용하면 프로퍼티 존재 여부를 쉽게 확인 가능.

let user ={};

alert(user.noSuchProperty === undefined); true는 '프로퍼티가 존재하지 않음'을 의미

 

이렇게 undefined와 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인 가능.

문법은 다음과 같다.

 

"key" in object

예시:

let user = { name: "John", age: 30 };

alert("age" in user); //user.age가 존재하므로 true 출력.
alert("blabla" in user); //user.blabla는 존재 않기 때문에 false 출력.

in 왼쪽엔 반드시 프로퍼티 이름이 와야함. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다.

따옴표를 생략하면 아래와 같이 엉뚱한 변수가 조사 대상이 된다.

let user = {age:30};

let key = "age";
alert(key in user); // true, 변수 key에 저장된 값 ("age")을 사용해 프로퍼티 존재 여부를 확인.

 

대부분 일치 연산자를 사용해 프로퍼티 존재 여부를 알아내는 방법("=== undefined")은 꽤 잘 동작한다. 그런데 가끔은 이 방법이 실패할 때도 있다. 이럴 때 in을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있다.

프로퍼티는 존재하는데 값에 undefined를 할당한 예시를 살펴보자.

 

let obj = {
   test: undefined
};

alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력. 그런데 프로퍼티 test는 존재.
alert( "test" in obj ); //`in`을 사용하면 프로퍼티 유무를 제대로 확일할 수 있다. (true가 출력)

obj.test는 실제 존재하는 프로퍼티이다. 따라서 in 연산자는 정상적으로 true반환.

undefined는 변수는 정의 되어있지만 값이 할당되지 않은 경우 쓰여서 프로퍼티 값이 undefined인 경우는 흔치 않다. 값을 알 수 없거나(unknown), 값이 비어있다(empty)는 것을 나타낼 때 주로 null사용. 

 

'for...in' 반복문

for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다. for...in은 앞서 학습했던 for( ;; ) 반복문과는 완전히 다르다.

 

문법:

for (key in object) {
	// 각 프로퍼티 키(key)를 이용해 본문(body)을 실행.
}

아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력된다.

let user = {
    name: "John",
    age: 30,
    isAdmin: true
};

for(let key in user) {
	//키
    alert( key ); // name, age, isAdmin
    // 키에 해당하는 값
    alert( user[key] ); //John, 30, true
}

for...in 반복문에서도 for(;;) 문처럼 반복 변수(looping variable)를 선언. 반복 변수명은 자유롭게 정할 수 있다. 'for (let prop in obj)' 같이 key말고 다른 변수명을 사용해도 괜찮음.

 

객체 정렬 방식

 

객체와 객체 프로퍼티를 다루다보면 "프로퍼티엔 순서가 있을까?" 라는 의문이 생긱기 마련. 반복문은 프로퍼티를 추가한 순서대로 실행될지, 그리고 이 순서는 항상 동일할지 궁금해 진다. 객체의 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다. 

 

아래 객체에는 국제전화 나라 번호가 담겨있다.

 

let codes={
    "49" : "독일",
    "41" : "스위스",
    "44" : "영국",
    //..,
    "1" : "미국"
};

for (let code in codes) {
	alert(code); //1, 41, 44, 49
}

이 정수 프로퍼티들은 숫자의 순서대로 자동 정렬이 된다. 만약 그것을 막고 싶다면 ? 나라 번호가 정수로 취급되지 않도록 속임수를 쓴다. 

 

let codes = {
    "+49" : "독일",
    "+41" : "스위스",
    "+44" : "영국",
    // ..,
    "+1" : "미국"
};

for (let code in codes) {
	alert( +code ); //49, 41, 44, 1
}

이렇게 하면 원하는 순서대로 출력이 가능함.

 

 

 

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

JavaScript의 타입과 자료구조 - JavaScript | MDN

 

JavaScript의 타입과 자료구조 - JavaScript | MDN

 

 

JavaScript의 타입과 자료구조 - JavaScript | MDN

https://ko.javascript.info/data-types

자료구조와 자료형

https://learnjs.vlpt.us/basics/02-variables.html

02. 변수 · GitBook