본문 바로가기

Front-End: Web/JavaScript

 (97)
[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 이상한 Reference data type과 더 이상한 예제 3개 Primitive data type 그냥 문자와 숫자 변수에 값이 그대로 저장됨 Reference data type var 변수 = 1234; var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨 Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다. [1,2,3]이 저쪽에 있어요(화살표) 를 저장함 종류 Array Object Reference data type 다루기 예시 1: 복사 Primitive data type var 이름1 = '김'; var 이름2 = 이름1; console.log(이름1); // 김 console.log(이름..
[코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments) ES6부터 함수가 많이 업그레이드 됐다. 알아보자! 1. 파라미터 2개가 들어가는 함수인데 1개만 써도 에러가 안남 엄격한 언어는 에러가 나는데, 자바스크립트는 장점이자 단점으로 에러가 안남 function 더하기(a, b) { console.log(a + b); } 더하기(1,2); // 3 더하기(1); // 1 (에러가 안남) 2. 함수의 default 파라미터 b 자리에 아무것도 안넣을 경우에 넣어주세요~ 하는 defaultValue 예제를 살펴보자. function 더하기(a, b = 10) { console.log(a + b); } 더하기(1); // 11 (b자리에 파라미터를 안넣었을 때만 발동) 더하기(1,2); // 3 수학 연산도 넣을 수 있다. function 더하기(a, b = 2 ..
[코딩애플] js part 1-7. Spread Operator (...)와 apply / call 모든 괄호를 없애주는 Spread Operator (...) 자바스크립트에서 펼쳐서 늘어놓고 싶을 때 사용하는 연산자. 대괄호를 다 제거해준다! (뭔가를 늘어놓고 싶을 때) var 어레이 = ['hello', 'world']; console.log(어레이); // ["hello","world"] console.log(...어레이); // hello world 문자에 붙이면 펼쳐준다! 문자도 array처럼 인덱싱이 가능하다. 그래서 문자에도 대괄호를 제거해주고 펼쳐준다고 생각하면 된다. var 문자 = 'hello'; console.log(문자); // 'hello' console.log(...문자); // h e l l o ('h''e''l''l''o') // 문자 인덱싱 console.log(문자[0]..
[코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings) Template Literals 문자를 다르게 제작할 수 있는 방법이다. backtick / backquote (백틱) var 문자 = `손흥민`; 엔터키 가능 var 문자 = `손 흥민`; 중간중간 변수 넣기 쉬움 var 변수 = '손흥민'; var 문자 = `안녕하세요 저는 ${변수}`; // (예전방식) '문자' + 변수 특히 HTML 작성시 유용함 var 템플릿 = `${변수}`; ⭐tagged literal (backquote 문자열 + 함수) 함수 뒤에 (소괄호) 대신 ``을 붙여도 함수가 실행된다. var 변수 '손흥민'; var 문자 = `안녕하세요 ${변수}입니다`; function 함수(){ return 10; } console.log(함수`안녕하세요 ${변수}입니다`); // 10 되..
[코딩애플] 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 보호되어 있는 글입니다.
반응형

티스토리툴바