[ES6] 25 .split , for문, foreach 문 , map

[ES6] 25 .split

[ES6] 25 .split 으로 글자 단위를 쪼개서 만들어보자.

 

const str = "뤼튼은 창의력을 확장하도록 도와주는 기업입니다";
const words = str.split(" ");
document.write(words); // ["뤼튼은", "창의력을", "확장하도록", "도와주는", "기업입니다"]

 

const str = "뤼튼은 창의력을 확장하도록 도와주는 기업입니다";
const words = str.split(" "); 에서 

 

split(" ") 이 부분이 빈 공간을 기준으로 split(" ") 을 하였고, 그래서 빈공간으로 인하여 글자단위로 쪼개졌다.

 

[ES6] 25 .split 으로 (,) 단위를 쪼개서 만들어보자.

 

const fruits = "apple,banana,grape";
const fruitArray = fruits.split(",");

document.write(fruitArray); // ["apple", "banana", "grape"]

 

 

 

 

isNAN 이 뭐엿지 

isNaN() 함수는 전달된 값이 숫자인지 아닌지를 판별하는 함수입니다. 전달된 값이 숫자가 아니면 true를 반환하고, 숫자이면 false를 반환합니다.
예를 들어, isNaN("hello")와 같이 호출하면 true가 반환되고, isNaN(123)과 같이 호출하면 false가 반환됩니다.
주의할 점은 isNaN() 함수는 전달된 값이 숫자로 변환될 수 있는지를 판별하는 것이 아니라, 전달된 값이 숫자인지 아닌지를 판별합니다. 따라서, isNaN("123")과 같이 문자열이 전달되면 true가 반환됩니다. 이 경우, 문자열을 숫자로 변환하여 판별하려면 parseInt() 함수나 parseFloat() 함수를 사용해야 합니다.

 

정리하자면,

isNAN은 is not a Number 으로 

 

is Not a Number"의 약자입니다. 즉, 전달된 값이 숫자가 아닌지를 판별하는 함수입니다.

 

배열과 객체의 차이

 

배열은 ,  하나의 덩어리이고,

 

객체는  키와 벨류를 키 값쌍을 이루고있는 것이다.

 

 

객체의 배열을 가지고 객체를 만들어서 인덱스과 값을 표시 하는 방법

 

const fruitArray = ["apple", "banana", "grape"];

const fruitObject = {};
for (let i = 0; i < fruitArray.length; i++) {
  fruitObject[fruitArray[i]] = i;
  document.write(fruitArray[i] + ": " + fruitObject[fruitArray[i]] + "<br>");
}

 

 

 

배열에서 for문의 i 는 인덱스를 표시하였고, 배열명[i]로 for문을 하면 값이 표시된다?

 

const fruitArray = ["apple", "banana", "grape"];

for (let i = 0; i < fruitArray.length; i++) {
  document.write("Index: " + i + "<br>");
  document.write("Value: " + fruitArray[i] + "<br>");
}

for문과  foreach의 코드로 보는 차이점   

for문     (파라미터는 인덱스다?)

 

const fruitArray = ["apple", "banana", "grape"];

for (let i = 0; i < fruitArray.length; i++) {
  console.log("Index: " + i);
  console.log("Value: " + fruitArray[i]);
}

 

Index: 0
Value: apple
Index: 1
Value: banana
Index: 2
Value: grape

 

 

foreach

 

const fruitArray = ["apple", "banana", "grape"];

fruitArray.forEach(function(value, index) {
  console.log("Index: " + index);
  console.log("Value: " + value);
});

Index: 0
Value: apple
Index: 1
Value: banana
Index: 2
Value: grape

 

 

기존for문과 foreach 결론, 정리

 

두 가지 코드 모두 배열의 요소를 순회하며 출력하는 역할을 합니다. 'forEach' 메소드와 "for loop" 문의 차이점은 콜백 함수의 인자의 순서에서 비롯됩니다.

'forEach' 메소드의 콜백 함수에서 첫 번째 인자는 배열 요소의 값(value), 두 번째 인자는 해당 요소의 인덱스(index)입니다. 코드의 구현에서도 먼저 배열 요소의 값이 출력되고, 그 다음 해당 요소의 인덱스가 출력됩니다.

반면, "for loop" 문에서는 변수 'i'가 인덱스를 나타내며, 먼저 인덱스부터 시작하여 배열 요소를 차례로 출력합니다.

즉, 순서에 입각해서 매개 변수 이름이 지정됩니다. 'forEach' 메소드는 대개 콜백 함수의 첫 번째 인자에 배열 요소의 값을 전달하고, 두 번째 매개 변수에는 해당 요소의 인덱스를 전달합니다. 'for loop' 문에서는 변수 'i'가 요소의 인덱스와 연결되고, 값을 요청하면 요소 값이 반환됩니다.

 

.this 의  개념 파악하기 

 

const person = {
  name: "John",
  age: 30,
  sayHello: function () {
    document.write(`Hello, my name is ${this.name}.`);
  }
};

person.sayHello(); // Hello, my name is John.

 

 

for문, foreach 문 , map  각각의 예제를 만들고 이해해보기 실습 

// for문을 사용한 예시 코드
const numbers1 = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers1.length; i++) {
  document.write(numbers1[i] * 2 + `<hr>`);
}

// forEach를 사용한 예시 코드
const numbers2 = [1, 2, 3, 4, 5];

numbers2.forEach(function (number) {
  document.write(number * 2 + `<br>`);
});

const numbers3 = [1, 2, 3, 4, 5];

const numbersDoubled = numbers3.map((number) => {
  return number * 2;
});

document.write(numbersDoubled); // [2, 4, 6, 8, 10]

 

#foreach #map #reduce #두잇리액트 #무료강좌 #리액트입문 #프로그래밍 #리액트 #es6문법 #배열함수 #코딩호주니