Topic/JavaScript
-
[ JS ] switch문에서 break를 if-else에서는 어떻게 사용할까 (feat. 조건부 로직)Topic/JavaScript 2023. 8. 12. 22:22
JavaScript에서 switch 문과 if-else 문은 조건부 로직을 처리하는 데 사용된다. switch 문에서 break 키워드는 현재 case를 종료하고 switch 블록을 빠져나오는 역할을 하는 반면에 if-else 문에서는 break 키워드를 사용하지 않는다. 대신 return 문을 사용하여 조건문을 종료하고 해당 함수 또는 블록을 빠져나온다. 다음은 switch 문과 if-else 문에서의 break와 return의 예시다. // switch 문에서의 break switch (value) { case 'case1': console.log('Case 1'); break; case 'case2': console.log('Case 2'); break; default: console.log('De..
-
객체 지향 프로그래밍(Object-Oriented Programming, OOP)Topic/JavaScript 2022. 6. 8. 21:25
객체 지향 프로그래밍 (Object-Oriented Programming: OOP) 객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 속성(properties)과 메소드(method)를 하나의 "객체"(class)에 묶어서 청사진을 만들고, 그 청사진을 바탕으로 인스턴스 객체(instance object)를 만드는 것을 말합니다. OOP에서 말하는 객체는 자바스크립트에 내장 객체(object)와 다르며, 클래스(class)라고 부른다. OOP는 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론 OOP는 사람이 세계를 보고 이해하는 방법과 매우 흡사하다. 클래스(class)와 오브젝트 인스턴스를 실생활과 연관지어 예를 ..
-
callback, promise, async/await의 특징과 차이점 간단 정리Topic/JavaScript 2022. 5. 21. 09:10
callback 함수의 매개 변수인 함수 비동기 처리 시 동기처리할 때 콜백패턴을 사용한다. 자유도가 높은 장점이 있으나 콜백지옥이 우려되니 조심! promise JavaScript가 동기 처리이기 때문에 비동기 처리를 위해 promise를 사용합니다. 에러핸들링할 때는 catch 로 에러 처리가 가능하다. promise 지옥이 발생할 수 있으니 적당히 써야함 async / await promise보다 비동기적인 상황 표현이 쉽다. 에러핸들링 기능이 없어서 try catch문을 활용해야한다. 비동기코드를 동기코드처럼 읽게 해주어서 가독성이 좋다.
-
클로져란? / 호이스팅과 TDZTopic/JavaScript 2022. 5. 20. 09:35
클로져란? 클로져란 함수 내부에 선언되는 함수를 뜻한다. 클로져는 은닉화, 캡슐화의 2가지 특징을 가진다. 외부함수가 소멸한 후에도 변수를 기억하며 일반함수는 실행 후 전역변수 초기화가 되지만, 클로져는 선언 시 환경을 기억한다. 메모리에 객체들이 남아있어 클로져를 남발하게 되면 오버플로우 발생가능성을 높인다. 호이스팅과 Temporal Dead Zone 호이스팅은 변수나 함수의 선언이 끌어올려지는 것을 뜻한다. var (선언 & 초기화) -> 할당 / let 선언 -> 초기화 -> 할당 / const (선언 & 초기화 & 할당) let, const는 초기화되기 전까지 TDZ에서 대기(선언단계와 초기화단계 사이에 TDZ!) let, const도 호이스팅된다! 호이스팅 Yes (되지만) 참조오류 Yes -..
-
Ajax 정리Topic/JavaScript 2022. 3. 26. 17:26
Ajax란? Asynchronous Javascript and XML의 약자로 간단히 정리하면 XMLHttpRequest를 이용해서 새로고침없이 페이지의 일부를 로드하는 방법이다. 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 비동기 방식 웹페이지를 새로고침하지 않고 데이터를 불러옵니다. Ajax를 통해 서버에 요청을 해도, 프로그램은 멈추지 않고 계속 돌아간다. 비동기 방식을 이용하면 시간 단축의 효과와 더불어 화면을 리로드하는 경우 필요한 부분만 가져오는 장점이 있다. Ajax를 쓰는 이유 단순하게 웹에서 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다. 일반적으로 HTTP 프로토콜은 단방향 통신이기 때문에, 클라이언트에서..
-
진법 변환(feat. 프로그래머스)Topic/JavaScript 2022. 3. 7. 22:25
알고리즘 문제에서 간간히 나오는 진법 변환 😇 자바스크립트에서 지원하는 내용으로 진법 변환에 활용해보자 ! 진법 변환 10진법에서 n진법으로 변환하기 let number = 10; // 10진법 -> 2, 8, 16 진법으로 변환 value.toString(2); // 1010 value.toString(8); // 12 value.toString(16); // a n진법에서 10진법으로 변환하기 let A = 1010, B = 12, C = 'a'; // 2, 8, 16 진법 -> 10진법으로 변환 Number.parseInt(A , 2); // 10 Number.parseInt(B , 8); // 10 Number.parseInt(C , 16); // 10 알고리즘 문제에서 활용하기 - 3진법에서 뒤..
-
padEnd (문자열 채우기)Topic/JavaScript 2022. 3. 1. 15:31
padEnd() 현재 문자열에 다른 문자열을 채워서, 주어진 길이를 만족하는 새로운 문자열을 반환하는 함수 padEnd()는 끝에서부터 채우고, padStart()는 왼쪽부터 채운다 ! 예시 let a = 'Sky'; console.log( a.padEnd(5, '*') ); // "Sky**" let a = '99'; console.log( a.padEnd(4, '0') ); // "9900" 문제 풀이에 사용했던 padEnd() 예시 function solution(new_id) { let answer = new_id .toLowerCase() //1단계 .replace(/[^\w\d-_.]/g, '') //2단계 .replace(/\.{2,}/g, '.') //3단계 .replace(/^\.|\.$..