Javascript

[ 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..

[ Javascript ] 얕은 복사 vs 깊은 복사

기본형 데이터와 참조형 데이터 자바스크립트에서 값은 원시값과 참조값으로 나뉩니다. 원시값 ( Primitive Value ) 객체가 아닌 데이터들 ( 기본 자료형 )을 의미하며, 변수에 메모리 공간에 실제 데이터 값이 저장됩니다. 할당된 변수를 조작하려하면 실제 값이 조작됩니다. Number String Boolean Null Undefinded Symbol 기본적으로 불변성이 유지됩니다. 참조값 ( Reference Value ) 객체를 의미하며 변수에 할당될 때, 값이 직접 해당 변수에 저장되지 않고 변수에 대한 데이터 참조만 저장됩니다. 얕은 복사 vs 깊은 복사 얕은 복사 ( Shallow Copy ) : 객체의 참조값 ( 주소 ) 을 복사 깊은 복사 ( Deep Copy ) : 객체의 실제 값을..

[ JavaScript ] ==, === 의 차이점

==, === 의 차이 자바스크립트는 기본적으로 타입이 매우 유연한 언어입니다. 보통 어떤 변수를 선언하면 형변환이 암시적으로 이루어지는데, 그래서 위에 짤 처럼 숫자와 문자를 같다고 하는 상황이 발생하는 것입니다. ==, === 은 각각 Equal Operator, Strict Equal Oprator 라고 부르고 느슨한 비교, 엄격한 비교라고 부르기도 합니다. 0 == false; // true 0 == ""; // true 1 == true; // true 1 == "1"; // true 1 == [1]; // true "1" == [1]; // true "1" == true; // true true == [1]; // true false == ""; // true false == null; // ..

[ JavaScript ] Arrow Function ( 화살표 함수 )

화살표 함수 ( Arrow Function ) 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function) 의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. 화살표 함수란 ES6 에서 처음 생긴 문법으로, 함수를 정의하는 방식 중 하나이다. 화살표를 선언해서 함수를 표현하는 방식이라 화살표 함수라는 이름이 붙여졌다. // Function Expression const add = function (a, b) { return a + b; }; // Arrow Function const add = (a, b) => a + b; 함수 표현식 보다 간단하게 함수를 나타낼 수 있습니다. 이렇게 간단하고 간결하게 표현되..