전체 글 195

[JS] 옵셔닝 체이닝(?.)은 언제 사용하면 좋을까? (feat. 점표기법)

옵셔닝 체이닝(?.)객체의 속성이나 메서드가 존재하는지 확인 후 접근할 때 사용 만약 속성이 null 또는 undefind라면, 에러를 발생시키지 않고 undefined를 반환=> 안전하게 객체의 속성 접근 const user = { name: 'Alice', address: { city: 'New York', },};// 옵셔널 체이닝 없이:console.log(user.address.city); // 'New York'console.log(user.address.street); // undefined (정상 작동)console.log(user.phone.number); // TypeError: Cannot read property 'number' of undefined// 옵셔널 체이닝 사..

[JS] filter메서드, find메서드 2가지 차이

filter메서드함수의 바환 값을 true로 만드는 요소를 찾는다. find메서드배열에서 조건을 만족하느 첫번째 요소를 반환한다. filter 메서드와 find 메서드의 근본적인 2가지 차이filtera메서드는 조건에 일치하는 모든 요소를 반환하지만 find메서드는 첫 번째와 두번째만 반환한다.filter메서드는 새 배열을 반환하고 find메서드는 배열이 아닌 요소만 반환한다.

[JS] map(), filter(), reduce() 차이 그리고 every()와 some()까지

map()filter()reduce()목적배열 내의 모든 요소 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환배열에서 조건을 만족하는 요소만 추려서 새로운 배열을 반환배열의 요소를 누적하여 단일값 만듦사용 예시배열의 각 요소를 평가한다.(평가한다: 특정 조건이나 연산을 적용해 판단하거나 처리하는 과정을 의미)배열의 각 요소를 평가하고, 조건에 맞는 요소들만 남김배열의 각 요소를 누적하거나 합산하여 하나의 값을 계산할 때 사용반환 값변환 된 요소로 구성된 새로운 배열조건을 만족하는 요소로 구성된 새로운 배열누적된 단일 값코드const numbers = [1, 2, 3, 4];const dubled = numbers.map(num=> num*2);console.log(doubled); // [2..

[네트워크] 제 1장 Network Programming - Socket의 이해

제 1장 Network Programming - Socket의 이해1.    Network programming이란?network이란? Computer network각 host(end-system)을 연결하여 통신을 가능케하는 연결망host(end-system): pc, mobile기기, laptoppc(x)/ws(o)통신 sw 탑재 여부Internet(internetwork)network들이 연결됨연결장치(router, geteway, bridge, repeater)들이 필요함Ip(internet protocol) 이용 연결- ip addressClient/serverClient: 서버에 정보나 서비스를 요청하고 응답을 기다리는 hostServer: client의 요청을 폐기, 요청에 오면 서비스를 제..

[프로그래머스] 한 번만 등장한 문자 | JS

문제문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다.해결 과정문자를 사전순으로 정렬했다고 하니까 오름차순으로 정렬을 해야겠다고 생각했다.function solution(s) { var answer = ''; let sSort = s.split('').sort(); let emptyString = []; for(let i = 0; i  문제를 보고 이중for문을 이용하여 중복된 문자를 제외하고 중복되지 않은 문자를 추가하는 방향으로 생각을 했다.let sSort = s.split('').sort(); 는 문자열을 ..

for..of vs for..each + 콜백함수 까지 🫡

for ... of 배열의 요소를 직접 반복for (const element of array)const array = [1, 2, 3];for (const element of array) { console.log(element); // 1, 2, 3}배열 분만 아니라 map, set, string, nodelist 같은 이터러블 객체도 반복 가능객체에서 사용 블가for ...each배열의 각 요소에 대한 제공된 함수를 호출array.forEach(function(element, index, array) {...})const array = [1, 2, 3];array.forEach(function(element) { console.log(element); // 1, 2, 3 // 1, 2, 3}); ..

[JS] 스타일과 클래스

요소에 스타일을 적용할수 있는 방법 CSS에 클래스를 만들고, 요소에 처럼 클래스 추가하기 처럼 프로퍼티를 style에 바로써주기 elem.className클래스 속성값 전체를 바꾸고 싶을때elem.classList개별 클래스를 조작하고 싶을 때 elem.classList에는 add/remove/toggle가 구현되어 있다.elem.classList.add/remove("class") - class를 추가하거나 제거elem.classList.toggle("class") - class가 존재할 경우 class를 제거하고, 그렇지 않은 경우에는 추가elem.classList.contains("class") - class 존재 여부에 따라 true/false를 반환

[JS] 구조 분해 할당

객체 키를 가진 데이터 여러개를 하나의 엔티티에 저장할 때 사용배열 컬렉션에 데이터를 순서대로 저장할 때 사용 구조 분해 할당 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법 분해는 파괴를 의미하지 x배열 분해하기let arr = ["Bora", "Lee"]let [firstName, surname] = arr;alert(firstNAme); // Boraalert(surname); // Lee 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용 가능split같은 반환 값이 배열인 메서드를 함께 사용해도 좋음let [firstName, surname] ="Bora Lee".split(' '); 쉼표를 사용해 요소 무시 가능let [firstName, ,title] = ["Juli..

[프로그래머스] 가장 큰 수 찾기 | JS

문제정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요.해결 과정function solution(array) { var answer = []; let max = Math.max(...array); answer.push(max); let findIndexNum = array.indexOf(max); answer.push(findIndexNum); return answer;} Math.max()함수를 이용해 가장 큰 수를 찾은 다음 answer에 값을 넣었다.그 뒤 indexOf()를 이용해 인덱스 위치를 찾은 다음 answer에 값을 넣었다.리펙토링function solution(array) { ..

728x90