Yoonmin

Javascript는 객체지향 프로그래밍 언어이다. React를 공부하기 시작하며 Javscript 객체지향에 관한 지식이 부족함을 인지하고 공부한 내용을 기록한다. 해당 글은 기존의 글들과 비슷한 내용을 가진 부분들이 있다. 이 글은 최종 정리본에 가까우니 추가적으로 모르는 글들은 javascript section의 글들을 봐주면 감사하겠다. 😀 ✨JS 객체지향 프로그래밍 정리!(Object Oriented Programming, OOP) ! JavaScript OOP의 특징은 ES6이상의 브라우저에서만 동작하는 게 큰 특징이다. 🔹this var kim = { name:'kim', first:10, second:20, sum:function(){ return this.first+this.second;..

표준 내장 객체란? 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp [Regular Expression(정규표현식)] 따라서 표준 내장 객체와 상응되는 것은 사용자 정의 객체라 볼 수 있다 배열의 확장 첫번째 ..

상속이란? 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해 준다. 쉽게 생각하기 위해 예제를 들어보자 객체는 하나의 컨테이너라 생각해 본다. 그 안에는 변수, 메소드가 포함되어 있다. 이때 객체의 특성을 통해 기존 객체를 물려받은 새로운 객체를 만들 수 있다. 이때 물려 받은 아들 객체(새로운 객체)는 부모 객체(원본 객체)와 동일한 기능을 가지게 된다. 아들 객체(새로운 객체)는 부모 객체(원본 객체)의 특정 기능은 제거, 추가하여 자신의 맥락에 맞게 재활용하게 된다.이러한 과정이 상..

this this는 함수 내에서 함수 호출 맥락(context)[사용하는 상황에 따라 변화하는 가변적인 것을 맥락이라 한다.]를 의미한다. 즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 📢함수 안에서 this라는 keyword는 그 함수가 소속되어있는 그 객체를 가르킨다. 즉,this는 메소드가 속해있는 객체를 가르키도록 약속된 특수한 예약어라고 보면된다. 쉽게 코드로 알아보자 var yoon = { name = 'yoon', first = 10, second = 20, sum:function(){ return this.first+this.second; }/..

✨전역객체란? 전역 객체 object 는 전역 범위 global scope(en-US) 에 항상 존재하는 객체를 의미합니다. 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 전역 객체의 멤버로서 생성됩니다. ( Node.js 에서는 예외.) 전역 객체의 interface 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 Window 를 가집니다. 이것은 Web에 있는 자바스크립트 코드의 상당수가 그렇습니다. window 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니..

arguments 함수에는 arguments라는 객체가 존재한다. 함수 안에서 여러가지의 인자의 정보를 담고있는 객체이다. 사용법이 매우 배열과 유사하기 때문에 유사배열이라 볼 수 있다. 즉, 함수를 이용하는 사람이 매개변수에 집어 넣는 값을 의미한다. function sum(){ //현재 인자 값이 존재하지 않는다. 그 이유는 인자가 들어오는 수를 예측 할 수 없기 때문이다. //함수 안의 arguments객체 안에 존재하는 값들을 꺼낸 후 sum에 더해 return해주면 결과를 알 수 있다. var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i..

값으로서의 함수 함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다. But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. ※ function a( ){ }를 다른 방식으로 표현 하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다. a = { b:function(){ //여기서 함수는 값이고 객체에 저장될 수 있다. /* key = b ->변수와 같은 역할을 해주고 있다. value = function(){} key값을 속성,property라 부른다. 그리고 value값을 메소드라 부른다. 즉, 객체 안에 정의되어있는 함수를 메소드라 부른다. */ } } 상단의 코드의 key값을..

✨유효 범위(Scope)란? 자바스크립트에서 객체나 함수는 모두 변수(variable)입니다. 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다. 🌟지역(local) 변수와 전역(global) 변수 하단의 코드를 통해 지역변수와 전역 변수를 비교해보자 let vscope = 'global'; // 전역변수 // 애플리케이션 전역에서 접근 할 수 있는 변수 function fscope(){ let vscope = 'local'; // 지역변수 //함수의 중괄호 내에서만 접근 할 수 있는 변수 console.log(vscope); } fscope(); //fscope 함수는 같은 함수 안에 있는 vscope를 출력하게된다. 🟣전역 변수(global) l..

✨ JavaScript에서 객체(object)란? 객체는 데이터와 함수의 집합입니다. +) 일반적으로 객체는 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 이들을 프로퍼티와 메소드라고 부릅니다 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대부분의 모든 것은 객체입니다. 객체는 서로 연관되어있는 데이터를 담아내기 위한 그릇이라 생각해도되는데 이는 배열과 매우 유사한 모습을 보여준다. 🤔 그럼 그들의 차이점을 잠시 들여다보자 객체 배열 원하는 데이터 값(문자,숫자 등)을 지정 할 수 있다. index 값에 숫자를 저장 key = value의 쌍이 객체 안에서 저장될때 순서가 정해져있지 않다. index값의 순서가 정해져있다. 추가적으로 알아두면 좋은 정보로 인덱스로 문자..

✨배열(array)이란? 배열은 칸마다 촘촘히 박스가 모여있는 자료구조를 의미한다. 배열의 포인티는 각 칸(박스, 메모리)에 인덱스 값이 지정되어있다. ➕자료구조란? 자료구조는 비슷한 종류의 요소들을 모아서 분류한 것을 의미한다. 분류한다는 것을 예시로 몇 개 들어보겠다. 오브젝트는 서로 연관된 특징과 행동들을 묶어둔 것이라 생각하면 되며, 오브젝트들을 묶어둔 것을 자료구조라 한다. Type(문자열, 정수, 실수 등)이 있는 언어에서는 동일한 Type의 데이터만 담을 수 있다. BUT, Javascript는 타입이 동적으로 정의되기 때문에 한 자료구조에 여러 Type을 담을 수 있다. (그러나 그렇게 하진 않는다.) 👀index의 특징 배열은 요소 index로 문자열을 사용할 수 없습니다. 무조건 정수만..