'IT, 프로그래밍/JavaScript' 카테고리의 글 목록

[JavaScript] 자바스크립트 함수의 정의와 특징

자바스크립트에서는 함수를 정의하는 방법이 3가지가 있습니다. 함수 선언문 함수를 선언하는 가장 기본적인 방법입니다. 기본 사용법 function 함수이름(매개변수) { 실행문; return 리턴값; } C언어와 'function'이라는 키워드로 함수를 선언할 수 있습니다. 다른 점은 매개변수와 반환 값의 타입을 적어주지 않아도 돼서 여러 가지 타입이 들어갈 수 있다는 점입니다. 예시 // 함수 선언 function plus(a, b) { return a + b; } // 함수 호출 plus(1, 2); 함수 표현식 다음과 같이 변수를 생성하여 함수 대입한 것 같은 모양으로 함수를 정의할 수 있습니다. 기본 사용법 변수 = function(매개변수) { 실행문; return 리턴값; } 정의한 함수를 변수..

IT, 프로그래밍/JavaScript 2020. 12. 11. 22:32

[JavaScript] 자바스크립트 프로토타입(prototype)이란?

프로토타입(prototype) 프로토타입은 모든 객체가 공통적으로 가지고 있는 속성이라고 할 수 있습니다. 객체가 생성되면 자동으로 그 객체는 prototype이라는 속성을 가지게 됩니다. 또한 객체에 prototype에 값이 추가되거나 변경되면 같은 형태의 객체들도 똑같은 값을 가지게 됩니다. 이런 기능을 이용하여 클래스가 존재하지 않는 자바스크립트에서 상속과 비슷한 기능을 할 수 있게됩니다. 예시 function Number(a, b) { this.a = a; this.b = b; } var one = new Number(1, 2); var two = new Number(3, 4); 위와 같이 Number라는 생성자 함수를 만들고 객체를 생성하여 one과 two 변수에 대입했습니다. 이 때, 생성한 ..

IT, 프로그래밍/JavaScript 2020. 11. 1. 19:45

[JavaScript] 자바스크립트 Array 메서드 정리

Array 메서드 속성 / 메서드 설명 length 배열의 크기를 반환합니다. toString() 배열을 문자열로 변환하여 반환합니다. join(string) 배열의 모든 요소를 인자로 넣은 문자열을 넣어 연결한 문자열을 반환합니다. pop() 배열에서 마지막에 있는 요소를 삭제하고 반환합니다. push() 배열의 맨 마지막에 인자로 전달한 요소를 추가합니다. concat() 두 개의 배열을 합친 하나의 배열을 반환합니다. slice(m, n) m번째 초과, n번째 이하의 요소들을 가지고 있는 새로운 배열을 반환합니다. sort() 해당 배열을 오름차순으로 정렬한 후 저장합니다. reverse() 해당 배열을 내림차순으로 정렬한 후 저장합니다. 예시 var array = ['a', 'b', 'c']; v..

IT, 프로그래밍/JavaScript 2020. 10. 25. 17:15

[JavaScript] 자바스크립트 arguments 유사배열의 이용

arguments arguments는 전달받는 함수의 인자를 나타내는 유사 배열입니다. 여기서 유사 배열이라는 것은 배열은 아니지만 배열과 비슷하게 사용할 수 있는 객체를 의미합니다. 매개변수 개수가 달라도 오류가 나지 않음 // 매개변수가 없음 function sum() { console.log(1); }; // 오류가 나지 않음 sum(1,2,3,4); 위를 보면 함수 sum에는 매개변수를 아무것도 받지 않도록 선언되어있지만 함수를 호출할 때는 무려 4개의 전달 인자를 받고 있습니다. 그럼에도 불구하고 아무 오류 없이 1이 출력되어 정상 동작하는 것을 확인할 수 있습니다. 이처럼 자바스크립트에서 함수는 전달 인자의 개수에 상관없이 동작됩니다. 그리고 이 전달 인자들은 arguments라는 인스턴스에 ..

IT, 프로그래밍/JavaScript 2020. 10. 25. 17:01

[JavaScript] 자바스크립트 this와 apply, call 함수

자바스크립트에서의 this 자바스크립트에서 this는 렉시컬 스코프에 따라 나타내는 의미가 달라집니다. 기본적으로 this는 window 객체, 즉 전역 객체를 나타냅니다. 그렇다면 this가 전역 객체가 되지 않는 경우를 한번 알아보겠습니다. 메서드를 호출하는 경우 예시 var one = { a : 1, b : 2, // this는 함수가 선언된 환경을 가리킴 sum : function() {return this.a + this.b} } console.log(one.sum()); // 결과: 3 위와 같이 객체 리터럴 방식으로 객체를 생성하고 그 안의 메서드를 호출하게 되면 this는 해당 메서드를 포함하고 있는 객체를 나타내게 됩니다. 이것을 this가 객체에 바인딩되었다고 합니다. 생성자 함수를 호..

IT, 프로그래밍/JavaScript 2020. 10. 24. 18:58

[JavaScript] 자바스크립트 이벤트의 정의와 이벤트 등록 방법

이벤트란? 이벤트는 간단하게 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 이벤트는 이벤트 대상, 이벤트 종류, 이벤트가 발생했을 때 실행되는 함수, 이 3가지로 구성되어 있습니다. 이벤트 대상은 특정 태그를 의미하고 이벤트의 종류는 click, drag, onmouse 등 여러 가지 종류가 있습니다. 이벤트 등록 방법 자바스크립트를 이용하여 요소에 이벤트를 넣는 방법은 총 3가지가 있습니다. 그 3가지 방법으로 아래에 있는 버튼 요소를 클릭하면 콘솔에 1이 출력되도록 구현해보겠습니다. HTML 버튼 인라인 이벤트 모델 방식 이벤트가 일어날 태그에 onclick속성을 만들어서 정의해놓은 함수를 속성값으로 넣어주는 방법입니다. 예시 버튼 프로퍼티 리스너 방식 해당 요소에 접근하여 oncli..

IT, 프로그래밍/JavaScript 2020. 10. 24. 18:53

[JavaScript] 자바스크립트로 DOM 접근하기

DOM이란? DOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서입니다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능합니다. DOM 접근 메서드 요소들을 이용하기 위해서는 아래와 같은 메서드로 사용해 특정 태그에 접근해야 됩니다. 이 메서드를 이용해 선택한 요소를 변수에 대입하여 사용할 수 있습니다. 메서드 설명 document.getElementById("id명") 해당 id명을 가진 요소 하나를 반환합니다. document.querySelector("선택자") 해당 선택자를 만족하는 요소 하나를 반환합니다. document.getElementsByClassName("class명")[순서] 해..

IT, 프로그래밍/JavaScript 2020. 10. 23. 22:56

[JavaScript] 자바스크립트 클로저의 의미와 사용하는 이유

클로저란? 클로저는 내부 함수가 정의될 때 외부 함수의 환경을 기억하고 있는 내부 함수를 말합니다. 외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수나 함수에 접근하여 사용할 수 있습니다. 클로저 함수의 기본 형태 // 외부 함수 function closuer() { // 변수 정의 var count = 0; // 내부 함수(클로저) 선언 function inner() { return ++count; } // 내부 함수 반환 return inner(); } // 익명 함수를 이용한 방법 function closure() { var count = 0; // 익명 함수(클로저) 반환 return function() { return ++count; } } 클로저 함수 사용 예시 function ..

IT, 프로그래밍/JavaScript 2020. 10. 22. 14:06

[JavaScript] 자바스크립트 콜백(callback)함수란?

콜백 함수란? 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 그럼 콜백 함수가 어떻게 사용되는지 알아보겠습니다. 함수 정의 // 콜백 함수가 될 매개변수 설정 function plus(a, b, callback) { var sum = a + b; callback(sum); } plus 함수를 보면 callback라는 매개변수를 넣어주고 plus 함수 내부에서 callback 매개변수를 함수 형태로 실행하고 있는 모습입니다. 정의한 함수 호출 // plus 함수에 익명 함수를 인자로 전달 plus(1, 2, function(result) { console.log(result); }); 익명 함수를 ..

IT, 프로그래밍/JavaScript 2020. 10. 12. 18:38

[JavaScript] 자바스크립트 객체 생성 방법

객체 리터럴 방식 중괄호를 안에 프로퍼티(속성)와 값(value)을 입력하여 객체를 생성하는 방식입니다. 자바스크립트에서 객체를 정의할 때 가장 많이 쓰이는 방법이며 사용도 간편합니다. 기본 사용법 var 객체명 = { 속성명1: 값1, 속성명2: 값2, ... }; 예시 var object = { name : "name", // 문자열 number : 6, // 숫자 func : function() { // 함수 return null; }, data : { // 객체 property : 1; } }; 위와 같이 하나의 객체 안에 여러 가지 프로퍼티와 값들을 정의했습니다. 특이한 점은 함수도 객체로 취급되기 때문에 프로퍼티로 사용 가능하고 또 하나의 객체 리터럴 방식으로 객체를 정의할 수 있다느 점입니다..

IT, 프로그래밍/JavaScript 2020. 10. 9. 13:03

금융에 대한 모든 것

IT, 프로그래밍/JavaScript → (11)건