Front end/JavaScript

Front end/JavaScript

🔖Reference data type

1. Primitive data type 그냥 문자와 숫자는 : 변수에 값이 그대로 저장됨 Primitive data type 다루기 : 복사 var 이름1 = '강동욱'; var 이름2 = 이름1; 이름1 = '손흥민'; console.log(이름1) // 손흥민 console.log(이름2) // 강동욱 2. Reference data type Array, Object는 : 변수에 reference가 저장됨 reference에는 메모리주소(화살표)가 들어있다. Reference data type 다루기 : 복사 var 이름1 = { name: '강동욱' }; var 이름2 = 이름1; 이름1.name = '손흥민'; console.log(이름1) // 손흥민 console.log(이름2) // 손흥민..

Front end/JavaScript

🔖 Rest 파라미터

argumnets의 단점 - 쓰고싶지 않은 인수를 다 받아옴. function 함수 (a, b, c) { for(var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } 함수('쓰고싶지않은인수', 2, 3, 4); // ▼ 출력 // '쓰고싶지않은인수' // 2 // 3 // 4 Rest 파라미터 - 자리에 오는 모든 파라미터를 [ ]에 보관해줌 function 함수2 (a, b, ...rest) { console.log(rest); } 함수2(1,2,3,4,5,6,7); // ▼ 출력 // [3, 4, 5, 6, 7] arguments와 rest 파라미터의 차이점 arguments: 모든 인수를 [ ]에 담아준다. rest 파라미터:..

Front end/JavaScript

🔖 자바스크립트 함수 (default parameter/arguments)

함수의 default 파라미터 // b자리에 아무것도 안넣을 경우 10을 넣어주세요~ function add( a, b = 10 ) { console.log( a + b ); } add(1) // 11 add(1, 2); // 3 default 파라미터는 b자리에 인수를 안넣었을 때만 발동 default 파라미터에는 수학 연산자, 다른 파라미터와 연산, 심지어 함수입력도 올 수있음 연습문제 1. function 함수(a = 5, b = a * 2 ){ console.log(a + b); return 10 } 함수(3); // ▼ 출력 // 9 연습문제 2. function 함수(a = 5, b = a * 2 ){ console.log(a + b); } 함수(undefined, undefined); // ..

Front end/JavaScript

🔖 스프레드 연산자(Spread operator)

…spread operator 뭔가 내용물을 빼고 싶을 때 쓰면 된다. 1. Array에 붙이면 대괄호를 제거해준다. var arr = ['hello', 'world']; console.log(...arr); // hello world 2. 문자열에 붙이면 펼쳐준다. var str = 'hello'; console.log(...str); // h e l l o ...spread operaotr 어디다가 쓰면 좋을까? 1. 배열 합치기 / 얕은 복사 var a = [1, 2, 3]; var b = [4, 5]; var c = [...a]; console.log(c) // [1, 2, 3] var d = [...a, ...b]; console.log(d) // [1, 2, 3, 4, 5] 얕은 복사 할 때 ..

Front end/JavaScript

🔖 객체

const a = 'age'; const dongwook = { id: 'dddda321', name: '동욱', "full name": '강동욱', [a] : 26, getNameFunction : function () { console.log('펑션 동욱입니다.'); }, getName() { console.log('동욱입니다!!!'); console.log('function this :', this); console.log(this.name); }, getNameArrowFunction : () => { console.log('애로우 펑션 동욱입니당당당당~~'); console.log('arrow function this :', this); console.log(this.name); } } cons..

Front end/JavaScript

🔖 객체,배열 구조분해

const dongwook = { id: 'dddda321', name: '강동욱', age: '26', habit: 'coding', }; // const id = dongwook.id; // const name = dongwook.name; // const age = dongwook.age; // const habit = dongwook.habit; const { ID, habit } = dongwook; console.log(ID, habit); // undefined "coding" // 객체를 구조분해 할때 반드시 객체의 키값으로 해야한다 !!!!! const arr1 = ['dongwook98', '동욱', 26]; // const dongwookId = arr1[0]; // const don..

Front end/JavaScript

🔖 블록, 함수 스코프, 클로저 문제

for(let i=0; i { showBall(winBalls[i], $result) }, (i+1) * 1000); } 다음 코드는 내가 로또 생성기를 만들다 쓴 코드이다. 변수 winBalls는 당첨숫자 6개를 저장한 배열 데이터이고 showBall 함수는 아래와 같이 화면에 당첨숫자가 나오게 해주는 코드이다. 앞에서 작성한 반복문을 잠깐 let에서 var로 바꿔보았다. for(var i=0; i { showBall(winBalls[i], $result) }, (i+1) * 1000); } 단순히 var로 바꿨을 뿐인데 결과가 완전히 달라진다. winball[i]와 i를 콘솔로 출력하면 모두 undefined, 6으로 나온다. for(var i=0; i { console.log(winBalls[i],..

Front end/JavaScript

🔖 고차함수 개념 및 응용

고차함수란? 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차 함수(high orderr function)라고 한다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 { 와 return을 생략할 수 있다. const func =..

Front end/JavaScript

🔖 리스너함수, 이벤트 객체

const a = (event) => { console.log(event.target.value) }; document.querySelector(‘#plus’).addEventListener(‘click’, a); event 객체는 어디서 나오는걸까? 아이디가 plus인 태그를 클릭하면 브라우저가 몰래 a라는 함수를 실행 해준다. 그러면서 a 함수에 event 객체를 인수로 넣어준다. 그래서 아이디가 plus인 태그를 클릭을 했을때 a라는 함수를 브라우저가 대신 호출해주면서 event라는 객체를 만들어서 같이 인수로 넣어준다. const a = (event) => { console.log(event.target.value) }; 그래서 그 인수로 넣은 event 를 위 코드에 매개변수로 전달이 되는것이다.

욱둥
'Front end/JavaScript' 카테고리의 글 목록 (3 Page)