소소한일상

함수 정의 방법은 크게 2가지로 표현할 수 있는데 함수 선언식 함수 표현식 🔖 함수선언식과 함수표현식의 제일 중요한차이점은 호이스팅 //호이스팅이란 최상단으로 끌어올리는 행위 함수선언식 function hello1(){ //실핼 할 코드 } 함수표현식(익명함수) let hello2 = function(){ //실행 할 코드 } 📍호이스팅 확인방법 //함수선언식 function test(p1,p2){ return p1+p2; } const test1 = test(12,30); console.log(test1);//42 //함수표현식 => 화살표함수로 가능 const test2 = function(p1,p2){ return p1+ p2; } const test22 = test2(12,30); console...

🔖 자바스크립트에서 가장 중요한 개념 함수는 필요할 때마다 호출하며 해당 작업을 반복해서 수행할 수 있습니다. 함수가 정의 되었다고 자동으로 실행 되는 것이 아니라 함수명을 사용해서 호출했을 때 실행 함수를 이루는 요소 함수 선언 키워드 function 함수명 입력 파라미터(옵션) 코드블록 반환 값(옵션) function 함수이름(매개변수1, 매개변수2){ //함수가 호출되었을 때 실행하고자 하는 실행문 }; function sum(num1, num2){ let sum = num1+num2; return sum; } //함수정의 let sum1 = sum(21,23); //함수호출 console.log(sum1); //콘솔창으로 확인

💡 ES6 부터 새로 도입된 문자열 표기법 백틱 (``) 추가 문자열에 사용할 수 있는 비교 연산자들 외에도, 문자열 연결(+) 연산자는 두 문자열의 값을 서로 연결한 새로운 문자열을 반환 합니다. //백터로 문자열 만들기 let english = `Angela` ; console.log('나의 영어이름은 ' + english + ' 입니다.'); console.log(`나의 영어이름은 ${english} 입니다.`);

📌 조건 ? 참일때 실행 : 거짓일 때 실행 자바스크립트 삼항연산자는 맨앞에 조건문이 들어가고, 그 뒤로 물음표 ? 와 조건이 참이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 : 클론이 들어가며 조건이 거짓이라면 실행할 식이 마지막에 들어갑니다. const isDiscounted = false; function getPrice(){ console.log(isDiscounted ? "$10" : "$20"); } getPrice(); //조건이 거짓이라 뒤에 $20출력 if(person.age > 18 = ){ person.driver = 'yes'; } else{ person.driver = 'no'; } // if문을 한 줄의 코드로 작성 할 수 있음. person.driver = person..

객체는 여러속성의 모음을 저장하는데 사용할 수 있다. const car = { wheels:4, //" 키" 와 "값" color:'red',//" 키" 와 "값" }; console.log(car); //차의 속성은 저장하는데 사용하는 간단한 객체 키의 자료형은 String 자료형이지만 값은 모든 자료형이 될 수 있으며, 심지어 함수가 될수도 있다. 값이 함수이면 메서드를 호출하는 셈이 된다. const car = { wheels:4, //" 키" 와 "값" color:'red',//" 키" 와 "값" //차의 속성은 저장하는데 사용하는 간단한 객체 drive : function(){ //함수선언 console.log('wroom wroom') }, }; console.log(car); console...

모달창 만들기 모달창 열기 샘플 모달창 자바스크립트로 모달창을 만들어 봤습니다. X button{ background-color: #990000; color: white; padding: 15px 25px; border-radius: 6px; cursor: pointer; } .modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items : center; } .md_overlay{ background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; } .md_conten..