본문 바로가기

FE
FE/JavaScript [JS] 구조분해할당 ES6에서 새롭게 적용된 문법 중 하나이다. 구조 분해 할당은 spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다. 분해 후 새 변수에 할당 배열 const [a, b, ...rest] = [10, 20, 30, 40, 50]; 객체 const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다. 선언 없이 할당하는 경우, 공식 문서(구조 분해 할당)를 통해 내용을 확인하자. 유용한 예제: 함수에서 객체 분해 function whois({displayName: displayName, fullName: {fir..
FE/JavaScript [JS] Scope 문제 풀이 - 다양한 패턴
FE/JavaScript [JS] 클로저 활용 (함수, 커링, 모듈) 📝 Summary 클로저는 주로 데이터를 보존하는 함수, 커링, 모듈 패턴으로 활용한다. 클로저를 이용하면 특정 함수가 데이터를 보존할 수 있다. 커링을 이용하면 함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장할 수 있다. 모듈 패턴을 이용하면 특정 데이터를 다른 코드의 실행으로부터 보호할 수 있다. 클로저의 특징을 활용한 사례에는 대표적으로 함수, 커링, 모듈 패턴이 있다. 1. 데이터를 보존하는 함수 클로저를 활용하면 클로저의 함수 내에 데이터를 보존해두고 사용할 수 있다. 일반적으로 함수 내부에 선언한 변수에는 접근할 수 없다. 매개변수도 마찬가지이다. function getFoodRecipe (foodName) { let ingredient1, ingredient2; return `..
FE/JavaScript [JS] 클로저 📝 Summary 클로저는 함수와 그 함수 주변의 상태의 주소 조합이다. 클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해진다. JavaScript에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있는데, 그 중 클로저라는 개념에 대해서 알아보자. MDN의 클로저 정의는 다음과 같다. "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 특이하게도 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경, 즉 어휘적 환경을 기준으로 변수를 조회하려고 한다. 이와 같은 이유로 "외부 함수의 변수에 접근할 수 있는 내부 함수"를 ..
FE/JavaScript [JS] 변수 선언 시 주의할 점 (let, const 쓰기) ... Var bye!!!! 변수 선언 시 주의할 점 먼저 브라우저에만 존재하는 window 객체에 대해 알아보자. 지금 개발자 도구를 열어 콘솔에 window 라고 입력하면 객체 하나를 조회할 수 있다. 이 객체는 사실 브라우저의 창(window)을 의미하는 객체이지만, 이와 별개로 전역 영역을 담고 있기도 하다. 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면, window 객체에서도 동일한 값을 찾을 수가 있다. 전역 변수는 가장 바깥 스코프에 정의한 변수이다. 따라서, 어디서든 접근이 가능하기에 얼핏 "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네?" 라는 생각이 들 수도 있다. 전역 변수를 많이 만드는 것은 편리할 수는 있겠으나 그다지 좋은 선택이 아니다. 보통 애플리케이션을 만들 때에는, 내..
FE/JavaScript [JS] 스코프(Scope) 스코프(Scope)는 총 옆에 붙어 있는 작은 망원경 같은 형태의 물체를 일컫는다. 스코프는 사격 시 목표물을 정확하게 조준하기 위해 사용하며 영어 단어의 뜻 자체도 ‘범위'를 의미한다. JavaScript에서 이야기하는 스코프 역시 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해 볼 수 있겠다. 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용된다. 즉, 각각의 변수에 접근할 수 있는 범위가 존재한다. 중괄호(블록) 안쪽에 변수가 선언되었는지, 바깥쪽에 변수가 선언되었는지가 중요한데 이 범위를 스코프라고 부른다. 여기서 우리가 알 수 있는 규칙은 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능한 반면에 안쪽에서 선언한 변수는 바깥쪽 스코프..
FE/JavaScript [JS] 얕은 복사와 깊은 복사 summary 배열의 경우 slice() 메서드 또는 spread syntax 등의 방법으로 복사할 수 있다. 객체의 경우 Object.assign() 또는 spread syntax 등의 방법으로 복사할 수 있다. 위 방법으로 참조 자료형을 복사할 경우, 중첩된 구조 중 한 단계까지만 복사된다. (얕은 복사) JavaScript 내부적으로는 중첩된 구조 전체를 복사하는 깊은 복사를 구현할 수 없다. 단, 다른 문법을 응용하여 같은 결과물을 만들 수 있다. 대표적인 JSON.stringify()와 JSON.parse()를 사용하는 방법이 있지만, 예외의 케이스가 존재한다. (참조 자료형 내부에 함수가 있는 경우) 완전한 깊은 복사를 반드시 해야 하는 경우, node.js 환경에서 외부 라이브러리인 loda..
FE/JavaScript [JS] 원시 자료형과 참조 자료형 summary 원시 자료형이 할당된 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다. 따라서 원본과 복사본 중 하나를 변경해도 다른 하나에 영향을 미치지 않는다. 참조 자료형이 할당된 변수를 다른 변수에 할당하면 주소가 복사되어 원본과 복사본이 같은 주소를 참조한다. 참조 자료형의 주소값을 복사한 변수에 요소를 추가하면 같은 주소를 참조하고 있는 원본에도 영향을 미친다. 참조 자료형이 저장된 변수를 다른 변수에 할당할 경우, 두 변수는 같은 주소를 참조하고 있을 뿐 값 자체가 복사 되었다고 볼 수 없다. Type의 의미 JavaScript에서 자료형(type)이란 값(value)의 종류로 각각의 자료형은 고유한 속성과 메서드를 가지고 있다. Type의 종류 자료형은 크게 데이터를 저장하는 방식에 ..
FE/JavaScript [JS] 원본 배열을 변경하는 / 변경하지 않는 배열 메서드 splice는 배열을 특정 인덱스부터 일정 구간만큼을 제거하고, 원하면 요소를 그 자리에 더 추가할 수 있다. 기존 배열을 변경하는 메서드이기 때문에 조심해서 사용해야 한다. splice처럼 원본 배열을 변경하는 메서드를 mutator method 혹은 mutable method라고 부른다. 다음 링크에서는 배열 메서드가 원본 배열을 변경하는지, 하지 않는지에 대한 정보를 확인할 수 있다. https://doesitmutate.xyz/ Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The arra..
FE/JavaScript [코플릿/JS] 반복문 _ 소수찾기 & 소수 이어 붙이기 🤍 // 소수: 소쑤(발음) -> 1과 자기 자신으로 밖에 나눠지지 않는 자연수 (=약수가 1과 자기 자신 밖에 없음) // 1) 소수는 1보다 커야 한다. // 2) 짝수는 소수가 아니다. (단, 2는 소수다.) // 3) 어떤 수를 3부터 자기 자신 전까지의 수로 나눠서 나누어 떨어지면 소수가 아니다. function isPrime(num) { // 1이면 소수가 아니다. if (num === 1) { return false; } // 짝수는 소수가 아니지만, 2는 소수다. if (num === 2) { return true; } // 짝수는 소수가 아니다. if (num % 2 === 0) { return false; } // 1부터 자기 자신(num) 전까지 for문으로 반복하면서 나누어 떨어지는 경..
FE/JavaScript [JS] 객체 - 개념 정리 //! 1. 객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터 // 0개 이상의 프로퍼티의 조합으로 되어 있다. // 프로퍼티는 키와 값의 조합으로 이루어져 있다. let person = { name: "James", } //? key: ( name ) value: ( "James" ) // 프로퍼티(속성) => 키 + 값 //! 2. 배열과 객체 비교: 배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면, //! 객체는 데이터에 이름(key)을 부여할 수 있다. let personObj = { name:"James", position: "ESE", age:"??", phone: "010-2345-4567" } let personArr = ["James", ..
FE/코딩테스트 [코플릿/JS] 객체 문제 - 하 truthy 값 여기서 String은 둘다 빼도 된다. 이미 arr은 string 타입을 요소로 갖는 배열이며, 엄격한 동치연산자를 썼기 때문에 객체의 key 역시 string 타입을 가져야 한다.
FE/JavaScript [JS] 객체 Object 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. (데이터끼리의 공통적인 속성을 가지는 경우) bracket notation 키 값이 동적으로 변할 때, 키 값이 변수일 때 사용 (dot notation은 정해진 키 이름이 있을 때만 사용할 수 있기 때문에 한계가 있다.) 따옴표를 걷어낸 content가 키 값이 아닌 변수로 취급되고 있는 것. 따라서 참조 오류가 남. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점이..
FE/코딩테스트 [코플릿/JS] 배열 문제 - 상 function getAllElementsButNth(arr, n) { let result = []; for (let i = 0; i < arr.length; i++) { if (i !== n) { result.push(arr[i]); } } return result; } 23번 문제 (세 가지 방법) function getAllElementsButNth(arr, n) { // slice를 이용하는 방법 // let head = arr.slice(0, n) // let tail = arr.slice(n + 1, arr.length) // return head.concat(tail) // 반복문을 이용하는 방법 // let result = []; // for (let i = 0; i < arr.length..
FE/코딩테스트 [코플릿/JS] 배열 문제 - 하 function computeSumOfAllElements(arr) { let sum = 0 for (i=0 ; i for 문 바깥으로 내보내서 return sum 을 해줘야 함. 같은 문제에서 str.length === 0 의 경우를 고려 안 한다면 다음과 같은 결과가 뜸. 즉 배열에 빈 스트링이 드러가게 됨. (조건은 빈 문자열을 입력받은 경우, 빈 배열을 리턴해야 함) 불변성(im..
FE/JavaScript (JS) 배열의 반복 & 배열 메서드 1. 배열의 반복 let sum = 0 을 하지 않는다면 sum = undefined + 10 = NaN 이 나옴 2. 배열 메서드 1) typeof 대신 Array.isArray(); typeof 뒤에 배열을 넣으면 object 값이 나온다. Array.isArray([]) true 빈 배열을 넣어도 당연히 true가 나온다. 2) console.table(array); console.table(arr);을 넣으면 배열을 시각화가 된 표로 볼 수 있다. 3) 배열.push(뒤에 넣을 값); 배열.pop(); // 제일 뒤의 index 삭제 앞에다 추가하고 삭제하기 4) 배열.unshift(앞에 넣을 값); / 배열.shift(); // 제일 앞의 index 삭제 5) 배열.indexOf(찾을 값); 배..
FE/JavaScript (JS) 배열의 기초 배열과 객체는 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입으로 여러 번의 선언과 할당을 해야만 했던 작업을 단 한 번의 선언으로 해결할 수 있다. myNumber[5]; //5번째 인덱스의 값은 없다 undefined -> 없는 인덱스면 undefined 라고 찍힌다. 문제 myNumber의 1번째 인덱스의 값은? [73,8] myNumber의 1번째 인덱스값의 0번째 인덱스의 값은? 73
FE/Git Git 환경 설정 Git을 이용할 때 필요한 환경 설정은 사용자 정보와 에디터 설정이다. 사용자 정보 Git을 설치하면 가장 먼저, 사용자 이름과 이메일 주소를 설정한다. 설정에 기록된 사용자 이름과 메일 주소를 앞으로 진행할 Git 커밋 내역에 기록한다. 터미널 화면에 다음과 같이 입력하자. (나의 사용자 이름과 내 이메일 주소를 대신해 Github에 등록된 사용자 이름과 이메일 주소를 사용) $ git config --global user.name "나의 사용자 이름" $ git config --global user.email "내 이메일 주소" --global 옵션으로 설정하면, 사용자 홈에 저장되므로 git을 설정할 때 처음에 단 한 번만 입력해도 된다. 나중에 github의 사용자 이름이나 이메일을 변경한다면, ..
FE/Git Git 버전 관리 시스템 중 가장 많이 쓰이는 강력한 도구, Git은 협업의 기본이 되는 툴이다. 오픈 소스(Open Source : 소스 코드가 공개된 소프트웨어) 생태계에 기여할 수 있는 개발자가 되기 위한 첫 번째 단계라고 할 수 있다. 작업하던 파일을 편집 전 상태로 되돌리고 싶을 때 가장 간단한 방법은 편집하기 전에 파일을 미리 복사해 두는 것이다. 하지만 파일을 편집할 때마다 매번 손수 복사하는 일은 번거롭기도 하고 실수할 가능성도 많다. VSC와 같은 텍스트 에디터에서는 Ctrl + z(실행 취소, Undo)를 여러 번 눌러 이전 상태로 돌아갈 수 있다. 그러나 만약 코드를 수정한 뒤 에디터를 종료했다면, 다시 실행한 텍스트 에디터에서 이전 코드로 돌아갈 수 없다. 이런 경우를 위해서라도 이전에 작..
FE/코딩테스트 8. 코플릿_자바스크립트) 반복문 _ 가장 큰 수 리턴하기 🤍 // 컴퓨터 가장 큰거, 가장 긴거, 가장 작은거 // 기준을 하나 만들어 놓고, 차례대로 기준과 비교 ( 0으로 놓는 방법도 있다) // 기준보다 크면 기준을 교체 // 기준보다 크지 않으면 기준 그대로 // 마지막에 기준을 리턴 내가 썼던 답 (Reference와 비교를 위해 가져왔다.) 강의 / Reference function getMaxNumberFromString(str) { // let a = '0'; // for (i=0 ; i= Number(str[i+1])) { // a = str[i] // } else { a = str[i+1] } // } // return a; // } function getMaxNumberFromString(str) { if(str.length ===0){ ret..
⬆︎
728x90

티스토리툴바