JavaScript/study 35

[javascript] 👪 함수 호이스팅 / 함수 선언문과 함수 표현식

함수 호이스팅은 함수 선언이 해당 스코프의 최상단으로 옮겨지는 동작을 가리킨다. 변수에서의 호이스팅과는 다르다. 함수 호이스팅은 컴파일 단계에서 수행되며, 함수 선언은 해당 스코프의 최상단으로 이동됨. 이로 인해 함수를 선언하기 이전에도 해당 함수를 참조할 수 있는 현상이 발생함!!!!!! 즉, 함수 선언문의 위치와 상관없이 함수를 호출할 수 있음. foo(); // "Hello, World!" // 함수 선언문 function foo() { console.log("Hello, World!"); } but, 함수 호이스팅은 함수 선언문(function declaration)에만 적용된다!!!!!! 함수 표현식(function expression)은 호이스팅되지 않으며, 변수에 할당된 함수는 변수 호이스팅..

JavaScript/study 2023.05.23

[javascript] 자바스크립트에서의 실행컨텍스트 (스택/큐)

실행 컨텍스트란? javascript 코드가 실행되기 위해 필요한 환경을 제공하는 개념으로, 실행할 코드에 제공할 환경정보들을 모아놓은 객체라고 볼 수 있다. 실행 컨텍스트는 코드가 실행되는 동안 변수,함수 선언,스코프 등을 관리하고 실행 순서를 추적 각각의 코드 블록이 실행될때 마다(전역코드,함수 등) 해당 코드의 실행 컨텍스트가 생성됨. 스택 (Stack) : -후입선출(LIFO, Last-In-First-Out) 구조, 마지막으로 삽입된 데이터가 가장 먼저 삭제됨. -삽입 작업은 "push", 삭제 작업은 "pop" -스택은 함수 호출과 관련된 실행 컨텍스트 관리, 브라우저의 방문 기록(back button), 실행 취소/다시 실행 등에 사용됨 -자바스크립트에서는 함수 호출 시 호출 스택을 사용하여..

JavaScript/study 2023.05.23

[javascript] typeof null / 자바스크립트 자체 버그

그 유명한 자바스크립트 버그 하위 호환성 유지때문에 남아있는 유물 결론 : === 를 습관화 합시다 var n = null; console.log(typeof n); // 출력: "object" // 동등 연산자 (equality operator) console.log(n == undefined); // 출력: true console.log(n == null); // 출력: true // 일치 연산자 (identity operator) console.log(n === undefined); // 출력: false console.log(n === null); // 출력: true

JavaScript/study 2023.05.23

[javascript] ⭐⭐객체의 가변값과 가변성 (with, 참조형 데이터) / 얕은복사 깊은복사

👀 재귀적으로 수행한다? 함수나 알고리즘이 자기 자신을 호출해 반복적으로 실행되는 것 데이터타입의 기본 설명 https://vc-xz.tistory.com/144 [javascript] 데이터타입의 종류 (기본형, 참조형) *참조형은 기본적으로 객체다. * 복제의 방식 -기본형 : 값이 담긴 주소값을 바로 복제 -참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 *불변성의 여부 -기본형 : 불변성 vc-xz.tistory.com * 그래서 기본형 데이터와 참조형 데이터 변수할당의 차이점은? -객체의 변수 (프로퍼티) 영역의 별도의 메모리 공간을 부여하는지 아닌지! *데이터 영역에 저장된 값은 여전히 계속 불변값이지만(1001,5001,7103 등) obj1 을 위한 별도 영역은 변경..

JavaScript/study 2023.05.23

[javascript] 데이터타입의 종류 (기본형, 참조형)

*참조형은 기본적으로 객체다. * 복제의 방식 -기본형 : 값이 담긴 주소값을 바로 복제 -참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 *불변성의 여부 -기본형 : 불변성을 띔 (데이터 영역 메모리를 변경할 수 없음) -참조형 : 불변성을 띄지 않음. *메모리 기준으로 다시한번 생각해보는 두가지 주요 개념 -변수 : 변수 영역 메모리를 변경할 수 있음. -상수 : 변수 영역 메모리를 변경할 수 없음 ( ex. const, object.freeze) => 대문자 변수로 지정하면 개발자들 사이에서 상수임을 암시하는것 *필요없어진 데이터 주소값들은 js 가비지컬렉터가 수거한다.

JavaScript/study 2023.05.23

[javascript] Map/Set 컬렉션 객체 (자료구조)

일단 컬렉션 객체(추가적인 자료구조)를 쓰는 이유 중복 제거 및 고유한 값 관리: Set은 중복을 허용하지 않는 특성을 가지기 때문에 중복된 값을 저장하지 않고 고유한 값들의 컬렉션을 관리할 수 있다. 효율적인 데이터 검색: Map은 키-값 쌍을 저장하고, 키를 사용하여 값을 조회하는 데 효율적이다. 키를 기반으로 빠르게 값을 검색하고 필요한 정보를 쉽게 가져올 수 있습니다. 순서 유지: Map은 데이터를 저장한 순서를 보존하기 때문에, 데이터의 순서가 중요한 경우 유용하게 사용된다. 입력한 순서대로 데이터를 유지하고 처리할 수 있다. 다양한 데이터 타입 사용: Map은 키로 다양한 데이터 타입을 사용할 수 있다. 객체, 함수, 숫자, 문자열 등을 키로 활용하여 원하는 방식으로 데이터를 구조화할 수 있다..

JavaScript/study 2023.05.22

[javascript] ⭐⭐⭐⭐⭐ 자바스크립트 함수는 일급 객체로 간주됨

일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. [위키백과] 자바스크립트의 함수는 일급 객체로서 다른 객체와 동등한 취급을 받는다. 이는 함수를 다양한 상황에서 유연하게 활용할 수 있다는 의미이며, 함수형 프로그래밍의 기반이 되는 특징이다. 함수를 일급 객체로 취급하는 것은 자바스크립트에서 강력하고 다양한 기능을 구현할 수 있도록 한다. 특징은 다음과 같다!!! 1. 변수에 함수를 할당할 수 있다. const sayHello = function() { console.log('Hello!'); }; sayHello(); // 'Hello!' 이 특징때문에 생기는 일: 1. 콜백함수 - 매개변수로써 쓰이는 함수 2. 고차함수 : 함수..

JavaScript/study 2023.05.22

[javascript] ES6 템플릿 리터럴 (Template literals), 백틱

**공식문서** https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer.mozilla.org 템플릿 리터럴이란? 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식 백틱(```) 과 ${}로 표현!! 특징 -${} 를 활용해 동적으로 변수,상수,함수 등의 값을 문자열에 포함 가능 (= 문자열..

JavaScript/study 2023.05.22

[javascript] ES6 단축 속성명

객체의 key와 valuse 값이 같다면 생략 가능하다. 쓰는 이유? 변수명과 속성명을 일일이 작성하지 않아도 코드를 간결하게 작성 가능, 변수명이 변경되더라도 속성명을 수정할 필요가 없음. const name = "John"; const age = 25; // 단축 속성명을 사용하여 객체를 정의 const person = { name, // name: name과 동일한 의미 age, // age: age와 동일한 의미 sayHello() { console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`); } }; console.log(person.name); // 출력: "John" console.log(person.age); // 출력: 25 person.say..

JavaScript/study 2023.05.22

[javascript] ES6 구조 분해 할당

구조 분해 할당 (Destructuring Assignment)은 자바스크립트에서 배열이나 객체를 해체하여 개별 변수로 분할하는 기능!! 이를 통해 배열의 각 요소나 객체의 속성을 쉽게 추출하여 변수에 할당할 수 있다. 구조분해할당이 필요한 이유?? 1. 변수할당이 쉬워짐, 복합적인 데이터 구조(객체,배열,튜플 등) 값을 추출 해 여러 변수에 할당하는 간편한 방법을 제공함. 2. 코드가 간결해지고 유연해짐. 필요한 값만 추출해 변수에 할당 할 수 있다. -아래는 구조분해할당 없이 일반코드로 작성했을때의 예시 let a = 10; let b = 20; let temp; // 임시 변수를 사용하여 a와 b의 값을 교환 temp = a; a = b; b = temp; console.log(a); // 출력: ..

JavaScript/study 2023.05.22