처음부터 차근차근

다른 객체지향 언어에서의 this : 클래스로 생성한 인스턴스 객체를 의미한다. Javascript에서의 this : 어디에서든지 사용가능하다. This : '이것' 이란 뜻. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 자바스크립트의 this는 기본적으로 실행 컨텍스트가 생성될 때 결정된다. 즉, 함수를 호출할 때 결정된다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 ..

실행 컨텍스트란?? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이며, 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 진행한다. 선언된 변수를 위로 끌어올리기(호이스팅) 외부 환경 정보를 구성 this 값을 설정 이러한 특징으로 인해 JS는 타 언어랑 다른 특징이 발생. Call stack에 대한 이해 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명한 '스텍'의 한 종류인 Call stack으로 쌓아 올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장한다. 컨텍스트의 구성 1) 실행 컨텍스트를 구성할 수 있는 방법 전역공간 eval()함수 함수(우리가 흔히 실행컨텍스트를 구성하는 방법) 2) 실..

JavaScript의 데이터 타입은 크게 두 가지로 나뉜다. 두 개의 구분 기준은 값의 저장 방식과 불변성 여부이다. [기본형과 참조형의 구분 기준] 복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성의 여부 (데이터 값이 아닌, 메모리 관점에서 봐야 한다) 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 불변성의 경우, 기본형이 이해되지 않을 수 있다. 이를 위해서는 메모리와 데이터에 관한 기본 지식이 필요하다. 1, 메모리, 데이터 - 비트 컴퓨터가 이해할 수 있는 가장 작은 단위 0,1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미 이러한 작은 조각이 모여서 메모리가 만들어진다. - 바이트(byte) 0과..

Map - Key - Value 값을 가지는 자료구조 - 객체와 달리 key로 사용할 수 있는 모든 유형을 사용할 수 있다. - key가 정렬된 순서대로 저장된다. - 기능 : 검색, 삭제, 제거, 여부 확인 💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다] new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() – 맵 안의 모든 ..

JS에서 함수는 일급 객체(First-Class Object)라고 한다. - 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. => 함수를 매우 유연하게 사용할 수 있다. 1) 변수에 함수를 할당 함수가 마치 값으로 취급된다. 나중에 사용될 수 있도록 조치가 되었다. const sayHello = function() { console.log('Hello!'); }; sayHello(); // "Hello!" 출력 2) 함수를 인자로 다른 함수에 전달할 수 있다. // 2-1 callback 함수 : 매개변수로써 쓰이는 함수 // 2-2 고차 함수 : 함수를 인자로 받거나 return하는 함수 function callFunction(func) { // 매개변수로 받은 ..

ECMAScript 6 (ES6)는 JS 버전 중 하나로, 쉽고 효율적으로 코드 작성이 가능하도록 개선되었다. 1) Let, Const - Let : 재할당은 가능하고, 재선언은 불가능하다. - Const : 재할당, 재선언이 불가능, 초기값이 없으면 선언이 불가능하다. - var : 재할당, 재선언이 가능하다. > 호이스팅이 가능하다. 2) arrow function - function이나 return 키워드 없이 함수를 만드는 방법이다. // 2 arrow function // ES5 function func() { return true } //ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm..

1.배열 - 여러 개의 값을 저장하고 관리할 수 있다. 1) 기본적인 배열 생성 // 1-1. 기본 생성 let fruits = ["사과", "바나나", "오렌지"]; // 0 1 2 2) 배열의 크기 지정 // 1-2 크기 지정 let numbers = new Array(5); // 크기가 5인 5개인 요소를 가지고 있는 배열 크기가 5인, 5개인 요소를 가지고 있는 배열 2. 배열의 요소 접근 해당하는 배열의 [index] 값을 넣어 확인 2. 요소 접근 console.log(fruits[0]); // "사과" console.log(fruits[1]); // "바나나" console.log(fruits[2]); // "오렌지" 3. 배열 메소드 1) push() 메소드 배열 마지막에 더하는 메소드 /..

객체 Object - 하나의 변수에 여러 개의 값을 넣을 수 있다. - key - value pair 1) 기본적인 객체 생성 방법 속성과 값을 콜론(:)으로 구분하여 작성한다. // 1-1. 기본적인 객체 생성 방법 let person = { name: "홍길동", age: 30, gender: "남자" }; 2) 생성자 함수를 이용한 객체 생성 방법 // 1-2. 생성자 함수를 이용한 객체 생성 방법 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; }; // 여러개의 객체를 생성 할 수 있다. let person1 = new Person("홍길동", 30, "남자"); let pers..

- 조건문 특정 조건을 만족하는 경우에만 코드를 실행할 수 있다. 1) 기본적인 if 문 let x = 10; if (x > 0) { // 조건이 ture일 경우만 실행됨 // main logic console.log("x는 양수입니다."); } 2) if - else 문 조건문 if에 해당하지 않는다면, else 조건으로 이동. x = -3; if (x > 0){ // true일 경우 // main logic #1 console.log("x는 양수입니다.") } else { // false //main logig #2 console.log("x는 음수입니다.") } 3) if - else if - else 문 조건문 if 와, 해당하지 않을 경우 else if, 그 다음에도 해당하지 않을 경우 else..

함수는 왜 사용하는가? - 반복적으로 나오는 어떠한 코드를 반복해서 쓰는게 아니라, 함수를 지정함으로써 코드의 재사용성과 좀 더 깔끔하게 코드를 작성할 수 있도록 해줌 JS에서 함수 정의하기 // 1. 함수 선언문 function add(x, y) { // 소괄호 안에 매개변수가 들어간다. // 함수 내부에서 실행할 로직 return x + y; // 함수의 값을 return 한다는 의미 } // 2. 함수 표현식 let add2 = function(x, y) { return x + y; } // 함수를 호출한다 = 사용한다 // 함수명() = add(input) function 함수명(parameter) {} 로 함수를 정의하거나, let을 통해 함수를 정의 할 수 있다. 함수 호출하기 함수가 정의되어..