JavaScript - 1031

---

Array method

• .forEach()
  : array object의 method.
  => array의 원소 갯수만큼 myFunction() 함수를 실행함.

<script>  
const fruits = ["Banana", "Oranage", "Apple", "Mango"]
        
let text = '<ul>';
	fruits.forEach(myFunction); // array의 원소 갯수만큼 myFunction() 함수를 실행함.
    text += "</ul>";
        
    // array에서 function을 사용할 때 value을 항상 입력해야함.
    function myFunction(value, index, array) { // array(=> fruits)
    text += "<li>" + value + "</li>";
    }

document.getElementById("demo").innerHTML = text;
</script>    

• typeof를 Array에서 적용하면 array가 나오지 않고, object가 나옴.
  => .isArray() 또는 instanceof 를 사용해 Array인지 확인할 수 있음.

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// document.getElementById("demo").innerHTML = typeof fruits;  // object

// 해결1) .isArray() 사용하기.
// document.getElementById("demo").innerHTML = Array.isArray(fruits);  // true

// 해결2) instanceof 사용하기.
document.getElementById("demo").innerHTML = fruits instanceof Array;  // true   
</script>

• sort() : 배열 오름차순 정렬.
  => 기본 sort는 원소들이 정수라도 문자열로 변환하여 정렬 수행함.
  reverse() : 배열 내림차순 정렬.

<script>
const points = [40, 100, 1, 5, 25, 10];
// 기본 sort는 원소들이 정수라도 문자열로 변환하여 정렬 수행함.
//  => points = ["40", "100", "1", "5", "25", "10"];
points.sort();  // 1,10,100,25,40,5

// java ) -> 오름차순 sorting
// a-b < 0   : a,b의 순서를 유지함. 
// a-b > 0   : a,b의 순서를 바꿔줌. 
points.sort(function(a, b) {return - ( a-b )}); // 100,40,25,10,5,1
        
document.getElementById("demo").innerHTML = points;
</script>

• map
  : 모든 배열 원소에 대하여 myFuncion을 실행시켜 mapping한 결과 값을 array로 만듦.

<script>
const numbers1 = [45, 4, 9, 16, 25];
// map  : 모든 배열 원소에 대하여 myFuncion을 실행시켜 mapping한 결과 값을 array로 만듦.
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
	return value * 2;
}
  
document.getElementById("demo").innerHTML = numbers2;	// 90,8,18,32,50
</script>

• filter
  : myFuncion 결과값이 true인 원소값들만 output으로 나오게 만듦.

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFuncion);

function myFuncion(value, index, array) {
	return value > 18;	
}

document.getElementById("demo").innerHTML = over18; // 45,25
</script>

• reduce : 모든 원소의 결과값을 한개의 결과 값으로 만들 때 사용함.
• function A(total, value, index, array)
  total : 직전 원소들에 대한 전체 값.
  value : 현재 원소 값.
  index : 현재 원소의 index.
  array : 전제 배열.

<script>
const numbers = [45, 4, 9, 16, 25];
// reduce   : 모든 원소의 결과값을 한개의 결과 값으로 만들 때 사용함.

let sum = numbers.reduce(myFuncion);
// => 최종결과값(total)을 sum에 넘김.

function myFuncion(total, value, index, array) {
	return total + value;
}

document.getElementById("demo").innerHTML = sum;	// 99
</script>

---

JS Boolean()

논리연산자 수식에서 Boolean() 생성자가 자동 실행.(web browser 내의 JS engine이 실행함.)

Boolean(A) 'true' 조건

<script>
document.getElementById("demo").innerHTML =
	"100 is " + Boolean(100) + "<br>" +                         // true 100
    "3.14 is " + Boolean(3.14) + "<br>" +                       // true 3.14
    "-15 is " + Boolean(-15) + "<br>" +                         // true -15
    "Any (not empty) string is " + Boolean("Hello") + "<br>" +  // true "Hello"
    "Even the string 'false' is " + Boolean('false') + "<br>" + // true 'false'
    "Any expression (except zero) is " + Boolean(1 + 7 + 3.14); // true 11.14
</script>

Boolean(A) 'false' 조건

<script>
document.getElementById("demo").innerHTML =
	"0 is " + Boolean(0) + "<br>" +                    // false 0
    "-0 is " + Boolean(-0) + "<br>" +                  // false -0
    "empty Sting is " + Boolean("") + "<br>" +         // false ""
    "Nan is " + Boolean(10 / "Hello") + "<br>" +       // false 10/"Hello"
    "false is " + Boolean(false) + "<br>" +            // false false
    "undefined is " + Boolean(undefined) + "<br>" +    // false undefined
    "null is " + Boolean(null);                        // false null
</script>

'=='와 '==='의 차이점

• 비교연산자 (== > < <= >= != ...) 연산할 때, 한 쪽이 Number이면 다른 쪽을 Number로 변환함.
  • ex) "5"는 Number("5")로 자동 형변환.

• 차이점	==	===
  숫자가 아닌 경우 자동형변환	O Number 데이터타입으로 자동형변환 후 비교함.	X Number로 자동형변환 안 시키고 비교함.
  true조건	데이터 타입 상관없이 value의 값이 같으면 true	데이터 타입과 value값이 모두 동일해야 true

  • 결론 ) ===이 더 까다로운 비교 방법임. 코딩할 때, ===로 작성하는 것이 후에 error를 방지하는 방법임으로 ==보다 사용을 권장함.

<script>
let x = 5;

document.getElementById("demo").innerHTML = (x == 8);    // false
document.getElementById("demo").innerHTML = (x == "5");  // true
        
document.getElementById("demo").innerHTML = (x === "5");  // true
    </script>

---

For Of Loop

• for (A of B) { }
  : A는 key가 아니라 B의 value를 가져옴.

<script>
const cars = ["BMW", "Volvo", "Mini"];
        
let text = "";
for (let x of cars) {
	text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;	// BMW Volvo Mini
</script>