본문 바로가기

전체 글11

자바스크립트 공부5 - this와 화살표 함수의 관계 this와 화살표 함수의 관계화살표 함수의 this는 자신만의 this를 갖지 않고, 외부(상위) 스코프의 this를 그대로 사용합니다.기본 함수와 thisconst obj = { name: 'Jane', sayHello: function () { console.log(this.name); // "Jane" }};obj.sayHello();화살표 함수와 thisconst obj = { name: 'Jane', sayHello: () => { console.log(this.name); // ❌ undefined (또는 window.name) }};obj.sayHello();function Person(name) { this.name = name; // 일반 함수 사용 시 문제 발생.. 2025. 6. 2.
자바스크립트 공부4 - 비동기 처리 Promise미래의 작업을 예약하고 결과(성공 여부)에 따라 콜백을 실행할 수 있는 자바스크립트 기능입니다.then, catch, finally 메서드를 사용하여 처리 흐름을 관리합니다.Promise의 가장 유용한 기능 중 하나는 일부 데이터(외부 서비스/API)를 불러와 해결할 수 있다는 것입니다.기존 콜백 패턴const temperatures = [10, 5, 3];sumTemperatures(temperatures, value => { console.log(value); // 18 (the sum of temperatures)});Promise로 리팩토링const temperatures = [10, 5, 3];sumTemperatures(temperatures).then(value => { .. 2025. 5. 29.
자바스크립트 공부3 - 배열과 객체 다루기 reduce배열을 단일 값으로 줄이는 메서드 합계const grades = [1, 2, 3];const sum = grades.reduce((total, current) => { return total + current;}, 0);total, current 2개의 매개변수를 사용합니다.total은 reduce가 항상 마지막으로 계산한 값을 참조합니다.current는 지금 처리할 항목입니다. 0을 넣는 이유첫 번째 루프에서 total 변수에 할당될 값을 정의하는 것입니다.빈 배열을 대상으로 할 경우 초기값이 없으면 TypeError가 발생됩니다.초기값 없이 첫 번째 요소부터 시작하면, 첫 번째 요소가 누락되거나 불필요한 조건 검사를 추가해야 할 수도 있습니다. 곱셈const numbers = [1,.. 2025. 5. 27.
자바스크립트 공부2 - 함수 함수 선언문과 표현식함수 선언문주로 코드의 독립된 부분에서 함수 정의가 필요할 때 사용됩니다.호이스팅되어 선언문 위치와 상관없이 코드 내의 다른 위치에서 호출할 수 있습니다.function greet(name) { return `Hello, ${name}!`;}console.log(greet('Jane')); // "Hello, Jane!"console.log(add(1, 2)); // 3function add(a, b) { return a + b;} 함수 표현식변수를 통해 함수 값을 할당하는 방식입니다. 익명 함수나 익명 함수를 변수에 할당한 형태로 주로 사용됩니다.호이스팅의 영향을 받지 않습니다.const greet = function(name) { return `Hello, ${name}!`;.. 2025. 5. 16.
자바스크립트 공부1 - ES6 문법 정리 const, letJavascript 변수 선언 방식에는 let과 const가 있습니다.let으로 정의된 변수는 나중에 다시 다른 값을 할당할 수 있습니다.let name = "Jane";console.log(name); // Janename = "Lily";console.log(name); // Lily const로 정의된 변수는 한번 할당한 값을 변경할 수 없습니다.나중에 다시 할당할 필요가 없는 변수에 사용합니다.const language = "Javascript";console.log(language); // Javascriptlanguage = "Python" // ❌ Type error: this will break your script화살표 함수 ()=>{}Javascript에서 함수를 작성.. 2025. 5. 15.