hyonie's Stack 👩🏻‍💻

📂 목차 hasOwnProperty란?자바스크립트의 모든 객체(Object)는 상위 객체인 object로부터 여러 메서드(기능)를 물려받습니다. 그 중 하나가 hasOwnProperty()입니다. const user = { name: "Hyonie",};console.log(user.hasOwnProperty("name")); // trueconsole.log(user.hasOwnProperty("toString")); // false👉 이 메서드는 해당 속성이 직접 정의된 것인지 확인해줍니다.(상속된 속성은 false로 판단) ❗ 문제는 여기서부터 시작됩니다.const params = { hasOwnProperty: () => false, id: 123,};console.log(params..

JavaScript를 공부하다 보면 가끔 이런 생소한 문법을 보게 됩니다:(() => { // 뭔가 실행되는 코드})(); 처음 보면 이게 도대체 뭐지.....? 싶은데요, 즉시 실행 함수 표현식 이라고 불리는 문법입니다.이번글에서는 IIFE가 무엇인지, 왜 쓰는지, 언제 유용한지 정리해보록 하겠습니다.📂 목차 즉시 실행 함수 표현식이란?즉시 실행 함수 표현식(IIFE)은 정의하자마자 바로 실행되는 함수를 말합니다. ✅ 문법 형태(fucntion() { console.log("즉시 실행됩니다!");})(); 또는 화살표함수 버전으로도 쓸 수 있습니다:(() => { console.log("이것도 즉시 실행!");})();  🔍 왜 사용하는 걸까?한번 만 실행되는 초기화 코드를 만들고 싶을 떄전역..

자바스크립트에서 중복되지 않는 값을 저장하고 싶을 때, 배열만 사용하면 불편할 때가 있습니다.이럴때 Set 객체를 활용하면 간단하고 효율적으로 데이터를 관리할 수 있습니다. 이번 글에서는 Set의 기본 사용법과 has()메서드에 대해 쉽게 정리해 보겠습니다.📂 목차 🧩 new Set() 이란?Set은 중복을 허용하지 않는 값들의 집합을 만들어주는 객체입니다.const mySet = new Set([1,2,3,3,4]);console.log(mySet); //Set(4) {1,2,3,4}위 예시처럼, 중복된 값 3은 하나만 저장됩니다. 📌 기본 문법const setName = new Set(iterable); // 반복할수 있는 값(string, Array, Set, Map) 예시:const usi..

자바스크립트에서 배열을 다룰 때 자주 사용되는 findIndex()와 includes() 이둘은 비슷해 보이지만 엄연히 다릅니다.이번 글에서는 이 두 메서드의 동작원리와 함께 차이점을 알아보도록 하겠습니다. 📂 목차  ❓ findIndex vs includes 차이점은?구분findIndex()includes()목적조건에 맞는 요소의 인덱스를 반환배열이나 문자열에 해당 값이 있는지 여부를 반환반환값인덱스(0, 1, 2, ...) 또는 -1true 또는 false사용대상배열배열 또는 문자열콜백사용✅ 가능❌ 불가능(값만체크) 💡 findIndex란?findIndex는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.조건을 만족하는 요소가 없다면 -1을 반환합니다.배열을 순회하면서 콜백 함수의 조건이 참(t..

클로저는 자바스크립트에서 중요한 개념으로 외부에서 접근할 수 없는 비공개 변수를 생성해 데이터 은닉을 가능하게 합니다. 또한, 비동기 작업이나 이벤트 핸들러에서 상태를 효과적으로 유지하며 활용할 수 있어 유용합니다. 이 글에서는 클로저의 장점 그리고 이를 활용해 코드의 재사용성을 높이는 방법과 추가로, React의 상태관리 useState와 클로저의 관계에 대해서도 정리하였습니다. 📂 목차 1. 클로저란 무엇일까❓클로저는 내부 함수가 외부 함수의 변수(렉시컬 환경)에 접근할 수 있는 기능을 제공합니다. 이로 인해 함수가 호출된 이후에도 외부 함수의 상태(변수)를 유지할 수 있습니다.클로저는 외부 변수 값 상태를 함수 호출 이후에도 유지합니다.이 상태는 외부에서 직접 접근할 수 없고, 내부 함수로만 접근..

무작위로 점심 메뉴를 추천하고 싶을 때 어떻게 할까요? Math.random() 함수와 Object.keys() 메서드를 활용하여 점심 메뉴 중 하나를 랜덤하게 선택하는 기능을 구현해 보겠습니다.  객체를 배열로 변환하고 랜덤 숫자를 생성하는 방법먼저, 다음과 같은 객체를 고려해 보겠습니다. 각 키는 음식유형을 나타내며, 각 값은 해당음식의 이름과 이미지URL 을 포함하고 있습니다.const lunchChoice = { hansik: {name: "비빔밥", image: "https://kormedi.com/wp-content/uploads/2024/09/gettyimages-a11354394.jpg"}, chineseFood: {name: "짜장면", image: "https://cdn.ko..