목록프론트엔드 부트캠프 (78)
heyday2024 님의 블로그
가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요 var user = { name: "john", age: 20,};var getAged = function (user, passedTime) { // 여기를 작성해 주세요! // 깊은 복사 방식을 선택할까했지만, user라는 객체는 depth 가 1인 for loop로도 충분히 복사가 되고, // 상황에 맞는 얕은 복사 이용이 깊은복사보다 성능이 좋기 떄문에 나는 얕은 복사를 해볼 것이다. let newUser = { ...user }; newUser.age += passedTime; return newUser; // let newUser = {}; // for (let property..
- 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.- 그 객체 안에는 3가지가 존재한다.✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings객체 지향 언어에서의 this = 클래스로 생성한 인스턴스자바스크립트에서는 this가 어디에서나 사용될 수 있음!!! this는 실행 컨텍스트가 생성될 때 결정됨(this를 bind한다(=묶는다)) 다시 말하면. this는 함수를 호출할 때 결정된다. 상황에 따라 달라지는 this: 1. 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리켜요.런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node.js 환경)를 각각 가리킵니다. 런타임 환경? ja..
APIApplication Programming Interfaces 약자서로 다른 시스템이 서로 소통할 수 있는 방법 또는 창구일종의 메뉴판 역할. ex) 손님(client)이 키오스크를 통해서 메뉴를 주문(요청)하면 식당(server)이 주문한 메뉴를 조리해서 손님에게 가져옵니다(응답).DOMDocument Object Model 의 약자웹 페이지 문서를 구성하는 요소들을 트리(Tree) 구조로 표현한 객체브라우저에서 HTML 문서를 자바스크립트로 제어할 수 있게 해주는 인터페이스BOMBrowser Object Model 의 약자문서 이외의 모든 것을 제어하기 위해 제공하는 추가 객체Event브라우저에서 사용자가 웹 페이지와 상호작용할 때 발생하는 사건다양한 종류의 Event가 있음 ex) click,..
브랜치(== 복사본): 보통 기능 추가 코드 짤 때 브랜치 만들어 사용git branch 브랜치이름 브랜치 이동 명령어git switch 브랜치이름 예전에는 브랜치 이동할 때 checkout 썼음...git checkout 브랜치 이름 여기서 login 브랜치가 최신인데 main으로 합치는 이유:협업 시 여러 사람들이 코드를 한곳에 합쳐야되기 떄문에.... 최종 브랜치로 이동을 하고 git merge 브랜치명 (위 예시에서는 git merge login) 근데 보통 github 에서 합치는 게 더욱 선호됨 : 터미널에서 직접 커밋하고 병합하는 것보다 협업과 코드 품질 관리를 체계적으로 할 수 있기 때문 코드 리뷰: PR을 통해 팀원들이 코드 변경 사항을 검토하고 피드백을 줄 수 있습니다. 터미널..
콜백 함수다른 함수에 인자로 전달되어 나중에 호출되는 함수sort(), map() 등의 배열 메소드에서 인자로 자주 사용됩니다.변경 메소드 / 비변경 메소드변경 메서드(Mutable Method): 배열 원본 자체를 변경하는 메서드비변경 메서드(Immutable Method): 배열 원본을 변경하지 않고, 새로운 배열을 반환하는 메서드참조형 타입이란?참조형 타입은 메모리에 값이 저장된 주소를 참조하는 타입(객체, 배열, 함수...) 참조형 타입은 값을 직접 가지지 않고, 해당 값이 저장된 메모리 주소를 가리킴.따라서, 같은 참조형 타입 변수를 여러 개 만들면 모두 동일한 메모리 주소를 가리키기 때문에 한 변수를 수정하면 다른 변수에도 영향을 미칠 수 있음. (참조 복사: const obj2 = obj1)..
실행 컨텍스트(Execution Context): 자바스크립트의 실행 컨텍스트는 실행할 코드에 제공할 환경정보들을 모아놓은 객체 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 크게 3가지의 일을 함.선언된 변수를 위로 끌어올림: 호이스팅(Hoisting)외부 환경 정보 구성(lexical environment)this 값 설정--> 이런 특징들이 JS가 다른 언어와 다르다는 것을 보여줌. 호이스팅: 자바스크립트만의 독특한 개념으로, 다른 언어에서는 일반적으로 지원되지 X외부 환경 정보 구성: 자바스크립트와 비슷한 방식으로 파이썬, Java(람다식), 일부 스크립트 언어들도 클로저 및 렉시컬 스코프를 지원함this 설정: 자바스크립트는 매우 유연하게 this를 설정하는 반면, 다른 객체지향 언어들(..
// 기본 매개변수는 항상 끝에서부터 채워줘야함 // 기본 매개변수를 갖는 함수는 나중에 확장할 떄 좋지 않음 function add(number1, number2 = 0) { console.log(number1 + number2); }- 매개변수 초기값 넣을 때... function solution(array, commands) { const resultArray = []; commands.forEach(item => { let sortedArray = array.slice(item[0] - 1, item[1]).sort((a, b) => a - b); resultArray.push(sortedArray[item[2]-1]); }); return resultArray;}- 내가 짠..
1. 데이터 타입 종류와 메모리// (1) 데이터 타입의 종류(기본형과 참조형)// 자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분// 기본형: 기본형은 단일 값을 나타내며, 그 값이 **불변(immutable)**합니다. 즉, 한 번 할당된 값은 변경할 수 없습니다. 복사할 때도 값 자체가 복사되며, 값이 담긴 주소값이 복사됩니다.// number: 숫자형// string: 문자열// boolean: 참/거짓// null: 값이 없음을 나타냄// undefined: 값이 정의되지 않음// symbol: 고유하고 변경 불가능한 값 (ES6에서 도입)// bigint: 큰 정수값을 표현 (ES11에서 도입)let x = 10;let y =..
용어 정리:함수 스코프함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있다는 규칙truthy / falsytruthy : 조건문을 처리할 때 true 로 변환되는 값falsy : 조건문을 처리할 때 false 로 변환되는 값false, 0, “”, NaN, undefined, null리터럴사람과 자바스크립트 엔진이 모두 이해할 수 있는 특정 데이터타입의 값에 대한 표기법컴퓨터가 봐도 사람이 봐도 어떤 타입인지 알수 있는 그런 값,,, number literalstring literalboolean literalnull literalundefined literal표현식값으로 평가되는 자바스크립트 문장***(함수가 변수에 할당이된다--> 함수 표현식)변수에 할당할 수 있는 자바스크립트 문장코딩 컨벤..
padStart: 문자열이 특정 길이에 도달하도록, 문자열의 시작 부분에 주어진 문자열을 추가해주는 메서드. 이 메서드는 기존 문자열을 수정하지 않고, 패딩이 적용된 새로운 문자열을 반환함.// str이 길이에 도달 할 때까지 문자로 채워나감str.padStart(길이, 문자)'1234'.padStart(8, '*') // '****1234''1234'.padStart(6, '*') // '**1234''1234'.padStart(4, '*') // '1234''1234'.padStart(3, '*') // '1234'- for 문 사용할 때.... 배열의 요소를 모두 탐색하여 나누어 떨어지는지 확인한다 (= 완전탐색)// 오름차순 정렬arr.sort((a,b) => a - b)// 내림차순 정렬arr...