본문 바로가기

Lecture/Javascript4

javascript bind() 메소드와 rest파라미터 bind() 메소드 : 이벤트리스너 혹은 콜백함수 등과 같이 간접적으로 함수를 호출할 경우 하나의 메소드를 사용하고 싶으나 파라미터를 다르게 던지고 싶을 경우가 있다. 이럴 경우 bind() 메소드로 간접 호출하려는 함수의 파라미터에 값을 넣어줄 수 있다. btn.addEventListener('click',testFunc.bind(this, false)); const testFunc = (boolean) => { if (boolean) { console.log('true'); } else { console.log('false'); } }; rest파라미터 : for문을 돌려 합을 구하는 함수가 있고 인자로 들어갈 값의 갯수는 정해져 있지 않을 때 인자 부분에 '...numbers' 와 같이 앞에 점 세.. 2023. 7. 17.
javascript 함수[function] (직접적실행, 간접적실행, 익명함수, 화살표함수) 함수는 객체에 포함될 수 있다. ex) const a = { fName : function() fName { console.log('hello'); } 위와 같이 객체에 존재하는 함수를 메소드라고 부른다. 함수는 직접적으로 간접적으로 실행할 수 있다. 직접 : 선언된 함수의 이름 뒤 괄호를 사용하여 호출하는 방식으로 해당 함수를 바로 실행 간접 : 함수의 이름만 사용하여 호출하는 방식으로 이벤트리스너와 같이 특정 시점에 함수를 실행시킬 수 있음 익명함수: 변수에 함수를 할당하는 것 // 변수에 함수를 할당 const hello = function() { console.log('hello'); }; // 메소드의 인자로 쓰일 경우 익명함수로 직접 작성가능 btn.addEventListener('click'.. 2023. 7. 15.
javascript 변수로 객체의 값 꺼내기 const obj = {a: 1, b: 2, c:3} 위와 같은 객체가 있고 let key; if (조건) { key = a } else { key = b } 위와 같이 조건에 따라 변하는 변수 값이 있을 경우 해당 조건에 따라 변하는 키에 맞는 객체의 value를 가져오고 싶다면 obj[key] 와 같은 형식으로 변수에 맞는 value를 가져올 수 있다. 2023. 7. 14.
javascript <script>태그의 defer와 async html에 외부 script 파일을 불러올 때 head 태그 안에 스크립트 태그를 작성하고 아무 속성을 지정해주지 않으면 브라우저는 HTML파일을 먼저 다운 -> 구문을 분석하고 분석을 중간에 멈춘 후 script파일이 다운, 실행 이후 마저 HTML 구분을 분석한다 이때 스크립트 파일에서 요소를 조회하는 것과 같이 HTML에 의존하는 부분이 많다면 동작에 문제가 발생할 수 있다 이에 대한 해결책으로 script를 body 태그 마지막부분에 넣게되면 브라우저는 HTML파일을 먼저 다운 -> 구문을 분석하고 위 과정이 모두 완료된 후에 script파일을 다운, 실행하기 때문에 손해가 발생할 수 있다. 이럴 때 사용하는 옵션이 defer와 async이다. 와 같이 시작태그 마지막부분에 작성해주면 된다 def.. 2023. 6. 29.