Front-End: Web/JavaScript (85) 썸네일형 리스트형 [코딩애플] js part 1-5. 변수 신문법 총정리 1. var let const와 선언, 할당 범위 변수란? 자료 임시 저장공간 변수 만드는 방법 var var 이름 = 'Kim'; let, const ES6 신문법. var 키워드를 대체한다. let 이름 = 'Kim'; var vs let,const varletconst **재선언** 가능 불가능 불가능 **재할당** 가능 가능 불가능 **범위** function 중괄호 {} 중괄호 {} 재선언 var 이름 = 'Kim'; var 이름 = 'Park'; var 이름 = 'Heo'; // ➡️ 재선언 가능 let 나이 = 20; let 나이 = 30; // ➡️ Error 발생: 재선언 불가능 const 나이2 = 20; const 나이2 = 30; // ➡️ Error 발생: 재선언 불가능 재할당 v.. [코딩애플] js part 1-4. this & arrow function 연습문제 3개 1. 간단한 메소드 만들기 문제 **사람**이라는 오브젝트가 하나 있습니다. 이 오브젝트에 sayHi라는 함수를 (메소드를) 하나 추가하고 싶습니다. var 사람 = { name: '손흥민', } 사람.sayHi(); //안녕 나는 손흥민 위의 코드처럼 **사람.sayHi()**라고 작성하면 콘솔창에 **'안녕 나는 손흥민'** 이라는 글자가 나와야합니다. '손흥민'이라고 이름을 하드코딩해서 출력하기보다는 실제 내 오브젝트에 있는 name에 해당하는 값이 출력되면 참 좋을 것 같군요. **Q. sayHi()라는 함수를 어디서 어떻게 만들면 될까요?** 내 풀이 var 사람 = { name: "손흥민", sayHi: function () { console.log(`안녕 나는 ${this.name}`); }.. [코딩애플] js part 1-3. Arrow function은 function을 대체하는 신문법이 아님 함수 만드는 방법 (1=2) function 함수() {} var 함수 = function () {}; **ES6 Arrow function**을 이용 (function 키워드 대신) var 함수 = () => {}; 함수 사용하는 경우 함수는 그냥 쓰는 문법이 아니다. 코드들을 기능으로 묶고 싶을 때 사용 **입출력 기계**를 만들고 싶을 때 사용(input, output) ➡️ 함수 본연의 기능 var 함수 = (a) => { return a + 10 }; Arrow function의 좋은 점 입출력 나타내는데 훨씬 직관적임(쉽게 예측 가능) 파라미터 1개면 소괄호 생략 가능 var 함수 = a => { return a + 10 } 코드 한 줄이면 중괄호도 생략 가능 var 함수 = a => a + .. [js] event.currentTarget vs event.target 보호되어 있는 글입니다. [js] 이벤트 핸들러들 (onClick, onChange, onSubmit, onInput, onLoad, ...) 보호되어 있는 글입니다. [코딩애플] js part 1-2. this 키워드를 알아보자 this 키워드는 뜻이 사용 용도에 따라서 3~4가지가 된다. 1. 함수와 Object에서 사용하면? => 나를 담고 있는 오브젝트가 나옴 (1) 그냥 쓰거나, 일반 함수 안에서 쓰면, 객체 {window} ❓window란 자바스크립트 기본 함수들을 담고 있는 개체 자바스크립트는 **키워드나 변수를 만나면 데이터를 바꾸고 싶어한다**. 자바스크립트의 가장 최상단에서 this 키워드는 무엇을 의미하는지 콘솔 찍어보자. window가 출력이 된다. 이게 this 키워드의 첫 번째 뜻이다. this를 출력하는 함수를 생성해보고 실행하자. 동일하게 window가 뜬다. 즉, **그냥 쓰거나 일반 함수에서 쓰면 object {window}이다**. ❗자바스크립트 strict mode에서 쓰면 'undefined'.. [코딩애플] js part 1-1. 강의 듣기 전 자바스크립트 기본 문법 총정리 JavaScript를 쓰는 이유 1. HTML 변경하려고 씀 안녕 2. HTML 누르면 뭐 실행하고 싶을 때 ➡️이벤트리스너 안녕 버튼 3. 잠깐 자료를 저장해두고 싶다면 ➡️ 변수 용도에 따라 var, let, const 사용 가능함 4. 긴 코드를 짧게 축약하려면 ➡️ 함수 안녕 버튼 5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드 안녕 버튼 화살표 함수 정확히 같은 역할을 하는 것은 아님. 후에 알아볼 것임. document.getElementById('button').addEventListener('click', () => { 작명('바보'); }) 6. 한 번에 여러 개 자료를 저장하려면 ➡️ array, object array array 속에 array나 함수를 넣을 수도 있다. 원하는 .. [js] '?.' : 옵셔널 체이닝(optional chaining) 옵셔널 체이닝 '?.' 스펙에 추가된 지 얼마 안된 문법. 따라서 구식 브라우저는 폴리필이 필요함. 옵셔널 체이닝이 필요한 이유 (with 예제) ex 1) 사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있는 경우를 생각하자. 이 때, user.address.street로 접근하면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ex 2) 브라우저에서 동작하는 코드를 개발할 때 문제가 발생하는 경우도 있다. 자바스크립트로 페이지에 존재하지 않는 요소(Element)에 접근하여 요소의 정보를 가져오려고 하는 경우다.. 이전 1 2 3 4 5 6 7 8 ··· 11 다음