본문 바로가기

FE/JavaScript
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/JavaScript [JS] 객체 Object 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. (데이터끼리의 공통적인 속성을 가지는 경우) bracket notation 키 값이 동적으로 변할 때, 키 값이 변수일 때 사용 (dot notation은 정해진 키 이름이 있을 때만 사용할 수 있기 때문에 한계가 있다.) 따옴표를 걷어낸 content가 키 값이 아닌 변수로 취급되고 있는 것. 따라서 참조 오류가 남. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점이..
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/JavaScript [JS] 함수 개발이란 당면한 어떤 문제를 해결하기 위해서 새로운 것을 만드는 것을 의미한다. 따라서 개발이란, 해결해야 할 문제도 찾고, 어떻게 해결할지에 대해서 고민하는 과정을 포함한다. 함수는 이러한 문제 해결을 위한 과정을 체계적으로 잘 구성한 하나의 작은 기능이다. 만약 아래와 같은 형태의 계산기를 만들어야 한다면 몇 가지의 기능이 필요할까? 연산 기능(+, -, *, /) 숫자를 입력하는 기능 결과를 화면에 표시하는 기능 브라우저에 계산기를 어떻게 보여줄지 결정하는 기능 크게 분류해도 이 정도의 기능이 필요하다. 이와 같은 기능 하나 하나가 모두 함수로 이루어져 있다고 할 수 있다. 즉, 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위이다. function sum(num1,..
FE/JavaScript [JS] 반복문 for문 **반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다.** 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현하면 다음과 같다. let result = 0; for (let num = 1; num
FE/JavaScript [JS] 조건문 조건문 특정한 조건에 따라 코드가 실행되도록 하는 방법 if문 if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정된다. 동치연산자 (===) 동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환한다. let name = 'parkhacker'; if (name !== 'kimcoding') { console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.' } 비교연산자(> , = , 5) { num = num - 1; } console.log(num); // 5 논리연산자(&&, ||) 논리합(||)과 논리곱(&&)을 사..
FE/JavaScript [JS] JavaScript 개요 (값의 타입, 변수) JavaScript 코드 실행하기 JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어다. 그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동한다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 한다. 좀 더 쉽게 StackBlitz에서 JavaScript 코드를 실행해볼 수도 있다. (JavaScript 코드는 브라우저, Node.js REPL 등 다양한 환경에서 실행할 수 있다.) StackBlitz로 코드를 실행하는 방법은 두 가지이다. index.js 파일에 원하는 JavaScript 코드를 작성하고, Terminal에 node index.js를 입력하고 엔터를 누르면 작성한 코드가 실행되고 출력 결과를 확인할 수..
⬆︎
728x90

티스토리툴바