본문 바로가기

javascript6

[JS] 11강 "Symbol" 알아보기 1. Symbol: 새로 추가된 원시 타입으로 유니크한 식별자를 만들어준다 2. 특징1) Symbol 값은 보이는게 같더라도 내부에서는 다른 값을 가진다.const sym1 = Symbol();const sym2 = Symbol();console.log(sym1);console.log(sym1 === sym2); //false 2) Symbol에 description을 줄 수 있다.const sym3 = Symbol('hi');console.log(sym3.description); // hiconsole.log(sym3); // Symbol(hi) desciprtion으로 이 Symbol 값이 어떤 값인 지 알게 해주며, 이 덕분에 디버깅할 때 사용이 가능해진다. 3) 어떠한 프로퍼티를 가지고 있는 지 .. 2025. 4. 2.
[JS] 10강 "undefined"와 "null" 알아보기 1. undefined: 아무 값도 할당받지 않은 상태 1) var 키워드로 선언한 변수는 호이스팅으로 올라간 후 undefined로 초기화됨. 그 이후 인터프레터가 해당 소스코드에 도달했을 때 할당한 값이 들어감console.log(a);var a = 5; 2) 변수를 선언한 값을 할당하지 않은 변수를 출력하면 undefined 반환됨let hello;console.log(hello); 이렇게 undefined는 개발자가 의도적으로 할당하기 위한 값이 아닌 js엔진이 변수를 초기화할 때 사용한다.그래서 개발자는 의도적으로 할당하는 것은 권장하지 않는다.  2. null: 비어있는, 존재하지 않는 값 NULL, Null과 다름의도적으로 변수에 값이 없다는 것을 명시함변수가 이전에 참조하던 값을 명시적으로.. 2025. 3. 30.
[JS] 9강 Event Loop 1. setTimeout(): 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정함: 두 번째 매개변수로 들어간 초 단위가 지난 후 첫 번째 매개변수인 콜백 함수가 호출됨 // 동기console.log('1');// 비동기setTimeout(() => { console.log('2');}, 3000);// 동기console.log('3') 2. 동기와 비동기동기 (Synchronous, 시간을 맞춤)대학생이 되는 법1. 1학년2. 2학년3. 3학년4. 대학교 가기비동기 (Asynchronous, 시간을 맞추지 않음) 취직하는 방법1. 토익 공부2. 자격증 공부3. 취업 1) 둘의 차이: 동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있지만: 비동기는 1번을 하면서 2번을 할 수 도 있고, 3.. 2025. 3. 29.
[JS] 8강 자바스크립트 "bind","call","apply" 1. Call() 메소드함수를 호출하는 함수매개변수로 어떠한 것을 전달해주면 호출되는 함수의 this안에 window 객체가 아닌 전달받은 것을 받게 됨 // Call();const fullName = function(city, country) { console.log(this.firstName + ' ' + this.lastName , city , country);}const person1 = { firstName: 'John', lastName: 'Smith'}fullName.call(person1, "Oslo","Norway"); 2. Apply() 메소드call 메서드와 비슷하지만 인수 부분을 배열로 넣어줘야 함// Apply()const fullName = function(cit.. 2025. 3. 28.
[JS] 6강 Event 란? 1. Event Listener & Event 객체ex) 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야할까? 1) Event Listener마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 -> 그 함수가 이벤트 리스너  2) addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 함 [등록 방법]JS 코드에서 프로퍼티로 등록HTML 태그에 속성으로 등록addEventListener 메소드를 사용: element.addEventListener(이벤트명, 실행할 함수명 (listener), 옵션);// 1번 프로퍼티 등록window.. 2025. 3. 26.
[JS] 4강 DOM과 Document 탐색하기 1. HTML을 이용한 화면에 UI 표현하기: 브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있습니다.: 이 HTML은 요소(Element)들로 구성되어 있습니다.2. 돔 이란 (Document Object Model): 돔 (문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML페이지를 인식하게 해줌: 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저 트리구조로 만든 객체 모델을 의미3. 돔 조작: 위에 보이는 DOM트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있음: 이 API를 이용해서 DOM구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있음 이렇게 DOM을 조작해.. 2025. 3. 24.