HighLight in your life~

null과 undefined 간의 변환은 느슨한 동등 비교 == 이 암시적 강제변환을 하는 예이다.

ES5 에 아래와 같이 명시되어 있다고 한다.

x가 null이고 y가 undefined면 true를 반환한다.

x가 undefined이고 y가 null면 true를 반환한다.

null과 undefined를 느슨한 동등 비교(==)하면 서로에게 타입을 맞춘다.

-> null과 undefined는 느슨한 동등 비교 시 상호 간의 암시적인 강제변환이 일어나므로 비교 관점에서 구분이 되지 않는 값으로 취급된다.

'null <-> undefined' 강제변환은 안전하고 예측 가능하며, 어떤 다른 값도 비교 결과 긍정 오류(False Positive) 할 가능성이 없다. null과 undefined를 구분되지 않는 값들로, 결국 동일한 값으로 취급하는 강제변환은 권장된다.

null과 undefined 자신들끼리 비교 결과가 true이므로, 이외의 값들과 비교했을 때 결과값이 true일 가능성은 없다.

강제변환이 필요하다면 느슨한 동등 연산자 (===)를, 필요하지 않으면 엄격한 동등 연산자 (===)를 사용하자.

1. 비교하기 : 문자열 -> 숫자

2. 비교하기 : * -> 불리언

== 의 피연산자 한쪽이 불리언 값이면 예외 없이 그 값이 먼저 숫자로 강제변환된다.

절대로, 두번 다시 == true 혹은 == false 같은 코드는 쓰지 말자.

'사용하지 말자' 라고 이야기한 연산자는 == 이지, === 가 아니다. === true 혹은 === false 는 강제변환을 허용하지 않기에 ToNumber 강제변환은 신경쓰지 않아도 된다.

3. NaN , +0 , -0

NaN은 그 자신과도 결코 동등하지 않다.

+0와 -0는 동등하지 않다.

&& 와 || 연산자의 결과값이 논리 값(불리언)이 아니다.
두 피연산자 중 한쪽(오직 한쪽의) 값이다. 즉, 두 피연산자의 값들 중 하나를 선택한다.
&& 또는 || 연산자의 결과값이 반드시 불리언 타입이어야 하는 것은 아니며,
항상 두 피연산자 표현식 중 어느 한쪽 값으로 귀결된다.

var a = 42;
var b = "abc";
var c = null;

a || b;
a && b;

c || b;
c && b;

-----------------------------------------------------------------------------------------------

|| , && 연산자는 우선 첫번째 피연산자(a , c)의 불리언 값을 평가한다. 피연산자가 비 불리언 타입이면 먼저 ToBoolean로 강제변환 후 평가를 계속한다.

|| 연산자는 그 결과가 true면 첫번째 피연산자(a , c) 값을, false면 두 번재 피연산자(b) 값을 반환한다.

&& 연산자는 그 결과가 true면 두번재 피연산자(b)의 값을, false면 첫 번재 피연산자( a , c)의 값을 반환한다.

||, && 표현식의 결과값은 언제자 피연산자의 값 중 하나이고, 평가 결과가 아니다. 

c && b 에서 c는 null이므로 falsy 값이다. 그러나 && 표현식은 평가 결과인 false(falsy를 강제변환)가 아니라 c 자신의 값, null로 귀결된다.

a || b;
// 대략 다음과 같다
a ? a : b;

a && b;
// 대략 다음과 같다
a ? b : a;

function foo( a , b) {
  a = a || "hello";
  b = b || "world";
 
  console.log(a + " " + b);
}

foo();

foo("second test", " best");

위의 || 연산자의 패턴은 falsy 값은 무조건 건너뛸 경우에만 사용해야 한다. 그렇지 않으면 조건 평가식을 삼항 연산자( ? : )로 더욱 명시적으로 지정해야 한다.

-----------------------------------------------------------------------------------------------

function foo() {
  console.log(a);
}

var a = 30;
a && foo();

&& 연산자는 첫번째 피연산자의 평가 결과가 truthy일 때에만 두 번째 피연산자를 '선택'한다고 했는데 이런 특성을 '가드 연산자(Guard Operator)라고 한다. 첫 번째 표현식이 두번째 표현식의 '가드' 역학을 한다.

-----------------------------------------------------------------------------------------------

|| , && 연산 결과가 실제로 true  / false 가 아니다. 

var a = 42;
var b = null;
var c = "foo";

if ( a && ( b || c)) {
  console.log( "Yes");
}

a && ( b || c) 표현식의 실제 결과는 true가 아닌 "foo" 다. if문은 이 "foo"를 불리언 타입으로 강제변환하여 true로 만든다.

-----------------------------------------------------------------------------------------------

false값을 Boolean으로 걍제변환하면 false다.

falsy 값(중요하므로 외워야 한다) : undefined, null, false, +0, -0, NaN, ""

------------------------------------------------------------------------------------------------------

*암시적 강제변환 : * => Boolean

아래의 표현식 사용시 암시적으로 Boolean으로 강제변환이 일어난다.

1. if() 문의 조건 표현식

2. for( ; ;) 에서 두번째 조건 표현식

3. while () 및 do ... while () 루프의 조건 표현식

4. ? : 삼항 연산 시 첫번째 조건 표현식

5. || (논리 OR) 및 && (논리 AND)의 좌측 피연산자

------------------------------------------------------------------------------------------------------

ToNumber : 숫자 아닌 값 -> 수식 연산이 가능한 숫자
1. true는 1, false는 0이 된다. undefined는 NAN으로, null은 0 으로 바뀐다.
2. 문자열 값에 ToNumber를 적용하면 대부분 숫자 리터럴 규칙/구문과 비슷하게 작동한다. 변환이 실패하면 결과는 (숫자 리터럴 구문 에러가 아닌) NaN이다.

var a = {
  valueOf: function() {
    return "42";
  }
};

var b = {
  toString: function() {
    return "42";
  }
};

var c = [4, 2];
c.toString = function() {
  return this.join( "" ); // "42"
};

Number(a);
Number(b);
Number(c);
Number( "" );
Number( [] );
Number( ["abc"] );

Number(true);
Number(false);
Number(undefined);
Number(null);

var a = new Boolean( false);
var b = new Number( 0 );
var c = new String( "" );

var d = Boolean( a && b && c );
var e = a && b && c;

a;
b;
c;
d;
e;

var a = 42;
var b = String(a);
var c = "3.14";
var d = Number(c);

a;
b;
c;
d;

문자열로부터 숫자 값의 파싱은 비 숫자형 문자(Non-Numeric Character)를 허용한다. 즉, 좌->우 방향으로 파싱하다가 숫자 같지 않은 문자를 만나면 즉시 멈춘다. 반면, 강제변환은 비 숫자형 문자를 허용하지 않기 때문에 NaN를 내고 멈춘다.

parseInt()는 문자열에 쓰는 함수이다. 인자가 숫자라면 애초에 parseInt()를 사용할 이유가 없다.

parseInt()은 예측 가능한 일관된 로직을 갖고 있다. 잘 사용하면 의미 있는 결과를 얻겠지만, 이상하게 사용해서 말도 안되는 결과가 나왔다고 자바스크립트를 탓하지 말자. (YOU DON'T KNOW JS, 타입과 문법, 스코프와 클로저, 페이지 110)

var a = "42";
var b = "0";
var c = 42;
var d = 0;

a + b;
c + d;

var a = [1, 2];
var b = [3, 4];
a + b;

let html = '<div class="box_title">제목 영역</div>';

let desc = "It's 3 o'clock."

let name = 'Mike';

let result = `My name is ${name}.`

let add = `2 더하기 3은 ${2+3}입니다.`

String#indexOf() : 문자열에서 특정 문자의 위치를 검색
String#charAt() : 문자열에서 특정 위치의 문자를 반환
String#substr(), String#substring(), and String#slice() : 문자열의 일부를 새로운 문자열로 추출
String#toUpperCase() and String#toLowerCase() : 대문자/소문자로 변환된 새로운 문자열 생성
String#trim() : 앞/뒤의 공란이 제거된 새로운 문자열 생성

대문자, 소문자 변환시키기 : toUpperCase() / toLowerCase()

let desc = "Hello World";

desc.toUpperCase();

desc.toLowerCase();

특정문자의 위치 검색: str.indexOf(text)

let desc = "Hello World";

desc.indexOf('Wo');

desc.indexOf('d');

if(desc.indexOf('lo')) {
  console.log('lo가 포함된 문장입니다.');
}

let list = [
"01. 들어가며",
"02. JS의 역사",
"03. 자료형",
"04. 함수",
"05. 배열"
];

let newList = [];

for (let i = 0; i <list.length; i++) {
  newList.push(list[i].slice(4));
}

console.log(newList);

// 금칙어 : 콜라
function hasCola(str) {
  if (str.indexOf("콜라")) {
   console.log("금칙어가 있습니다.");
  } else {
    console.log("통과");
  }
}

hasCola("와 사이다가 짱이야~");
hasCola("무슨소리, 콜라가 최고");
hasCola("콜라");

// 금칙어 : 콜라
function hasCola(str) {
  if (str.indexOf("콜라") > -1) {
   console.log("금칙어가 있습니다.");
  } else {
    console.log("통과");
  }
}

hasCola("와 사이다가 짱이야~");
hasCola("무슨소리, 콜라가 최고");
hasCola("콜라");

// 금칙어 : 콜라
// includes
// 문자가 있으면 true
// 없으면 false 반환
function hasCola(str) {
  if (str.includes("콜라") ) {
   console.log("금칙어가 있습니다.");
  } else {
    console.log("통과");
  }
}

hasCola("와 사이다가 짱이야~");
hasCola("무슨소리, 콜라가 최고");
hasCola("콜라");

function User(name, age) {
    this.name = name;
    this.age = age;
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane',22);
let user3 = new User('Tom', 17);

user1
User {name: 'Mike', age: 30}
user2
User {name: 'Jane', age: 22}
user3
User {name: 'Tom', age: 17}

function User(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
console.log(this.name);
    }
}

let user = new User('Smith', 25);
user.sayName();

 // 생성자 함수 : 상품 객체를 생성해보자

사회생활 할 때, 어떤 언어를 사용해서 개발을 했었습니다.

pdf로 되어 있는 refman이라고 해서... reference manual 이라는 메뉴얼을 통해서 도움을 많이 받았습니다.

그런데 자바스크립트를 공부하면서 메뉴얼 사이트에 대한 의문을 많이 갖었습니다.

아래와 같이 자바스크립트에 대한 Referecne 사이트를 발견하였습니다.

https://www.w3schools.com/jsref/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript

궁금한 것이 있으면 구글링도 좋지만, 위의 사이트를 통해 검색해보는 것도 정말 도움 받을 것 같아서 기분이 좋습니다.

1. 객체
- 프로그램에서 인식할 수 있는 모든 대상
- 데이터를 저장하고 처리하는 기본 단위

2. 자바스크립트 객체
- 자바스크립트 안에 미리 객체로 정의해 놓은 것
- 문서 객체 모델(DOM): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
- 브라우저 관련 객체: 웹 브라우저 정보를 객체로 관리
- 내장 객체: 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음

3. 사용자 정의 객체
- 필요할 때마다 사용자가 직접 만드는 객체

4. 객체의 인스턴스 만들기
- 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
- 인스턴스: 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것

(예시) new 객체명
(예시) Date 객체의 인스턴스를 만들어서 날짜와 시간 표시하기
var now = new Date();
document.write("현재 시각은 " + now);

5. 참고 URL
https://developer.mozilla.org/en-US/docs/Web/Javascript

Javascript Function을 사용하는 몇 가지 방법을 정리해 보았습니다.

아래의 첨부파일과 같이 크게 4가지 정도로 자바스크립트에서 펑션을 사용할 수 있습니다.