일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- github
- hooks
- This
- ES6+
- DOM
- 함수
- array
- react
- 햇소
- dev
- git
- hatso
- API
- learn next.js
- gitCLI
- developerlife
- next.js
- 우아한테코톡
- html5
- 선택자
- ES5+
- 최적화
- Python
- JS
- CSS
- es6
- AI
- object
- 변수
- JavaScript
- Today
- Total
목록WEB/JavaScript (18)
codinghatso
시작하기 앞서 객체지향 프로그래밍과 함수형 프로그래밍의 차이점을 간단하게 정리하려고 합니다. 함수가 일급이냐 vs 객체가 일급이냐 * 일급 : 값으로 다룰 수 있으며, 변수에 담을 수 있다. 함수에 인자로 사용될 수 있으며, 결과로도 사용될 수 있다. 객체지향 프로그래밍 일급 객체를 사용을 지향하는 프로그래밍을 객체지향 프로그래밍이라고 합니다. 객체가 처리 요청을 받으면, 객체 내부에서 데이터 처리 후 반환하는 방식입니다. 객체지향의 큰 특징은 캡추다정상 으로 외웠던 그 단어들이 잘 보여줍니다. 캡슐화 추상화 다형성 정보은닉 상속성 여기서는 각 특징에 대한 자세한 글은 작성하지 않을 것입니다. 추가적으로 최근에는 캡추상다 연(관성) 정으로 외우시는 분들도 있는 것 같습니다. 개인적으로 객체지향은 캡슐화와..
"javascript에서 this는 함수를 호출한 객체이다" 전역에서 this 호출 시 window객체를 가리킨다. function main(){ console.log(this); } main(); //와 window.main()은 같다. //window객체를 가리킨다. 'use strict'를 사용하면 함수를 호출한 객체를 명시하지 않으면 undefined 값을 반환한다. const object = { name: 'hatso', main: function() { console.log(this); }, }; object.main(); //이렇게 하면 main함수를 호출한 object객체를 this가 가리킨다. //만약 const main2 = object.main; //main2(); //이렇게 호출한다..
일반함수의 this와 화살표 함수의 this의 차이점을 알아본다. * 메서드 : 객체의 속성으로 만들어진 함수를 의미 함수가 선언된 위치와 상관없이 호출된 객체를 가르키는 this의 특징을 다이나믹 바인딩 혹은 런타임 바인딩이라고 불림 왜냐하면 일반함수가 호출되는 런타임 시점에 결정되기 때문이다. 일반함수는 누가 호출했는지 화살표함수는 선언된 위치에 의해서 결정이 된다. 해당 위치의 this를 그대로 받아온다. 이상적인 일반함수와 화살표함수의 사용법 const object = { name: 'hatso', main: function () { setTimeout(() => { console.log(this) }, 1000); const sayName = () => { console.log(this.name..
함수 선언식 function main(){ console.log('hello'); } 호이스팅 O 익명함수 사용 X 매개변수를 명시하지 않아도 arguments 변수로 인자를 할당 O 함수 표현식 const main = function() { console.log('hello'); } main(); 호이스팅 X 익명함수 사용 O 매개변수를 명시 하지 않아도 arguments 변수로 인자를 할당 O 화살표 함수 const main = () => { console.log('hello'); } main(); 화살표 함수는 익명함수 때문에 표현식에 사용됨 매개변수를 명시해야 합니다. arguments 변수로 자동 할당 X const main = (...args) => { console.log(args); } m..
참고 : Link - ( https://ko.javascript.info/destructuring-assignment ) 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용하죠. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠. 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(..
문장 (statements) 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions) 결과적으로 하나의 값이 되는 모든 코드 * 표현식은 표현식인 문장과, 표현식이 아닌 문장으로 나뉜다. 구분법은 1. 변수에 할당하거나 아규먼트로 전달해보는 방법. 2. 세미콜론 ; 은 표현식 { } 중괄호는 문장으로 구분 가능. * 때문에 내가 작성할 코드도 위를 인지하여 작성할 필요가 있다.
화살표 함수는 ES6에서 새롭게 도입된 함수 표기 방법입니다. 기존 함수 표기방법은 function add(a,b){ return a+b; } 화살표 함수 표기방법은 let add = (a,b) =>a+b; 입니다. 화살표 함수는 몇 가지 간단한 표기 규칙이 있습니다. 규칙 조건 파라미터 0개- 빈괄호 () 반드시 표기 -()=>{} 1개- ()생략가능 - arg1=>{} 2개 이상- ()로 파라미터들을 감싸서 표기 -(arg1,arg2)=>{} return 구문사용 블록({}) 으로 코드를 감싼 경우 반환할 값이 있으면 반드시 return문으로 반환해야 함. 블록으로 감싼 코드에 return문이 없을 경우 "undefined"가 반환됨. 블록을 생략한 경우 "return" 또한 생략 가능
ES6에서 추가된 함수 파라미터를 확장하는 기능입니다. 가변 파라미터를 사용할 수 있도록 해 사실상 함수 파라미터를 무한대로 활용할 수 있습니다. 나머지 파라미터를 사용하면 함수의 파라미터 개수 별로 별도의 함수를 정의할 필요가 없어집니다. 함수 내부에서 가변 파라미터를 처리할 수 있도록 추가 파라미터 배열을 제공하기 때문에 가변 파라미터에 대한 대응도 가능합니다. // 함수 정의 방법 예 // 파라메터를 args 변수(배열)에 담아 함수 내부로 넘김 function restparams(...args) { console.log(args); } restparams(1, 2, 3, 4, 5, 6, 7, 8, 9); 파라미터 개수가 필수 파라미터 개수보다 작은 경우 나머지 파라미터는 빈 배열로 전달되며, 부족..