22-10-04-JavaScript(2)

Boolean

변수 : const (참조 변경 불가), var (X), let (변경 가능)
const 를 사용하여 중간에 값이 변경이 되었는지 안되었는지를 알 수 있으므로 const 권장

자바스크립트에서는 true, false로 사용
다른 언어에서는 "True"로 사용하는 경우가 존재

Boolean('');

빈 문자는 false로 평가

Boolean(' ');

공백이 존재하는 경우 true로 평가

Boolean(0);

0 은 false로 평가

Boolean(100);

0 제외한 나머지 수들은 true로 평가
-100 또한 true로 평가

Boolean(undefined/null인 경우);

false로 출력
null 또한 마찬가지로 false로 출력

Boolean(Infinity);

true로 출력

Boolean의 주의할 점

Boolean([]); -> true임, 다른 언어에서는 false로 처리됨
Boolean({}); -> true

비교연산

console.log(one === two);
console.log(one !== two); -> 타입까지 비교한다.

== , != -> 동일한 값일 경우 true (10 == '10)
===, !== -> 동일한 값과 동일한 유형일 경우 true

js의 경우 ==로 비교하면 true로 나오지만 다른 언어에서는 false로 출력함
견고한 코딩을 위해 ===를 권함

논리연산

true : 1
false : 0
and(&&) : 곱
or(||) : 합
not(!) : 부정

* 주의할점)
!(false) -> true
!!(false) -> false
!! => boolean 형으로 표현하고 싶은 경우에 사용

논리연산 !! 사용

!!("") -> false
!![] -> true (주의 - 다른 언어는 false로 나옴)

!!NaN -> false
!!null -> false
!!undefined -> fase

문자열 연산

주의!!! 문자열은 true값을 가짐

'false' == false -> false값
!'false' -> false 값
!'0' -> false (문자는 true 값임!!!)

단락 평가

username = ''; //false
username && '이름~~';
// and(&&) 연산에서 앞 부분이 false인 경우에는 뒤에를 읽지 않는다.

username || '이름~~';
// or(||) 연산에서 앞 부분이 false여도 뒤의 값을 봐야한다.

헷갈리는 부분 정리

true와 숫자값의 비교

console.log(true == 1); //true ==는 타입 상관없음
console.log(false == 0); // true
console.log(true === 1); //false 
console.log(false === 0); //false

NaN, null, undefined 비교

console.log(NaN == NaN); // false
// NaN은 자기 자신이 자기 자신이 아닌 케이스라고 생각 (나중에 자세히 기록 예정)
console.log(NaN === NaN); // false
console.log(false == null); // false
console.log(false == NaN); // false
console.log(false == undefined); // false

+ 연산자를 이용한 형변환

// + 가 붙으면 숫자형으로 형변환
console.log(+false); // 0
console.log(+true); // 1
console.log(false*1); // 0
console.log(true*1); // 1
console.log(1 + ""); // 1 (String형)
console.log(NaN + ""); // NaN
console.log(Infinity + ""); // Infinity
console.log(true + ""); // true (String형)
console.log(false + ""); // false (String)
console.log("" + 1); // 1 (String)
console.log(+"100" + 10); // 110
console.log("2"+"2"-"2"); // 20
// - 연산자는 수학적 연산으로 Number 던져줌

Object

Object 기본 형태

// 1. 기본 형태 key : value의 형태를 가짐
let newuser = {
	id : 'lee',
	pw : '1234',
	name : 'yoojin',
	email : '123@123.com',
	active : true
}
console.log(newuser['id']);
console.log(newuser.id);

Object 여러개 사용

// 2. 
let user = [{
    // key: value
    id : 'leee',
    pw : '1234',
    name : 'yoojin',
    email : '123@123.com',
    active : true,

},{
    // key: value
    id : 'lion',
    pw : '2345',
    name : 'yoojinlee',
    email : '123@1sd23.com',
    active : true,

}]
console.log(user[0]['id']);

Object 선언 방법

// 3. 선언 방법
let a = 10;
let b = 20;
let c = 30;
let e = {a,b,c};
console.log(e);

Object 값 변경 방법

// 4. 값 변경 방법
e['a'] = 50;
console.log(e);

Object key값 문자열 아닌 경우

// 5. key 값에 문자열 외에 다른 값을 넣었을 경우
let txt = 'hello';
let txt2 = {
    0: 'h',
    1: 'e',
    22: 'l',
    3: 'l',
    4: 'o',
    ex: 'q'
}

console.log(txt[1]); // index[1]
console.log(txt2[22]); // 유사 배열 객체
// key가 문자열인 경우 ''로 불러옴
// 문자열이 아닌 경우 key 값으로 불러옴
console.log(txt2['ex']);

Object value 값 문자열 아닌 경우

// 6. value 값으로 문자열 외에 다른 값을 넣었을 경우
let test = {
    one: sum,
    two : console.log,
    three : window.innerWidth,
    four : [10,20,30],
    five : '10',
    six : 100
}
console.log(test);
test.two('lee!!');

Object key, value만 뽑아내는 방법

// 7. key와 value만 뽑아낼 수 없을까?
console.log(Object.keys(newuser));
console.log(Object.values(newuser));
// 쌍으로 뽑아내기
console.log(Object.entries(newuser));

map 사용하여 뽑아내기

array.map과는 다른 map

newuser.keys();
newuser.values();
newuser.entries();

object와 object.prototype 차이

prototype는 object 명시 안함

Object spread 용법 (object.asign 대신) (업뎃)

let 회원정보업데이트 = {
    name : 'cat',
    email : '234@234.com',
}

// ... 를 통한 새로운 친구들이 newuser에 할당됨
newuser = {...newuser, ...회원정보업데이트};
console.log(newuser);

// 값을 펼친다.
let newuser2 = {...newuser};  // 서로 다른 애 spread 를 사용하면 원본을 만지지 않는다.
newuser2['id'] = 'helloworld';
console.log(newuser2); // id가 helloworld
console.log(newuser); // id가 lee

Array

대괄호 사용 []

값의 변경이 가능하고 대부분 동일한 자료의 형태가 반복

let 과일 = ['사과','수박','복숭아', '딸기','바나나'];
console.log(과일[1]); // 수박
let 꺼낸과일 = (과일.pop()); // 마지막을 꺼냄 (바나나)
console.log(과일);
과일.push('멜론');
console.log(과일);
과일.push(꺼낸과일);
console.log(과일);

원본 수정을 피하자

let x = [10,20,30,40];
console.log([...x].pop()); // 40
// 원본 수정을 안할려면 ...spread 용법을 사용하여 새로운 객체를 만든다.
console.log(x); // 10,20,30,40
let y = [...x]; // 원본 아님
y.pop();
console.log(y);

splice()

기존 요소를 삭제하거나 교체하거나 새 요소를 추가
(인덱스, 카운트, 아이템) 순서로 인자를 전달

// 3번째 인덱스에서 1개 삭제하기
console.log(data3.splice(3,1));
data3.splice(3); //3번 인덱스부터 전부 삭제

// 아이템 추가 (0개 삭제)
data3.splice(3,0, '한라봉');
data3.splice(3,1, '제주감귤');
// 3번 인덱스부터 1개 삭제하고 제주감귤 추가

// 한번에 여러 목록 추가하기
data3.splice(2,1,...['옥돔','갈치']);