전체 글 345

TIL) 자바스크립트 객체에서 꼭 알아야하는 for in 과 Object.keys()

for in 반복문 const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // "a: 1" // "b: 2" // "c: 3" 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다. Symbol로 키가 지정된 속성은 무시한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in for...in - JavaScript | MDN for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자..

TIL) JS ES6 문법, spread, rest 문법, 구조분해할당, 스프레드와 구조분해 차이

🍋 spread문법 => 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 🍋 rest 문법 => 파라미터를 배열의 형태로 받아서 사용할 수 있다. (파라미터 갯수가 가변적일때 유용) function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 6 sum(1,2,3,4) // 10 🍅 배열 합치기 let arr1 = [0, 1, 2]; let arr2 ..

TIL) 자바스크립트 클로저 개념과 특징

[목표] 클로저 함수의 정의와 특징에 대해서 이해할 수 있다. 클로저가 갖는 스코프 범위를 이해할 수 있다. 클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다. [참고] 클로저 공부하기 전 화살표 함수를 알아보자! 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다. const pow = x => x * x; console.log(pow(10)); // 100 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 클로저 특징과 예시 🐜 특징 1. 함수의 호출이 두 번 발생 ✔️ ..

TIL) 스코프의 주요규칙, 블록 스코프와 함수 스코프, 변수 선언과 스코프, 변수 사용시 주의사항

목표 스코프의 의미와 적용 범위를 이해한다. 스코프의 주요 규칙을 이해한다. 전역 스코프와 지역 스코프의 차이를 이해한다. block scope와 function scope의 차이를 이해한다. 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다. 전역 객체가 무엇인지 설명할 수 있다. 스코프란? 스코프의 정의: 변수 접근 규칙에 따른 유효 범위 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부른다. 규칙1. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능 규칙2. 스코프는 중첩이 가능하다. 규칙3. 가장 바깥의 스코프는 특별히 전역 스코프 (Global scope)라고 부른다..

TIL) 원시 자료형과 참조 자료형, 차이점, reference란?

원시 자료형(primitive data type) = number, string, boolean, null, undefined 과 같은 고정된 저장 공간을 차지하는 데이터 참조 자료형(reference data type) = array, object, function 원시 자료형의 특징과 종류 string, number, bigint, boolean, undefined, symbol, (null) 복사한다면 값을 복사 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 일정한 크기의 데이터가 온다고 예상할 수 있기 때문에 원시 자료형이 담기는 보관함의 크기는 고정하는 것이다. 변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있다. 원시 자료형은 값 자체에 대한 변경이 불가능..

TIL) 객체, object 기본 개념 쉬운 설명, 자바스크립트

객체를 배우는 이유! 각기 다른 값을 가지지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 목표! 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다. 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다. 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다. 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다. 객체는 키(key)와 값(value)으로 이루어져 있다. let user = { firstName: ‘Hailie’, lastName: ‘Lee', email: ‘0000@gmail.com’,..

신입 개발자 이력서는 어떻게 준비할까??

코드스테이츠에서 주최한 5월 이력서 특강을 듣고 정리했습니다. 전 우아한형제들 현 한샘 신희송 연사님의 강의였습니다. 좋은 이력서는 읽는 사람을 배려한 이력서! ⭐️강의 전반적인 핵심은 읽는 사람을 수고스럽게 만들지 말라는 것이였습니다. 수많은 학원, 국비교육, 부트캠프 등에서 배출되는 엔트리 레벨의 개발자들 중에서 나를 뽑을 만한 이유를 명확히 서술한 이력서가 중요하다. 읽기 편하게 이력서를 작성하자. (기본적인 글쓰기 능력이 중요하다.) 이력서에 들어갈 github, blog, 경력사항, 포트폴리오, 교육, 스터디, 기타 활동을 준비하자. 자기 소개 작성법 1. 요즘은 나의 특징만 3~4 문장으로 간략하게 하는 편이다. 2. 주로 어떤 업무 경험 (기술 스택)을 쌓아왔고, 업무적 장점이 무엇인지, 관..

TIL) 자바스크립트 splice 와 slice 차이 쉬운 설명

splice 와 slice 차이 => splice는 원본 배열을 변경하고, slice는 원본 배열은 변경하지 않는다. 배열의 중간에 요소를 추가하거나 제거하기 .splice(_, _, _) push, pop, unshift, shift 매서드와 마찬가지로 모두 원본 배열을 직접 변경하는 매서드이다. 매개변수는 3개 갖는다. ✔️ start: 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. 음수인 경우, 배열의 끝에서의 인덱스를 나타낸다. (-1: 마지막 요소, -n: 마지막에서 n번째 요소) 필수매개변수 ✔️ deleteCount: 제거할 요소의 개수, 0인경우 제거되지 않는다. 옵션매개변수 ✔️ items: 제거한 위치에 삽입할 요소...

반응형