양씨

js에서 this는 자바와 같은 일반 프로그래밍 언어와 다르게 특이하게 작동한다.js에서 this는 현재 실행 중인 코드에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 다만, 함수 호출 방식에 따라 동적으로 결정된다. 함수를 선언할 때 this가 결정되는 것이 아닌 함수를 호출할 때 this가 결정된다는 의미 함수를 어디서 호출하느냐에 따라 그 의미가 달라지기 때문에 좀 세분화 해보았다(굉장히 오묘하게 작동하긴한다..js 개발자가 오류라고 인정했다는,.) this 바인딩전역 컨텍스트: 전역 범위에서 this는 전역 객체를 참조(브라우저에서는 window 객체)일반 함수 호출: 일반 함수 호출 시, this는 전역 객체를 참조(엄격 모드에서는 undefined)생성자 호..

템플릿 리터럴은 ES6에서 도입된 기능으로 문자열을 더 쉽게 다룰 수 있게 해주는 문법이다.  템플릿 리터럴 도입 전문자열 여러줄const multiLine = "이것은 여러 줄에 걸쳐\n" + "작성된 문자열입니다.";console.log(multiLine); 문자열에 변수 포함const name = 'yang';const greeting = 'hello, ' + name + '!';console.log(greeting); //hello, yang!   템플릿 리터럴(Template Literals)템플릿 리터럴은 백틱(``)을 사용하여, 이전과 달리 아래와 같이 가독성 좋고, 간결하게 사용할 수 있게 되었다. 문자열 여러줄const multiLine = `이것..

먼저, 클로저에 대해 살펴보기 전에 스코프에 대한 개념을 간단히 정리해보자 스코프(scope)스코프는 변수가 접근할 수 있는 범위를 뜻한다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있다. 전역 스코프전역 스코프에 선언된 변수는 코드 어디서든 접근 가능하다. 전역 스코프에 변수를 선언하려면 함수나 블록 외부에서 선언하면 된다.var globalVar = 'I am global'; // 전역 변수function globalExample() { console.log(globalVar); // 'I am global'}globalExample();console.log(globalVar); // 'I am global' 지역 스코프js에서 지역 스코프는 블록 스코프와 함수 스코프로 나뉘어진다.보통의 경우..

어디서 잘못된 글을 몇번봐서인가..let, const는 호이스팅 되지 않는다고 알고 있던 사람이었다부끄럽긴 하지만 이참에 다시 자세히 알아보았다 먼저 js에서 변수는 선언, 초기화, 할당 3가지 단계를 거친다선언: 변수의 이름을 등록(var, let, const로 변수를 선언)초기화: 메모리 공간을 확보하고 초기값을 설정할당: 변수에 실제 값을 할당var x; // 선언console.log(x); // undefinedx = 5; // 할당 console.log(x); // 5let y; // 선언y = 10; // 할당console.log(y); // 10const z = 15; console.log(z); // 15 여기서 특징은 var는 선언과 초기화가 동시에 이루어지고, const는 선언과 동시에..

리액트 프로젝트에서 항상export default function Hi(){}와 같이 컴포넌트를 내보냈는데  export default const Hi = () => {}와 같이 컴포넌트 코드 스타일을 화살표 함수로 바꾸는 과정에서 오류가 났다똑같은 원리인데 안되는 것이 이해가 안되어서 import, export 문을 좀 보았다 js에서는 함수나 변수 등을 선언하고 export를 하여 모듈을 내보내고 import 하여 내보낸 모듈을 사용할 수 있다export를 사용할 때 export와 export default를 사용할 수 있는데 차이점은 아래와 같다   exportnamed export라고 하며 하나의 모듈에서 한개 이상의 값들을 내보낼 수 있다{}를 사용하여 구체적인 이름을 명시하여 import 해아..

이전까지 AJAX의 의미를 잘못 이해했던 것 같다..리액트를 이용하여 axios를 쓰는것이 습관 아닌 습관이 되다 보니어느 순간 그냥 비동기 통신? 이런식으로 어림잡아 짐작했던 것 같다 AJAX란 Asynchronous JavaScript And XML의 약자로 js를 이용하여 웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있게 하는 기술이다. 즉, 새로고침 없이 클라이언트와 서버 간에 데이터를 주고받는 비동기 http 통신 방법이다. AJAX 실행순서요청 생성: JavaScript를 사용하여 XMLHttpRequest 객체를 생성서버 요청: 이 객체를 사용하여 서버에 데이터를 요청서버 응답: 서버는 요청을 처리하고 응답을 반환응답 처리: JavaScript가 서버의 응답..

아래 예시와 같이 자바스크립트에서 중첩으로 반복문을 돌릴 때 한번에 빠져 나올수 있는 방법은 무엇일까 for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { // 여기 } } label(레이블) 반복문 앞에 붙혀서 사용할 수 있으며 중첩 반복문을 빠져 나갈 수 있다 반드시 break와 continue 앞에 있어야 하며 break는 모든 레이블 구문에서 사용 가능 continue는 반복문 안에서만 사용 가능하다 label 이름: 구문 label을 이용해 중첩반복문 빠져 나오기 continue loop1: for (let i = 0; i < 3; i++) { loop2: for (let j = 0; j < 3; j++) { if (i === 1 && j =..

?? 라는 연산자가 있었다! (마주친적이 거의 없어서 몰랐던..) ??는 병합연산자, nulllish 라고 불리우고 여러 피연산자 중에서 확정되어 있는 변수를 찾을 수 있다 a ?? b 다음과 같이 있을 때 a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b이다 (a !== null && a !== undefined) ? a : b; 삼항연산자로 표현하자면 위 코드와 같은 뜻이다 ?? 과 || 의 차이 스쳐가듯 보면 or 연산자와 굉장히 유사해보인다. 그러나 이 둘은 다른 연산자다 ||는 첫번째 truthy 값을 반환 ??는 첫번째 정의된 값을 반환 let a = 0; console.log(a || 100); // a는 falsy로 판단되어 100 console.log(a ?? 1..

먼저, const란 자바스크립트에서 흔히 '상수'라고한다 재할당이 안되기때문에 변화하지 않는 변수를 사용할 때 쓰이기 때문이다 const name = 'yang'; // yang // name = 20; // error console.log(name) 그런데 실제로 입문단계에서 const를 사용하다보면 어?? const는 재할당이 안되는걸로 아는데 왜 이러는거지라고 생각되는 경우가 있다 아래와 같이 말이다 const obj = { name: 'yang' }; obj.name = 'new yang'; // new yang const arr = [1, 2, 3]; arr.push(4); // [1,2,3,4] 아니 const는 변화하지 않는 변수를 저장하려 사용하는데 분명히 변경이 된다 이는, 자바스크립트에..

거의 모든 프로그래밍 언어에서 + 는 2개의 피연산자가 있을 때, 그 둘의 합한 결과를 반환한다 js에서는 + 를 단항연산자로도 사용할 수 있는데 이는 Number()과 같은 역할을 한다 let a = -2; console.log( +a ); // -2 console.log( +true ); // 1 console.log( +"" ); // 0 아래와 같이 응용 가능하다 let apples = "2"; let oranges = "3"; console.log( +apples + +oranges ); // 5 단항 연산자일 경우 말고 2개 이상의 피연산자가 있을 경우에는 문자열로 변환된다 console.log( '1' + 2 ); // "12" console.log( 2 + '1' ); // "21"