분류 전체보기

[ Javascript ] 콜스택과 힙

자바스크립트는 메모리 관리를 위해 콜스택과 힙을 사용합니다. 콜스택 콜스택은 원시타입의 데이터가 저장되는 공간입니다. 실행 컨텍스트를 통해, 변수 식별자, 스코프 체인, this, 코드 실행 순서등을 수행합니다. 힙 참조 타입의 데이터가 저장되는 공간입니다. Reference https://curryyou.tistory.com/276

[ Javascript ] 클래스란 무엇인가?

클래스 (Class) ES6 에서 추가된 문법으로, 클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 합니다. 클래스 선언 클래스는 class 키워드를 사용하여 선언합니다. class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello! My name is ${this.name}`); } } 클래스 사용 클래스는 new 키워드를 사용하여 객체를 생성합니다. const me = new Person("Lee"); me.sayHello(); // Hello! My name is Lee 클래스 표현식 클래스는 변수에 할당하여 사용할 수 있습니다. const Person =..

[ JavaScript ] 자바스크립트 메모리 관리

메모리 관리 자바스크립트는 메모리 관리를 위해 가비지 컬렉션을 사용한다. 가비지 컬렉션은 사용하지 않는 메모리를 자동으로 해제하는 기능이다. 메모리 생명주기 할당 : 변수에 값을 할당하면 메모리에 공간이 할당된다. 사용 : 할당된 메모리 공간을 참조하거나 접근한다. (Read, Write) 해제 : 사용이 끝난 메모리 공간을 해제한다. => 2번째 부분은 모든 언어에서 명시적으로 사용된다. 하지만 1번째와 3번째는 low-level 언어에서는 명시적으로 사용되지만, high-level 언어에서는 암묵적으로 사용된다. 자바스크립트의 메모리 관리 값 초기화 자바스크립트는 값을 선언할 때, 자동으로 메모리를 할당한다. // 정수, 문자열을 담기 위한 메모리 할당 var n = 123; var s = "azer..

[ JavaScript ] map, forEach, reduce

map, forEach, reduce map, forEach, reduce는 배열의 모든 요소를 순회하며, 각 요소에 대해 어떤 작업을 수행할 때 사용하는 메서드이다. map let Arr = arr.map(callback(currentValue[, index[, array]])[, thisArg]) // currentValue : 현재 처리되고 있는 요소 // index : 현재 처리되고 있는 요소의 index 값 // array : map()을 호출한 배열 // thisArg : callback 함수 내부에서 사용할 this 레퍼런스 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const array1 = [1, 4, 9, 16]; ..

[ Javascript ] 자바스크립트에서 데이터 형변환

데이터 형변환 자바스크립트에는 기본적으로 변수에는 데이터 타입이 없으며, 값에 따라 자동으로 데이터 타입이 결정된다. 이를 동적 타이핑이라고 한다. let a = 1; console.log(typeof a, a); // number 1 a += "hello"; console.log(typeof a, a); // string 1hello a = true; console.log(typeof a, a); // boolean true => 자바스크립트에서는 데이터 타입이 없기 때문에, 변수에 값을 할당할 때마다 데이터 타입이 변경된다. 위 예제에서 a는 처음에 number 타입이었지만, 문자열을 더하면서 string 타입으로 변경되었다. 그리고 true를 할당하면서 boolean 타입으로 변경되었다. 위 코드의..

[ Javascript ] 불변성을 유지하는 방법

불변성이란? JavaScript에서 불변성이란, 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 상태를 변경할 수 없다는 것은, 객체의 프로퍼티를 변경할 수 없다는 것을 의미한다. Immutable type vs Mutable type Immutability 란 객체의 상태를 변경할 수 없는 것을 의미한다. 원시 타입은 Immutable type이다. (ex. Number, String, Boolean, Symbol, null, undefined) let a = 1; a = 2; console.log(a); // 2 ➡ 1 이라는 int 타입의 값이 메모리에 할당되고, a라는 변수를 가리킨다. 그리고 a에 2라는 값을 할당하면, 2라는 값이 새로 메모리에 할당되고, a는 2를 가리키게 된다..

[ Javascript ] Ajax 란 무엇인가

Ajax Ajax는 Asynchronous Javascript And XML의 약자로, JavaScript 를 통한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. Ajax는 웹 페이지를 새로고침하지 않고도 서버에 데이터를 요청하고 받아오는 기법으로, 사용자의 UX를 향상시킬 수 있다. 최근에는 XML 대신 JSON 형식을 주로 사용한다. Ajax 를 사용하는 이유 웹 페이지를 새로고침하지 않고도 서버에 데이터를 요청하고 받아오는 기법으로, 사용자의 UX를 향상시킬 수 있습니다. HTTP 프로토콜은 클라이언트가 서버에 요청을 보내면 서버는 요청에 대한 응답을 보내고 연결을 끊는데 이때, 클라이언트는 서버로부터 응답을 받을 때까지 아무런 행동도 취할 수 없는데 이것을 동기식 통신이라..

[ Javascript ] This 란 무엇인가?

This this 란 함수를 호출할 때 생성되는 실행 컨텍스트 프로퍼티이다. This 가 가리키는 값은 함수가 호출되는 방식에 따라 다릅니다. 식별자 this 는 함수가 호출되는 방식에 따라 this 가 가리키는 값이 동적으로 결정됩니다. 이를 바인딩이라고 합니다. this 바인딩 1. 전역 객체 바인딩 함수가 전역에서 호출되면 this 는 전역 객체를 가리킵니다. 브라우저 환경에서 전역 객체는 window, Node.js 환경에서 전역 객체는 global 입니다. function foo() { console.log(this); } foo(); // window 2. 객체의 메서드 호출 함수가 객체의 메서드로 호출되면 this 는 객체를 가리킵니다. const obj = { foo() { console...

[ JavaScript ] 고차함수 ( HOF ) 란 무엇인가?

고차함수 (Higher-order function, HOF) 자바스크립트 함수는 일급 객체이므로 함수를 값으로 다룰 수 있습니다. 함수를 값으로 다룰 수 있다는 것은 함수를 인자로 전달하거나 함수를 반환할 수 있다는 것을 의미합니다. 이러한 함수를 고차함수라고 합니다. const add = (x, y) => x + y; const square = (x) => x * x; const doSomething = (f, x, y) => f(x, y); doSomething(add, 1, 2); // 3 doSomething(square, 2, 3); // 4 위 예제에서 doSomething 함수는 add 함수와 square 함수를 인자로 전달받아 함수를 실행합니다. 이처럼 함수를 인자로 전달받아 함수를 실행하..

[ Javascript ] passed by value, passed by reference 의 차이점

값에 의한 전달 (passed by value) 원시 타입의 값은 값에 의한 전달 (passed by value) 방식으로 전달됩니다. 원시 타입의 값은 변경할 수 없는 값이므로 원시 타입의 값을 변경하려면 새로운 값을 재할당해야 합니다. 또한 원시 타입의 값은 변경할 수 없는 값이므로 함수의 매개변수로 원시 타입의 값을 전달하면 함수 내부에서 매개변수의 값을 변경해도 원본 값은 변경되지 않습니다. const num = 1; const increase = (num) => { return num + 1; }; increase(num); // 2 console.log(num); // 1 참조에 의한 전달 (passed by reference) 객체 타입의 값은 참조에 의한 전달 (passed by refer..