천천히 알아가는 세상

안녕하세요. 이번에는 Callback Function(콜백 함수)에 대하여 알아보겠습니다. 1. 콜백 함수 (Callback Function) Callback : 함수가 끝난 뒤 실행되는 함수 함수를 만들 때 parameter로 함수를 받아서 사용한다. 가독성이나 코드 재사용을 위하여 사용한다. 비동기 방식으로 작성된 함수를 동기 처리하기 위하여 사용한다. 먼저 func1() 함수가 있는데 여기서 인자 값으로 첫 번째는 값을 받고 2번째에는 함수를 받습니다. value = ‘값’, call = 함수 func1() 함수가 실행되면 call()로 2번째 함수를 실행시키고 종료되면 콘솔로 value 값을 출력하는 것이라고 보시면 됩니다. function func1(value, call) { call(); co..

안녕하세요. 이번에는 객체를 생성할 때 사용하는 클래스를 간단하게 사용해보겠습니다. 자세한 내용은 다른 글을 참조하시기 바랍니다. 클래스 객체를 생성하기 위한 템플릿 ex) 객체 : 고양이 속성 : 이름 – 나비 나이 – 1살 메소드 : mew() – 울다, eat() - 먹는다 자동차를 예시로 들어보겠습니다. 먼저 Car 라는 클래스를 생성합니다. constructor() 함수는 Car 클래스를 만들었을 때 기본적으로 가지게 되는 설정 값이라고 보면 됩니다. 여기서는 constructor(color) 함수 안에 color, isDoor를 설정해놨습니다. isDoor는 true로 값이 설정되어 있지만, color는 인자 값으로 받아서 데이터를 저장하는 것을 볼 수 있습니다. 추가로 move() 함수, s..

안녕하세요. 이번에는 JavaScript에서 자주 사용하는 구조분해에 대하여 알아보겠습니다. 실습환경은 Node.js로 진행하였습니다. 1. 구조분해 할당 ( Destructuring assignment ) 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것 배열 구조 분해 객체 구조 분해 2. 배열 구조 분해 const [변수] = 배열; 각 변수에 배열의 인덱스 순으로 값 대응 구조분해 시 변수의 값이 undefined 일 때 기본값 할당 가능 구조분해 없이 두 변수의 값 교환도 가능 list 변수에 ‘apple’, ‘banana’를 리스트로 대입한다. 그리고 배열 구조 분해를 이용해서 item1, item2에 각각 값을 설정합니다. 각 item에 list에 있는 값들이 저장이 되는 것을 볼 ..

보호되어 있는 글입니다.

안녕하세요. 이번에는 DOM 객체와, 선택자에 대하여 알아보겠습니다. 1. DOM(Document Object Model) 객체 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. 2. Document 웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 2-1. 속성 document.documentElement document.head document.title document.body document.URL docum..