본문 바로가기

JavaScript9

20210405#(27)JavaScript(함수고급) 자바스크립트는 함수도 하나의 자료형이기 때문에 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 callback 콜백 함수라고한다. (선언적 함수 사용) 1.callThreeTimes() 함수는 함수를 매개변수로 받았다. 2.callThreeTimes() 함수의 callback 매개변수에 print() 함수를 전달했다. 3.callThreeTimes() 함수 내부에선 callback(i) 형태로 함수를 호출함. 4. 매개변수로 전달된 print() 함수가 차례로 호출. (익명 함수 사용) 1.callThreeTimes() 함수는 함수를 매개변수로 받았다. 2.callThreeTimes() 함수 내 익명 함수를 통해 즉시 실행. #callback함수를 활용하는 함수 - forEach() fun.. 2021. 4. 5.
20210402#(26)JavaScript (매개변수) #나머지 매개변수 매개변수로 배열을 받은 예시를 살펴보자 fuc([1,22,333,444]) fuc([1,22,333,444,5555,666)] 소괄호와 대괄호가 같이 있어서 보기 불편하다. 만약 위 예시같이 여러 개의 숫자를 매개변수로 실행하고 싶다면 어떻게 해야 할까? 그리고 매개변수가 1개일 때도 있고 10개일 때도 있고 그 이상이 될 수도 있는데, 일일이 다 쳐야 할까? 매개변수의 개수가 10개가 될 수도 있고, 5개도 될 수도 있듯이 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다. JS에서 가변 매개변수를 나타낼 때에는 나머지 매개변수라는 문법을 사용한다. 사용법은 다음과 같다. function 함수 이름(... 나머지 매개변수) {} 위와 같이, 함수의 매개변수 앞에.... 2021. 4. 2.
20210218#(22)JavaScript (조건문)(신축년???) 1. javascript에는 if 조건문 외에도 조건문들이 많다. if와 switch를 비교하면서 공부해보도록 하자. swtich 조건문의 기본 형태는 다음과 같다. 모든 swtich문은 if문으로 변경할 수 있다. 모든 if 문을 switch문으로 대체하기는 어렵지만 불가능하지는 않다. 시간에 맞춰서 아침,점심 그리고 저녁 먹을 시간을 알려주는 코드를 통해 if문과 switch문을 공부해보자. # if문 # switch문 2. 조건부 연산자 javascript에는 조건부 연산자라는것이 있다. 항을 3개 가진다고 하여 삼항 연산자라고 부르기도 한다. 기본 형태는 불 표현식 ? 참 결과 : 거짓 결과이다. 코드를 보며 익혀보자. 0 이상 숫자를 넣게 되면 over 0이 출력되고, 0 이하 숫자를 넣게되면 .. 2021. 2. 18.
20210213#(21) JavaScript (프로토타입) Prototype: 원형 (객체의 원형) 첫 번째 코드를 살펴보자. jiho와 jihoho는 눈과(eyes) 코를(nose) 가지고 있다. 그런데 메모리에는 eyes와 nose가 2개씩 총 4개가 할당된다. 만약 객체의 개수가 100개 또는 1000개가 된다면 메모리가 남아나지 않을 것이다. 이러한 문제를 prototype으로 해결 가능하다. 바로 두 번째 코드를 살펴보자. function Person(){}를 선언하게 되면, Person.prototype이라는 빈 object 즉 객체가 존재한다고 볼 수 있다. 그리고 Person 함수로부터 생성된 object(jiho,jihoho)는 Person.prototype에 들어있는 값을 가져다 쓸 수 있는 것이다. 정리하자면 eyes와 nose를 공간에 넣어.. 2021. 1. 20.
20210120#(20) JavaScript (상속 ) 먼저 코드를 살펴보자. 위 두 개의 코드는 서로 같은 결과를 나타낸다. 코드를 살펴보면 달라진 점은 첫 번째 코드의 this.introduce = function() 부분이 사라지고 Person.prototype.name = null; Person.prototype.introduce = function()으로 바뀌었다. 왜 두 코드가 같은 결과를 나타내고 이렇게 표현할까? 다음 코드를 보자. 1.Programmer라는 생성자를 만들고(function Programmer(name){ this.name = name;} ) 2.Programmer생성자의 prototype이라는 녀석과 Person의 객체를 연결했더니 (Programmer.prototype = new Person();) 3. Programmer .. 2021. 1. 20.
20210116#(20) JavaScript (this) js 경우 this는 함수 호출 방법에 따라서 this가 가리키는 대상이 동적으로 달라진다. 코드를 통해 천천히 이해해보자. 첫 번째 function func(){ 로 시작되는 코드의 결괏값은 window === this이다. 함수를 호출했을 때 this는 전역객체인 window와 같다. 두 번째 const a={ 로 시작되는 코드의 결괏값은 a === this이다. 객체 안 메소드의 this는 그 객체를 가리킨다. 위 코드는 함수를 그냥 호출했을 때(const a1 = Func();) 와 new를 통해 생성자를 호출(const a2 = new Func();)하는 코드이다. 결괏값은 window o2 이다. new 생성자는 빈 객체를 만들고 이 객체 내에서 this는 만들어진 객체를 가리키기 때문에 o2.. 2021. 1. 15.
20210115#(19) JavaScript Array(객체 2) JS에는 전역 객체가 있다. js의 모든 객체는 전역 개체의 프로퍼티라고 할 수 있다. -> 전역 개체라는 부모가 있고 다른 모든 객체들은 전역 객체라는 부모의 자식이라고 생각하면 될 듯하다. 위 코드에서 func(); 그리고 window.func(); 둘 다 동일하게 실행이 된다. 이로 알 수있는 사실은 모든 전역변수와 함수는 window(전역객체)객체의 프로퍼티이다. 위 코드에서도 j.func(); 그리고 window.j.func(); 는 둘다 동일한 값이 출력된다. #전역 객체의 이름은 host환경에 따라 다르다고 한다. 서버 측에서 사용하는 node.js 에서는 global, 웹브라우저에선 window이다. 꿋 2021. 1. 15.
20210111#(18) JavaScript Array(객체) 위 코드는 자바스크립트에서 객체를 만드는 2가지 방법이다. 객체란 서로 관련 있는 함수와 변수를 묶은 공간이다. 객체 안에서의 변수를 property, 함수를 method라고 칭한다. 이때 만약 다른사람을 추가하게 된다면 객체의 정의가 중복될 것이다. ex) jiho, navy가 있으면 const person1 = { 'name' : 'jiho', 'info' : function(){ return 'My name is ' + this.name; } } document.write(person.info()); const person2 = { 'name' : 'navy', 'info' : function(){ return 'My name is ' + this.name; } } document.write(per.. 2021. 1. 11.
20210106#(17) JavaScript Array(배열) #1 JavaScript 배열 할당 방법 let Array = ['apple', 'banana', 'coconut'] 이렇게 할당하게 되면 Array[0] = apple Array[1] = banana Array[2] = coconut 이렇게 할당이 된다. document.write(Array[0]); -> apple 출력 document.write(Array[1]); -> banana 출력 document.write(Array[2]); -> coconut 출력 #2 JavaScript 배열 크기 배열의 크기는 length를 이용한다. let Array = ['apple', 'banana', 'coconut','1','2'] document.write(Array.length); -> 5 출력 #3 Jav.. 2021. 1. 5.