Front/JavaScript

Front/JavaScript

[JavaScript] ES8 (1) - Object.values, Object.entries, padStart, padEnd

ES8 문법을 소개하기 앞서,ES7 문법도 간략하게 짚고 넘어가기. ES7.includes()const dragons = ['Tim', 'Johnathan', 'Sandy', 'Sarah'];dragons.includes('John') // falsedragons.filter(name => name.includes('John')) // ['Johnathan'] 거듭제곱 연산자 (Exponential Operator)const square1 = (x) => Math.pow(x, 2); // ES6const square2 = (x) => x ** 2; // ES7square2(2); // 4  ES8.padStart() & .padEnd()String 의 앞/뒤에 ()자릿수만큼 공백 넣기const start..

Front/JavaScript

[JavaScript] Pass By Value vs Pass By Reference (얕은복사, 깊은복사)

자바스크립트에서 변수를 함수에 전달할 때 두가지 방식이 있다.1. Pass By Value (값에 의한 전달)2. Pass By Reference (참조에 의한 전달) 1. Pass By Value: 원시 타입 (Primitive Types) 을 함수에 전달할 때 값이 복사됨.: 적용 타입 - Number, String, Boolean, Null, Undefined, Symbol, BigInt: 원시 타입은 값 자체를 복사해서 전달하기 떄문에 원본 데이터에 영향을 주지 않음! var a = 5;var b = a;b++;console.log(a); // 5console.log(b); // 6   2. Pass By Reference: 객체 타입 (Object) 을 함수에 전달할 때, 참조 (Referenc..

Front/JavaScript

[JavaScript] 인스턴스화 (Instantation)

class Player { constructor(name, type) { console.log(this); // Wizard{} this.name = name; this.type = type; } introduce() { console.log(`Hi I am ${this.name}, I'm a ${this.type}`); }}class Wizard extends Player { constructor(name, type) { super(name, type); // Player 의 constructor 실행 console.log('wizard', this); // Wizard {name:"Shelly", type:"Healer"} ..

Front/JavaScript

[JavaScript] 클로저, 커링, 함수 조합

1. 함수형 프로그래밍함수형 프로그래밍(Function Programming)은 작은 문제를 해결할 수 있는 순수 함수(Pure Function)들을 조합하여 재사용성과 유지보수성을 높이는 프로그래밍 패러다임이다.순수 함수의 대표적인 특징은 다음과 같다.1. Deterministic: 동일한 입력이 주어지면 항상 동일한 결과를 반환한다.2. No Side Effects: 프로그램의 실행 과정에서 전역 변수, 데이터베이스, 파일 시스템, UI, 네트워크 요청 등의 외부 상태를 변경하거나 의존하지 않아야 한다./* Side Effects가 있는 함수 (Impure Function) */let total = 0;function addToTotal(value) { total += value; // 외부 변..

Front/JavaScript

[JavaScript] ES6 문법 정리

1. let, constvar 과 let 은 뭐가 다른가?자바스크립트를 쓰면서 항상 궁금했는데, 이번에 그 궁금증이 풀렸다. const num = 100;var flag = false;if (num > 90) { var flag = true; // 재할당}console.log(flag) // true const num = 100;let flag = false;if (num > 90) { let flag = true; // 존재범위 {}}console.log(flag) // true 1. let, const 는 변수를 재선언 할 수 없다. -> 변수명의 중복을 막을 수 있다.- var 은 같은 이름으로 재선언을 자유롭게 할 수 있다. 그러면 나중에 뭐가 뭔지 헷갈리겟져? 2. var 변수의 존재 범위는 f..

Front/JavaScript

[JavaScript] function 은 statment 이면서 value 이다.

홀리 쉣이게 된다고?자스 이 미친 언어이렇게 써볼 생각도 못했네익명 함수는 많이 써봤지만 그걸 배열이나 객체에 넣어볼 생각은 정말 해본 적 없는데아 근데 생각해보니까 객체에 함수를 담는건 본 적 있는 듯??그냥 그렇구나 하고 넘겼는데 "자바스크립트에서 함수는 값이다" 라는 개념이 적용된 문법이었구나..  // function 은 statment 이면서 value 이다.var f = function() { console.log(1+1);};// 배열과 객체의 원소로 함수를 넣을 수 있음!!!!!!!!var arr = [f];var obj = { func : f };f();arr[0]();obj.func();  // 객체는 복잡한 코드를 정리정돈해서 복잡성을 낮추는 기본적인 기능에서부터 출발한다.var..

Front/JavaScript

[JavaScript] JSON / AJAX + JSON

▼ 더 많은 정보 더보기 https://www.oracle.com/kr/database/what-is-json/ JSON이란 무엇인가? JSON을 이용하는 프로그래머, 개발자, IT 전문가들은 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있습니다. www.oracle.com https://developer-talk.tistory.com/268 [JavaScript]JSON parse 와 JSON stringify 차이 JSON이란? JSON(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JavaScript 전용으로 만들어졌지만, 현재는 Java, Pyth..

Front/JavaScript

[JavaScript] AJAX

https://intheham.tistory.com/44#%3C%20DOM%20%3E-1 [JavaScript] form, image, DOM ※ 내장 객체 서열 window : 창의 위치, 툴바 구성 등 | document : 윈도우창에 웹 페이지 뿌리기 | form, image | button, text, textarea, radio.... (value 로 접근) - get, post // 이름이 t1인 입력 양식의 값 -- f.t intheham.tistory.com AJAX (Asynchronous JavaScript and XML) : 비동기 자바스크립트와 xml 웹 동기 요청 -- 요청을 보내면 새 페이지로 응답페이지를 받아옴. 전체 페이지 바뀜. 웹 비동기 요청 -- 응답 페..

함s
'Front/JavaScript' 카테고리의 글 목록 (2 Page)