728x90
SMALL

JavaScript 11

[JS] 11. 배열 메서드 : 요소 조작부터 변형까지

자바스크립트에서 데이터를 다루는 가장 강력한 도구인 배열 메서드를 정리해 보자. 단순 반복문보다 훨씬 간결하고 가독성 높은 코드를 작성할 수 있게 해준다. 1. 요소 조작 (기본 다루기)배열의 앞뒤에서 데이터를 넣고 빼거나, 특정 부분을 잘라내는 기초 메서드들이다. JavaScript let arr = [1, 2, 3];arr.push(4); // [1, 2, 3, 4]arr.shift(); // [2, 3, 4]const sliced = arr.slice(0, 2); // [2, 3] (index 0부터 2 전까지)console.log(arr); // [2, 3, 4] 원본은 그대로!2. 탐색 및 순회 (찾기)배열 안에 원하는 데이터가 있는지, 어디에 있는지 확인한다.indexOf / incl..

JavaScript 2026.06.05

[JS] 10. 데이터의 깊이: 원시 타입 VS 객체 타입 & 순회

자바스크립트 성능 최적화와 버그 방지의 핵심인 데이터 타입의 저장 방식과 이를 효율적으로 순회하는 방법을 알아보자. 1. 원시 타입 (Primitive Types)"값(Value) 그 자체가 복사된다"원시 타입은 스택 메모리에 실제 값이 직접 저장된다. 변수를 다른 변수에 할당할 때, 값이 '복사'되어 전달되므로 두 변수는 서로 독립적이다.종류: number, string, boolean, null, undefined, symbol특징: 불변성(Immutable). 한 번 생성된 원시 값은 변하지 않는다.JavaScript let a = 10;let b = a; // 값을 복사해서 전달b = 20;console.log(a); // 10 (b를 바꿔도 a는 그대로!)2. 객체 타입 (Object Types..

JavaScript 2026.05.24

[JS] 09. 현대 JS: 구조분해할당, Spread & Rest

주제: 코드의 양을 획기적으로 줄여주는 ES6+ 문법핵심: 객체와 배열에서 필요한 것만 쏙 뽑아 쓰는 법, ... 연산자의 두 얼굴(펼치기 vs 모으기).팁: 리액트의 Props나 State를 다룰 때 필수! 세 가지 핵심 문법을 알아보자. 이 문법들은 데이터를 분해하고, 펼치고, 모으는 데 특화되어 있다. 1. 구조 분해 할당 (Destructuring Assignment)배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.① 배열 구조 분해 할당배열의 인덱스 순서대로 변수에 할당된다.JavaScript const colors = ["red", "green", "blue"];// 기존 방식// const first = colors[0];// const second = c..

JavaScript 2026.05.22

[JS] 08. 조건문 쓰기: Truthy/Falsy & 단락 평가

1. Truthy & Falsy (참 같은 값, 거짓 같은 값)자바스크립트는 불리언(true, false) 타입이 아니더라도, 조건문 내에서 참이나 거짓으로 평가되는 고유한 규칙이 있다.① Falsy (거짓 같은 값)아래의 값들은 조건문에서 false로 인식된다. 딱 7가지만 기억해보자undefinednull0 (숫자 0)-00n (BigInt)"" (빈 문자열)NaN (Not a Number)② Truthy (참 같은 값)위의 Falsy 값들을 제외한 나머지 모든 값은 true로 평가된다."0" (내용이 있는 문자열)[] (빈 배열){} (빈 객체)Infinity (무한대) JavaScript // Truthy & Falsy 확인 예제function check(value) { if (value) ..

JavaScript 2026.05.03

[JS] 07. 데이터 마스터: 객체와 배열 심화 (Feat. ES6+)

단순히 값을 담는 것을 넘어, 데이터를 자유자재로 가공하는 배열 메서드와 코드를 획기적으로 줄여주는 비구조화 할당을 알아보자1. 객체(Object) 객체는 키(Key)와 값(Value)의 집합이다. C#의 Dictionary나 Class의 필드와 유사하다.① 단축 속성명 (Shorthand Property Names)변수명과 객체의 키 이름이 같다면 생략이 가능하다.JavaScript const name = "SinYoung";const age = 30;// 기존 방식const user1 = { name: name, age: age };// 현대적 방식 (Short)const user2 = { name, age }; ② 계산된 속성명 (Computed Property Names)객체의 키를 동적으로 결정..

JavaScript 2026.04.15

[JS] 06. 변수가 사는 세상, 스코프(Scope)와 호이스팅

자바스크립트에서 "왜 이 변수가 여기서는 안 보이지?" 혹은 "왜 갑자기 undefined가 나오지?"라는 의문이 든다면 100% 스코프와 호이스팅의 문제이다. 스코프란? - 우리 말로 범위를 뜻한다. 즉 변수나 함수에 접근하거나 호출할 수 있는 범위이다.C#에서는 전역, 지역 변수, 함수와 같다.1. 스코프 (Scope): 변수의 유효 범위스코프는 변수에 접근할 수 있는 범위를 뜻한다.① 전역 스코프 (Global Scope)코드의 가장 바깥 영역이다. 여기서 선언된 변수는 어디서든 접근이 가능하다. 하지만 너무 많이 쓰면 데이터 오염의 위험이 있다.② 지역 스코프 (Local Scope)특정 영역 안에서만 유효하다. 자바스크립트는 크게 두 가지 지역 스코프를 가진다.함수 레벨 스코프: 함수 내부에서 ..

JavaScript 2026.03.31

[JS] 05. 자바스크립트의 심장, 함수(Function)

자바스크립트에서 함수는 단순히 명령어의 묶음을 넘어, 변수에 담거나 다른 함수의 인자로 전달할 수 있는 일급 객체로서 매우 강력한 힘을 가진다. 1. 함수의 선언과 표현 (호이스팅의 차이)① 함수 선언문 (Function Declaration)가장 기본적인 방식이다. 자바스크립트 엔진이 코드를 실행하기 전 함수 선언부를 최상단으로 끌어올리는 호이스팅(Hoisting)이 적용된다. 호이스팅 : 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(Import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상 ② 함수 표현식 (Function Expression)함수를 변수에 할당하는 방식이다. 호이스팅이 발생하지 않아 반드시 선언한 뒤에만 호출할 수 있다. (더 안전한 코딩이 가능하다.)..

JavaScript 2026.03.22

[JS] 04. 가장 많이 쓰이는 기본 연산자 5종 세트

자바스크립트에서 데이터를 넣고, 계산하고, 비교할 때 사용하는 가장 기초적이면서도 중요한 연산자 5가지를 정리해보자. 1. 대입 연산자 (Assignment Operator)변수에 값을 할당할 때 사용한다. 오른쪽(R-value)에 있는 값을 왼쪽(L-value)의 변수에 저장하는 역할을 한다. 2. 산술 연산자 (Arithmetic Operator)수학적 계산을 수행한다.+, -, *, /: 사칙연산%: 나머지 연산자. 나눗셈의 나머지를 구한다. (홀수/짝수 판별 등에 자주 쓰임) 3. 복합 대입 연산자 (Compound Assignment)산술 연산과 대입 연산을 결합한 형태이다. 코드를 더 간결하게 만들어 준다. 4. 증감 연산자 (Increment & Decrement)값을 1씩 증가시키거나..

JavaScript 2026.03.21

[JS] 03. 제어문과 특수 연산자 (조건문, 반복문, 삼항 연산자 등)

① Null 병합 연산자 (??)값이 확정된 변수를 찾아내는 연산자이다. 변수에 null이나 undefined가 있을 때 기본값을 설정하기 아주 좋다.(값이 존재하는지 추려내는 기능) ‼️ 논리 합 연산자와 Null 병합 연산자의 차이점 ‼️① || (논리 합 연산자)판단 기준: 값이 Falsy(거짓 같은 값)이면 오른쪽 값을 선택한다.Falsy 값 종류: false, 0, "" (빈 문자열), null, undefined, NaN.문제점: 만약 사용자가 입력한 값이 0이나 빈 문자열("")일 때도 이를 '값이 없다'고 판단하여 기본값으로 덮어버리는 실수를 범할 수 있다.② ?? (null 병합 연산자)판단 기준: 값이 Nullish(null 계열의 값)일 때만 오른쪽 값을 선택한다.Nullish 값..

JavaScript 2026.03.18

[JS] 02. - 자바스크립트 기초: 변수, 자료형

1. 변수 let (변수): 값이 변할 수 있는 변수를 선언할 때 사용한다. 2. 상수 const (상수): 한 번 할당하면 값을 바꿀 수 없다. 보안과 실수를 방지하기 위해 실무에서는 const 사용을 권장한다. 3. 자료형(DataType) 원시 타입: 값이 변수에 직접 저장된다. (복사하면 값이 하나 더 생김)객체 타입: 값이 어딘가 저장된 주소(참조)를 변수가 가리킨다. (복사하면 같은 주소를 바라보게 됨) ① 원시 타입 (Primitive Type)가장 기본적인 데이터 단위이다.Number: 정수, 실수 구분 없이 숫자형으로 통칭한다. (Infinity, NaN 포함)String: 문자열, 백틱(``)을 사용하면 변수를 동적으로 넣을 수 있다.Boolean: 참(true) 또는 거짓(false..

JavaScript 2026.03.15
728x90