본문 바로가기

Programming Language/JavaScript4

[JavaScript] forEach와 map의 차이 서론 forEach와 map은 배열에 사용할 수 있는 함수이다. 공통점은 callback함수가 돌면서 배열 내 각 요소에 접근하여 주어진 함수를 실행한다는 것인데 여기까지만 보면 둘은 다를 바가 없어 보인다. 그럼 동일한 일을 하는 함수가 둘일 리 없지 않은가. 이 둘의 차이를 알아보자. forEach() The forEach() method executes a provided function once for each array element. MDN forEach 공식 문서에 따르면, forEach()는 배열 요소 각각에 접근해서, 주어진 함수를 실행한다고 한다. arr = [1, 2, 3, 4, 5]; arr.forEach((num) => console.log(num)); forEach()는 배열을 .. 2021. 12. 27.
[JavaScript] 함수 여러 값 return 하기 JavaScript의 함수는 하나의 값 밖에 리턴하지 못한다. function veggie() { const job = 'Developer'; const studying = 'JavaScript'; return (job, studying); } const veggieDetail = veggie(); 위의 코드가 안 된다는 의미다. 실행해보면, studying은 정상적으로 리턴이 되나, job은 리턴이 되지 않는다. 그럼 어떻게 두 개 이상의 값을 리턴할 수 있을까? 배열을 사용하면 된다. 리턴 값을 배열로 반환하기 function veggie() { const job = 'Developer'; const studying = 'JavaScript'; return [job, studying]; } const.. 2021. 10. 11.
[JavaScript] Js로 숫자 무작위 추첨 (Math.random() 사용법) Math.random() Math.random() 함수는 0 이상 1 미만의 난수를 반환한다. 더보기 난수란? 난수(亂數)란 정의된 범위 내에서 무작위로 추출된 수를 일컫는다. 난수는 누구라도 그다음에 나올 값을 확신할 수 없어야 한다. - 출처: 위키백과 0 이상 1 미만의 난수 구하기 function randomNum() { return Math.random(); } 위의 코드를 돌려보면 이런 식으로 반환한다. 범위 지정하기 Math.random() * (max - min) + min; 결괏값은 항상 min보다 크며, max보다 작다. 왜 최솟값을 더할까? 만약 1~10 사이의 수를 구한다 치자. Math.random()은 항상 0 이상 1 미만의 수를 리턴하니 Math.random()이 반환할 수 .. 2021. 10. 9.
[JavaScript] innerHTML / innerText / textContent 차이 정의 innerHTML innerHTML은 이름 그대로 HTML을 반환한다. 예를 들어 box라는 div가 있다고 하자. Hi there! 그럼 innerHTML을 사용했을 때, 위의 내용 그대도 반환한다. 그래서 텍스트만 반환하는 innerText, textContent와 다르다. innerText innerText 속성은 그 요소와 그 자손의 랜더링 된 텍스트 콘텐츠를 나타낸다. 즉, 눈에 보이는 텍스트만 반환한다는 것이다. textContent textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현한다. 차이 여기까지만 보면 innerText와 textContent의 차이가 없어 보인다. 그러나 아주 중요한 차이점이 있다. textContent는 와 Hi there! hidden mes.. 2021. 10. 8.