본문 바로가기

프로그래밍 개발/JS 기본 언어26

Javascript 참조 복제 var a = 1; var b = a; b = 2; console.log(a); 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로이다. 변수 b의 값에 변수 a의 값이 복제된 것이다. a을 b로 복제한 후에 a의 값을 변경한다고 이미 복제한 b가 변하는 것이 아닌 것처럼 생각하면된다. 참조 var a = {'id':1}; var b = a; b.id = 2; console.log(a.id); var a = {'id':1}; var b = a; b = {'id':2} console.log(a.id); 변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 된 것이다. 이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미하다. 하지만 b={'id':2.. 2020. 11. 16.

Javascript 데이터 타입 데이터 타입 데이터 타입이란 데이터의 형태를 의미한다. 데이터 타입은 크게 두가지로 구분할 수 있다. 객체와 객체가 아닌 것. 객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 한다. 그 외의 모든 데이터 타입들은 객체다. 숫자 문자열 불리언(true/false) null undefined 레퍼 객체 문자열과 원시 테이터 타입 var str = 'jin seok'; console.log(str.length); console.log(str.charAt(0)); 문자열은 분명히 프로퍼티와 메소드가 있다. 그렇다면 객체다. 그런데 왜 문자열이 객체가 아니라고 하는 이유는 내부적으로 문자열이 원시 데이터 타입이고 문자열과 관련된 어떤 작업을 하려고 할 때 자바스크립트는 임시로 문자열.. 2020. 11. 16.

Javascript Object Object Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. 동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다. Object 객체 확장 Object.prototype.contain = function(X) { for(var name in this){ if(this[name] === X){ return true; } } return false; } var o = {'name':'jin seok', 'city':'seoul'} console.log(o.contain('jin s.. 2020. 11. 16.

Javascript 표준 내장 객체의 확장 표준 내장 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp 내장 객체를 이용한 배열 값의 랜덤 추출하기 배열 확장 1 var arr = new Array('kim','jin','seok','25', 'Ma.. 2020. 11. 16.

Javascript 상속(inheritance)과 프로토타입(prototype) 상속 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 상속의 기본적인 예. function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototype.introduce = function(){ return 'My name is '+this.name; } var p1 = new Person('jin seok'); document.write(p1.introduce()+" "); .prototype이라는.. 2020. 11. 13.

Javascript this this this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 함수 호출 function func(){ if(window === this){ document.write("true"); } } func(); 위의 코드와 결과를 보면 func() 함수 안의 this는 func() 함수의 전역객체인 window인 것을 확인 할 수있다. 메소드의 호출 var o = { func : function(){ if(o === this){ document.write(.. 2020. 11. 13.

Javascript 전역개체에 대하여 전역개체 전역객체(Global object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. function func(){ document.write('jin seok'+''); } func(); window.func(); var o = {'func':function(){ document.write('jin seok'+""); }} o.func(); window.o.func(); func();와 window.func();는 모두 실행이 된다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다. 자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다. 전역개체 API ECMAScript에서는 전역객체.. 2020. 11. 13.

Javascript 생성자와 new 객체 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. var person = {} person.name = 'jin seok'; person.introduce = function(){ return 'My name is '+this.name; } document.write(person.introduce()); 위의 코드는 person이라는 객체와 밑의 코드들이 분리되어 있어 가독성이 떨어지고 중간에 다른 코드가 끼어있을 우려가 생긴다. 즉 객체를 만드는 과정에 분산되어 있다고 볼 수 있다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자. ↓ var person = { 'name' : 'jin se.. 2020. 11. 13.

Javascript 객체 지향 프로그래밍에 대하여 객체 지향 프로그래밍 객체지향 프로그래밍(Object-Oriented Programming)은 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 이 객체들을 마치 레고 블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체란 무엇인가를 이해하는 것이라고 할 수 있다. 객체지향 프로그래밍을 학습하는데 장애 중의 하나는 번역이다. Object를 번역한 객체는 현실에서는 거의 쓰지 않는 말이고, 객체는 변수와 메소드를 그룹핑한 것이다. 객체지향 프로그래밍 교육은 크게 두 가지로 구분된다. 문법.. 2020. 11. 12.

Javascript 함수의 호출 함수의 호출 JavaScript는 함수를 호출하는 특별한 방법을 제공한다. function func(){ } func(); 위의 코드에서 함수 func는 Function이라는 객체의 인스턴스(실행중인 임의의 프로세스)다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다. 대표적인 예로 메소드는 Function.apply과 Function.call이다. function sum(arg1, arg2){ return arg1+arg2; } alert(sum.apply(null, [1,2])) 위의 코드를 보면 함수 sum은 Function 객체의 인스턴스다. 그렇기 때문에 객체 Function 의 메소드 apply를 호출 할 수 있다. apply 메소드는 두개의 인자를 가질 수 있.. 2020. 11. 12.

Javascript 클로저 클로저이란? 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 내부함수 function outter(){ function inner(){ var title = 'jin seok'; alert(title); } inner(); } outter(); 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다. function outter(){ var title = 'jin seok'; function inner(){ alert(title); } inne.. 2020. 11. 10.

Javascript 유사 배열 arguments arguments 이란? 함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 arguments배열에는 arguments을 품고 있는 함수를 호출할 때 입력한 인자가 담겨있다. function sum(){ var i, _sum = 0; for(i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; } return _sum; } document.write('result : ' + sum(1,2,3,4)); 함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행의 sum()을 보면 함수 sum은 인자에 대한 정의가 없이 비워져있다. 하지만 마지막 .. 2020. 11. 10.

Javascript 값으로서의 함수와 콜백 값으로서의 함수 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. function a(){} 위의 코드에서 함수 a는 변수 a에 담겨진 값이다. a = { b:function(){ } }; 또한 위의 코드에서처럼 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. function cal(func, num){ return func(num) } function increase(num){ return num+1 } function decrease(num){ return num-1 } alert(c.. 2020. 11. 10.

Javascript 함수지향-유효범위 유효범위란? 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global'; function fscope(){ alert(vscope); } fscope(); 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. var vscope = 'global'; function fscope(){ var vscope = 'local'; alert('함수안'+vscope); } fscope(); alert('함수밖'+vscope); 함수 .. 2020. 11. 9.

Javascript 정규표현식(regular expression)에 대한 기본 정규표현식이란? 정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식의 생성 정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 컴파일(compile) 컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. var pattern = /a/ var pattern = new RegExp('a'); 위 두 가지 방법과 같이 'a'라는 문자를 컴파일하며 객체를 만들며 패턴을 생성해낸다. 정규표현식 실행(execution) 정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다... 2020. 11. 9.

Javascript API 기본과 언어 문서 API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 레퍼런스와 튜토리얼 프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 tutorial(안내서)가 있다. 통상 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미하다. 언어에 대한 강의들은 일종의 안내서라고 할 수 있고, 자바스크립트 사전은 레퍼런스라고 할 수 있다. 자바스크립트의 API 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다. 자바스크립트 API 문서 ECMAScript (표준문서) .. 2020. 11. 9.

Javascript 모듈(module)에 대하여 모듈이란? 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들인 모듈(module)을 사용된다. 순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 모듈을 사용하면 좋은 이유 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에.. 2020. 11. 6.

Javascript 객체(object) 및 객체 지향 프로그램 객체란? 배열은 아이템에 대한 식별자로 숫자를 사용했다면 객체란 문자를 사용하고 싶을때 사용한다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 되는데 이 인덱스를 이용하해서 데이터를 가져오게 되는데 이때 객체로 인덷스를 문자로 사용한다. 객체의 생성 var grades = {'kim': 10, 'jin': 6, 'seok': 80}; 'kim'은 key가 되고, 10은 value가 된다. var grades = {}; grades['kim'] = 10; grades[jin'] = 6; grades['seok'] = 80; var grades = new Object(); grades['kim'] = 10; grades['jin'] = 6; gra.. 2020. 11. 6.

Javascript 배열(array) 배열이란? 배열이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 배열의 생성 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법으로 배열을 쓰면 된다. var member = ['kim', 'jin', 'soek'] 변수 member에 담아보고자하는 정보를 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다. 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다. 이 숫자를 색인(index)라고 부르고 0부터 시작한다. 즉 첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어.. 2020. 11. 6.

Javascript 함수(Function) 함수란? 자바스크립트에서 함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여주는 기능이다. 함수는 가독성을 높이며 유지보수에 용이하다. 또 재사용의 편리 또한 있어 자바스크립트에서 매우 중요하다. 함수의 형식과 정의 function 함수명( [인자...[,인자]] ){ 코드 return 반환값 } 함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략 할 수 있으며 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다. 함수의 이름을 numbering()으로 정하였다. 함수 소괄호 안의 인자들이 함수 이름numbering()을 적으면 호출된다. .. 2020. 11. 5.

javascript 반복문(Loop) 반복문이란? 인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다. 반복문의 문법들 while while (조건){ 반복해서 실행할 코드 } while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다. 무한 반복을 피하기 위해서는 위 코드처럼 조건을 걸어주어야 한다. while문 조건에.. 2020. 11. 5.

Javascript 조건문의 문법 조건문이란? 조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다. 조건문의 문법 if 조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다. if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다. 거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다. else if if문의 조건이 false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다. 위의 코드를 보면 모든 if문의 조건이 false로 되어 있어 결국 맨.. 2020. 11. 3.

Javascript 비교 연산자 비교 연산자란? 프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true와 false는 블린(boolean)이라고 불리는 데이터 형식이다. == 동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다. === 일치 연산자로 '==='좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. '==='는 숫자 7과 문자 7을 다르게 인식한다. 반면에 '=='는 양쪽의 값을 같다고 판.. 2020. 11. 3.

Javascript 변수 Variable 변수 Variable 란? 문자나 숫자 같은 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 마치 사람이 쓰는 언어인 자연어에서 대명사와 비슷한 역할을 한다. 변수의 선언 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다. var은 위에 한 번 선언해준다면 밑의 계속되는 코드에 계속 이용해도 상관없다. 변수 a에 담겨 있는 값이 1일 때는 a+7의 결과가 8가 된다. 즉, a에 변수를 선언하여 7이 담겨져 있다는 거다. 변수의 값이 꼭 숫자만 올 수 있는 것은 아니다. 문자 또한 따옴표를 이용하며 사용 가능하다. 변수의 의의 위의 코드중 맨 위에 변수로 선언한 a=100; 의 100만 고쳐준다면 아래에 선언되어 있는 .. 2020. 11. 3.

Javascript 숫자와 문자에 대한 기본 Javascript의 숫자와 문자 프로그래밍 입문자에게 가장 익숙한 데이터 형(data type)은 숫자와 문자이며 데이터 형인 문자와 숫자를 프로그래밍에서는 어떻게 표현하고 연산하는지 알아보고자 한다. 옆에 이미지에 나와있는 결과처럼 자바스크립트의 언어의 () 안에 별다른 기호 없이 +, *, / 을 해준다면 그대로 계산기가 계산하듯이 결과값이 도출된다. console.log는 자바스크립트 언어의 일종으로 크롬 개발자 도구의 콘솔에서 쉽게 결과를 볼 수 있도록 할 수 있어 사용하였다. Math는 수학과 관련된 명령어를 불러들이는 일종의 카테고리로 생각하면 된다. Math 뒤에 점과 같이 붙어 있는 것이 수학과 관련된 명령어들이다. .pow - (n,m) 중 n의 m승 즉, n^m .round - 반올림.. 2020. 11. 3.

Javascript 기본 및 실행 방법 Javascript 이란? JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. Javascript 의 실행 alert('Hello world');가 기본적인 예로 든 자바스크립트 형태이다. 안에 자바스크립트 명령어를 적고 html을 실행하듯이 웹 페이지를 열면 정상적으로 실행 할 수 있다. 예로 마땅한 개발 도구가 없다면 컴퓨터에 있는 메모장을 열어 위의 코드를 입력하고 파일 확장자를 .html로 저장하고 이 파일의 웹을 열어보면 결과를 확인 할 수 있다. 2020. 11. 3.

이전 1 다음

티스토리툴바