일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 리액트
- 파이썬 for in
- 내배캠 프로젝트
- 파이썬 딕셔너리
- 코딩테스트
- 내일배움캠프 최종 프로젝트
- React Hooks
- 타입스크립트
- 리액트 프로젝트
- 파이썬 for
- 타입스크립트 리액트
- 내일배움캠프
- 리액트 공식문서
- 한글 공부 사이트
- REACT
- 내일배움캠프 프로젝트
- 자바스크립트
- 파이썬 replace
- Next 팀 프로젝트
- 리액트 공식 문서
- 파이썬 slice
- 파이썬 enumerate
- useState
- JavaScript
- useEffect
- typeScript
- 리액트 훅
- 프로그래머스
- tanstack query
- 파이썬 반복문
- Today
- Total
목록JavaScript (51)
sohyeon kim

💡 렉시컬 환경 : 어떤 함수가 선언(생성)될 때 그 당시의 외부 변수가 저장되는 곳! 그 정보들 : 외부 변수 등등 const x = 1; // 전역 스코프 function outerFunc() { const x = 10; // outerFunc 스코프 function innerFunc() { console.log("x : " + x); // x : 10 // (innerFunc 스코프에 x 가 없으니 이 함수가 선언될 때의 LE 인 outerFunc 로 찾으러 감) } innerFunc(); } outerFunc(); console.log("x : " + x); // x : 1 ➕ 함수를 어디서 '호출' 했는지가 아니라, 어디에 '정의' 했는지에 따라 스코프(상위 스코프) 가 결정된다! outer 내..
전에 클래스 사용법 글을 썼었지만 한 번 더 정리해 둔다. 💡 새 객체를 쉽게 추가해 주는 class! class Car { constructor(name, year, type, price) { this.modelName = name; this.modelYear = year; this.type = type; this.price = price; } makeNoise() { // 클랙션을 울리는 메서드 console.log(`${this.modelName} : 빵빵!`); } makedYear() { // 연도를 말해주는 메서드 console.log(`${this.modelName} : 나는 ${this.modelYear}년도에 만들어졌어~`); } } const car1 = new Car("현이 차", 2..
: key, value 를 저장하는 객체와 비슷, for of 사용 가능! 하지만 객체와 달리 key 로 모는 유형 할당 가능! 그리고 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다! 💡 주요 메서드와 프로퍼티 new Map() 맵을 만든다. map.set(key, value) key 를 이용해 value 를 저장한다. map.get(key) key 에 해당하는 값을 반환한다. key 가 없다면 undefined 반환 map.has(key) key 가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) key 에 해당하는 값을 삭제한다. map.clear() 맵 안의 모든 요소를 제거한다. map.size 요소의 개수를 반환한다. 💡 new Map() 생..
일급 객체로서의 함수를 활용해 보자~ 💡 변수에 함수 할당 const sayHello = function () { console.log("Hello!"); }; 💡 객체의 프로퍼티로 할당 const person = { name: "aoto", age: 20, isMarried: false, sayHello: function () { console.log(`Hello, My name is ${this.name}`); }, }; person.sayHello(); // Hellow, My name is aoto 💡 배열의 프로퍼티로 할당 const myArr = [ function (a, b) { return a + b; }, function (a, b) { return a - b; }, ]; console...
💡 함수 선언문 선언 전에 호출이 가능하다. (호이스팅) ➡️ 자유로운 위치에서 부를 수 있다. // 함수 선언문 sayHello() // "Hello" function sayHello(){ console.log("Hello"); }; var 처럼 함수 스코프를 가진다. 함수 안에 선언된 함수는 밖에서 호출할 수 없지만, function printHi() { function printHello() { console.log("Hello") } console.log("Hi"); printHello(); // "Hello" } printHi(); // "Hi" printHello(); // error ⬇️ 함수가 아닌 다른 코드블록에서 함수 선언을 하게 되면 전역적으로 호출이 가능해진다. const x = 4..
💡 Primitive Type 기본형 기본형 변수에 값을 할당할 땐 변수에 값을 바로 넣는다. Number, String, Boolean, Null, Undefined let x = 3; let y = x; console.log(x); // 3 : x 에 3이 담김 console.log(y); // 3 : y 에 3이 담김 (x 값을 복사해 담음) y = 5; console.log(x); // 3 console.log(y); // 5 : y 에 5가 담김 💡 Reference Type 참조형 참조형 변수에 값을 할당할 땐 값을 어딘가에 담아두고 그 주소값을 변수에 저장한다. Object, Array(배열도 객체다) let x = {name: "aoto"}; let y = x; console.log(x);..
💡 for in : 객체 안에 프로퍼티들을 가지고 하나씩 반복적인 동작을 수행할 때 사용 ❌ 배열에선 사용 ❌ for(변수 in 객체) { 동작부분; } let aoto = { name: "yae", age: 20, isVeryNice: true, }; for (let item in aoto) { // item : 프로퍼티 네임, aoto :실행할 객체 console.log(item); // 프로퍼티 네임을 가져옴 console.log(aoto[item]); // 프로퍼티 값을 가져옴 } // name // yae // age // 20 // isVeryNice // true ❗️ 주의) 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬한다! let m..
: 날짜를 이용하는 내장 객체 💡 괄호 비워두기 우선 변수를 생성한 순간의 날짜, 시간을 가져올 수 있다. let myDate = new Date(); console.log(myDate); //Tue Jan 02 2024 12:48:12 GMT+0900 (한국 표준시) 💡 문자열 넣어주기 특정 날짜의 객체를 만들 수 있다. 시간을 지정하고 싶다면 대문자 T 뒤 시간 입력, 시간을 지정하지 않으면 자정을 기준으로 객체가 생성된다! let myBirthday = new Date("2024-01-02"); let myBirthday2 = new Date("2024-01-02T08:08:08"); console.log(myBirthday) console.log(myBirthday2) // Mon Jan 02 2..
객체를 프로퍼티를 맘대로 다뤄 보자! let aoto = { name: "yae", hateFood: null } 💡 프로퍼티 수정 console.log(aoto.name); // "yae" aoto.name = "aotoyae" console.log(aoto.name); // "aotoyae" 💡 프로퍼티 추가 console.log(aoto.gender); // undefined aoto.gender = "female" console.log(aoto.gender); // "female" 💡 프로퍼티 삭제 console.log(aoto.hateFood); // null delet aoto.hateFood; console.log(aoto.hateFood); // undefined 💡 프로퍼티 존재 여부 확..
객체의 데이터를 가져와보자! let aoto = { name: "yae", bornYear: 2023, isVeryNice: ture, hateFood: null, favoriteMovie: { title: "괴물", leadRole: "쿠로카와 소야", "히이라기 히나타" } } 💡 점 표기법 console.log(aoto.bornYear) // 2023 ❗️주의) 점 표기법은 따옴표로 감싸진 값은 가져올 수 없다! let aoto = { name: "yae", "born Year": 2023 } console.log(aoto.born Year) // XXX 접근불가 XXX console.log(aoto."born Year") // XXX 접근불가 XXX 💡 대괄호 표기법 (위 상황 해결 가능) let..