0714 | JSON 용도 / eval(), JSON.parse, JSON.stringify() / Nullish / &&, || / NaN, Infinity
0428 | JavaScript (2) // JSON, eval(), JSON.parse(), JSON.stringify(), JS연산자, 제어구조, 함수와 전역변수
[1] 자바스크립트 데이터 객체와 JSON생성방법 : 자바스크립트에서는 대입이라는 개념이 없다. 값을 저장하는 공간을 가지고 있는게 아니라 모든 변수가 참조변수이기 때문. JavaScript Object JavaScript
ala-nueva.tistory.com
01. JSON 개념
| ✅ Json 용도의 확장 |
var notices=[
{"id":1, "title":"json"},
{"id":2, "title":"hi"},
{"id":3, "title":"today"}
];
console.log(notices[1]); // id:2, title:hi 출력
: 데이터를 구분하기 위한 표현방법. XML, CSV, JSON (*XML을 대체하는 용도로 JSON도 사용됨)
: JSON도 데이터를 전달, 저장하는 용도로 많이 사용되는 추세
02. JSON parsing
| ✅ Json 파싱 eval() |
| : 문자열로 묶여있는 데이터를 해체하여 해당 변수값 반환. 단 eval 안에는 문법적으로 맞는 완전한 문장이 들어가야 한다. : 보안에 취약하여 선호되지않음 |
var code = "var x=30;";
eval(code); // 코드를 해체하면 var x=30 이라는 완전한 문장이 나온다
console.log(x); // 30
var str ="[1,2,3,4]";
console.log(str[0]); // '['
console.log(str[1]); // '[' 다음의 '1'출력
console.log(typeof str[1]); // 타입이 string임 즉 "1"로 반환됨
var list = eval(str); //parse처리
console.log(typeof list); // object
console.log(list); // [1,2,3,4]
#️⃣ JSON 표기법을 eval()처리 해본다면?
var str = '{"id":1, "username":"newlec", "pw":"2222"}'; // 한 줄에 문장으로서 쓸 수 없다면 eval이 안된다
var member = eval(str);
console.log(member.username);
//----------------------------
var str = '({"id":1, "username":"newlec", "pw":"2222"})'; // 이렇게 해야 newlec이 나온다
👉 괄호에 들어간 문장을 문자열처리해서 넣어줘야 제대로 한 문장으로 인식된다.
👉 eval()은 json을 파싱하는 역할이 아니라 '문장'을 파싱해주는 도구 ▶ 위와 같은 불편함 때문에 전문 파싱 도구가 나오게 됨
| ❎ Parsing & Parser ✔ Parsing: 구분분석, 원하는 데이터를 빼내는 것. 컴퓨터 과학에서 parsing은 일련의 문자열을 의미있는 token(어휘 분석의 단위) 으로 분해하고 그것들로 이루어진 Parse tree를 만드는 과정 ✔ Parser: Parsing을 하는 processor |
#️⃣ JSON 전문 parser ▶ JSON.parse()와 변환용 JSON.stringify()
: 키값은 보통 "쌍따옴표"나 '홑따옴표'없이도 인식이 되지만 JSON.parse를 사용할 경우는 문법을 엄격하게 지켜줘야 함
var str = '{"id":1, "username":"newlec", "pw":"2222"}'; // 문자열에 홑따옴표도 사용 불가
var str = "{\"id\":1, \"username\":\"newlec\", \"pw\":\"2222\"}"; //쌍따옴표가 인식되도록 역슬래시
var member=JSON.parse(str);
console.log(member.username );
: 일일히 따옴표를 수정해주기 어려우므로 JAON문자열 형태로 변환해주는 JSON.stringify()를 사용한다
var str ={id:2, username:"rain", pw:"3333"}; //키는 생략해도 변환 가능하지만 값에 들어가는 string의 "쌍따옴표"를 빼먹지말자
var json = JSON.stringify(str);
console.log(json); //{"id":2,"username":"rain","pw":"3333"}👉 값은 직접 쌍따옴표를 해줄수 밖에 없는게, pw:3333이라고 해놓았을 경우 stringify()입장에서는 이 타입을 넘버로 해야할지 string으로 변환해야할지 알 수가 없다. 그래서 value는 직접 표기를 하는게 맞는듯..!
03. 연산자
| ✅ 자바스크립트 연산자 |
: 문자열과의 연산에서 마이너스는 숫자가 된다 (덧셈은 그대로 문자열化)
var result =3.5-"A"; // 뺄수없을 때 결과값
console.log(result);
var result = 3.5-"2";
console.log(result);* NaN = Not A Number (숫자가 아닌데 연산이 들어갈경우의 표기)
: 비교연산자 또한 문자열이 숫자화
var result ="가나다">"하하하"; // 문자열은 한글자씩 유니코드로
console.log(result); //false
var result ="32">"4"; //'3'과 '4'의 유니코드를 비교한다
console.log(result); //false
var result =32>"4"; // 4가 숫자화되어 비교된다
console.log(result); //true* 문자열 비교 연산은 유니코드이긴한데 앞글자부터 하나씩 유니코드와 비교함
"A">"4"
문자열 "65"와 "4"의 첫 글자는 각각 '6'와 '4'. 유니코드 값으로 비교하면 '6'의 유니코드 값은 54이고 '4'의 유니코드 값은 52. 따라서 "65" > "4" 조건은 참.
| ✅ Truthy와 Falsy |
: JavaScript에서 Truthy와 Falsy는 조건식에서 참과 거짓을 나타내는 개념. 이는 JavaScript에서 값의 불리언(Boolean) 평가를 나타내는 방식
✔ if문 안에 객체가 들어갈 수 있다 ▶ truthy
✔ truthy범위가 넓기 때문에 falthy범위만 외우면 된다 ▶ false, null, undefiend, 0, NaN
✔ if(" ") 는 truthy이고 if('')는 falsy임을 유의할 것
Falsy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.
developer.mozilla.org
#️⃣ truthy와 falsy 연산 OR , AND 연산자
⏩ OR연산자
✔ OR 연산자의 특성 : 첫번째로 만나는 truthy를 반환한다
 |
| ❎ [MDN] The logical OR (||) (logical disjunction) 자바스크립트의 OR 연산자 용법 정의 operator for a set of operands is true if and only if one or more of its operands is true. 👉 하나 이상 피연산자가 참일때 참을 반환하는 operator. It is typically used with boolean (logical) values. When it is, it returns a Boolean value. 👉 boolean(논리값)과 보통 사용되며 boolean 값을 반환한다 However, the || operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value. 👉 그러나 || 연산자는 실제로 지정된 피연산자 중 하나의 값을 반환하므로 이 연산자를 non-boolean과 함께 사용하면 non-boolean 값 (그자체의 값)을 반환 |
var result = null || 0 || undefined || 'a' || '' || 3 || 'hello';
console.log(result); //a
var result = null || undefined || 0 ; // 만나는 값들이 쭉 falsy면 마지막 falsy값을 반환한다
console.log(result); // 0
var o5 = 0 || 'Dog';
console.log(o5); //Dog
var o5 = 'Cat' || 'Dog';
console.log(o5); //Cat
#️⃣ OR 연산자를 이용해서 초기화하기
var age = prompt("나이를 입력하세요"); // window가 가진 기능. window.가 생략됨
age = age || 10; // falsy일 때 10을 반환 > 기본값세팅으로 활용
console.log(age);
⏩ AND 연산자
✔ AND 연산자의 특성 : 첫번째로 만나는 falsy를 반환한다
 |
| ❎ The logical AND (&&) (logical conjunction) operator for a set of boolean operands will be true if and only if all the operands are true. Otherwise it will be false. 👉 두 피연산자가 모두 true여야 true를 반환하고 그렇지 않으면 false Logical AND (&&) evaluates operands from left to right, returning immediately with the value of the first falsy operand it encounters; if all values are truthy, the value of the last operand is returned. 👉 좌측에서 우측으로 피연산자를 평가하며, 첫번째로 만나는 falsy를 즉시 반환함 👉 만약 모두 truthy면 마지막 피연산자가 리턴된다 |
#️⃣ and연산자를 이용해서 입력값 확인하기
var kor=10;
var eng=20;
var math=30;
var valid = kor && eng && math;
if(valid)
console.log("모든 값이 입력됨"+ valid); //모두 입력되어 math값이 출력된다
else
console.log("입력 되지 않은 값이 존재합니다");
//-----------------------
var kor=10;
var eng=20;
var math=0;
var valid = kor && eng && math;
if(valid) // 처음으로 만난 falsy인 math가 반영됨
console.log("모든 값이 입력됨"+ valid);
else
console.log("입력 되지 않은 값이 존재합니다"); // else문이 출력
#️⃣ 연산자 우선순위 ( && > || )
var result = true || false && false;
console.log(result); // true
var result = (true || false) && false;
console.log(result); // false
result = 'Cat' || 'Dog' && 'Dragon';
console.log(result); // Cat
result = 'Cat' && 'Dog' || 'Dragon';
console.log(result); // Dog
04. 초기화
| ✅ Nullish |
| null, undefined일때 default string을 넣어준다 (* nullish 가 falsy를 의미하는것은 아니다 null로만 한정해서 기본값을 만들고 싶을때 사용한다) |
var kor = null ?? 100;
var kor1 = false ?? 200;
var kor2 = false || 300;
console.log(kor); // null일때 초기화 하므로 100
console.log(kor1); // falsy이지만 null이나 undefined는 아니므로 왼쪽값인 false반환
console.log(kor2); // 연산자로 인해 트루시인 300
var eng;
var eng1 = eng?? 200; // undefined도 가능
console.log("eng1: " + eng1); // 200
05. NaN과 Infinity
| ✅NaN 비교하기 |
| isNaN함수를 사용해서 NaN을 비교한다 * NaN = Not A Number (숫자가 아닌데 연산이 들어갈경우의 표기) |
var x = 3* 'a';
console.log(x); // NaN
console.log(x==NaN); // false
console.log(x===NaN); // false
console.log(isNaN(x));// true| ❎ NaN 개념 이해하기 NaN은 JavaScript에서 숫자가 아님을 나타내는 특수한 값입니다. NaN은 자기 자신과도 일치하지 않는 유일한 값입니다. 따라서 NaN과의 비교는 항상 false를 반환하며 x == NaN과 x === NaN의 결과는 모두 false입니다. NaN 값을 확인하려면 isNaN() 함수를 사용하거나, Number.isNaN() 메서드를 사용하여 확인해야 합니다. |
| ✅Infinity : number |
| isFinity 함수를 통해 유한한 수인지 확인한다 |
var x = Infinity;
console.log(typeof x); // number
console.log(Infinity-1000000); // Infinity. Infinity의 연산 불가
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
var y = Math.pow(100,10000000); // 100^10000000;
console.log("Math.pow:" + y); //Math.pow:Infinity
var z = isFinite(x);
console.log("finite: "+ z); // 유한한지 확인하는 함수이므로 false
console.log(!z); // true
| ❎ Infinity 개념 이해하기 JavaScript에서 Infinity는 무한대를 나타내는 특수한 값입니다. Infinity는 어떤 숫자보다도 큰 값으로 취급됩니다. 따라서 Infinity - 1000000의 결과는 여전히 Infinity입니다. 또한 무한대에서 어떤 수를 빼도 무한대가 유지되기 때문에 어떤 값을 빼든 Infinity를 얻게 됩니다 |