log_J

Array.find(callback) callback( element, index, array ) callback 함수 실행값이 true인 element를 반환 원하는 요소를 찾자마자 메서드 종료. 가장 먼저 callback 함수 조건에 맞는 첫번째 element를 찾아냄 조건을 만족하는 element가 없을 경우 undefined 반환 파라미터 설명 필수값 element 현재 처리중인 배열의 element Y index 현재 처리중인 배열의 index N array find가 호출된 배열 N 리턴값 element (undefined) const arr = [4, 3, 6, 9, 1, 20, 74, 232]; const find1 = arr.find(e => e>5); // find1 = 6 const ..

Array.fill( value, start, end ) 배열의 start index부터 end index 전까지 (end index 미포함) value값으로 채워주는 함수 파라미터 설명 필수값 기본값 value 배열을 채울 값 N undefined start value값을 채울 배열의 시작 index (음수도 가능) N 0 end value값을 채울 배열의 마지막 index (음수도 가능) N array.length 리턴값 Array 예시 const arr1 = new Array(3).fill() // [undefined, undefined, undefined] const arr2 = new Array(3).fill(1) // [1,1,1] const arr3 = new Array(3).fill(1,0..

배열(Array)이란? 배열 (Array) : 이름과 인덱스로 참조되는 정렬된 값의 집합 요소 (Element) : 배열을 구성하는 각각의 값 인덱스 (Index) : 배열에서의 위치를 가리키는 숫자 배열의 특징 Element의 타입이 고정되어 있지 않다. Element끼리 타입이 서로 다를 수 있다. 배열 요소의 Index가 연속적이지 않아도 된다. 특정 배열 요소는 비어 있을 수도 있다. Array 객체로 다뤄진다. 배열 선언 방법 1. 대괄호 [ ] 를 사용하여 선언 const arr1 = []; const arr2 = ['apple', 'banana', 'kiwi']; 대괄호를 이용해 빈 배열을 생성할 수도 있고, 배열을 선언할 때 초기값을 설정해 줄 수도 있다. 2. new Array() 사용하..

💡 화살표 함수(Arrow Function) ES6부터 도입된 문법. function 키워드를 사용해 함수를 만드는 것보다 간단하게 함수를 표현할 수 있음 화살표 함수는 함수표현법을 조금 더 간결하게 쓰는 방법에 가깝다. // 함수 표현식 let hello = function() { return "안녕하세요"; } // 화살표 함수 let hello = () => "안녕하세요"; 화살표 함수의 문법 매개변수 매개변수가 한 개 일때는 소괄호 생략이 가능. 매개변수가 없거나 여러개일 땐 소괄호 생략 불가능. // 매개변수가 없을 경우 () => {...} // 매개변수가 한 개 일때, 소괄호 생략 가능 x => {...} // 매개변수가 여러 개 일때, 소괄호 생략 불가능 (x,y) => {...}​ 코드 ..

Javascript 함수란? 어떤 목적을 가진 작업들을 수행하기 위해 모인 코드들의 블럭 입력 -> 연산 -> return -> 출력 형태를 갖는다. 함수는 실제로는 또 하나의 객체(Object)로 변수나 배열에 할당시킬 수 있다. 함수를 변수에 할당 시킬 수 있다는 말은 무엇일까? 자바스크립트에서 함수를 선언하는 방법에 대해서 알아보자 함수 선언식 function hello() { return "안녕하세요" } hello(); // "안녕하세요" function 키워드를 사용해 함수를 선언한다 function 함수명 (파라미터) { return }; return이 불필요할 땐 생략 가능 함수 선언식으로 선언한 함수는 호이스팅이 발생한다. (호이스팅에 대한 설명은 관련 글이 아니기 때문에 생략) hell..

💡 형 변환(Type Conversion) : 프로그래밍에서 자료형을 다른 형태로 변경하는 것. 명시적 형 변환 사용자가 원하는 형태로 직접 데이터의 타입을 변경하는 것 # 1. to String String( ) 어떤 형태든 문자로 형변환 가능 (null, undefined ... ) String(111) // "111" String(Undefined) // "Undefined" String(NaN) // "NaN" String(true) // "true" ( ).toString() 2~36 사이의 값을 대입하면 숫자를 해당 진수로 변환한 문자열을 얻을 수 있음 일반적으론 인자없이 사용해서 문자열을 얻음 String()과 달리 null, undefined를 .toString() 할 경우 오류 발생 le..

자바스크립트의 자료형 원시타입? 비원시 타입? 원시타입(Primitive Data Type) : 값이 하나인 자료형. 변수에 값(value) 자체가 담긴다. 비원시 타입(Non-Primitive Data Type) : 여러 값을 한번에 담고 있는 자료형. 변수에 값는 담고 있는 보관함의 주소(reference)가 담긴다. 원시타입 자료형 (Primitive Data Type) # 1. 숫자형 (Number) 숫자형 데이터. 소수형, 정수형 등 따옴표없이 수학 연산이 가능한 모든 숫자 데이터는 Number타입으로 간주한다. 64bit 부동소수점으로 관리됨. 사실상 내부적으론 실수형으로 관리하고 있음. Infinity, -Infinity, NaN과 같은 형태도 숫자형으로 분류 NaN(Not a Number)..

변수와 상수 자바스크립트에서 변수는 "프로그래밍을 위해 하나의 값을 저장하는 저장소"라고 볼 수 있다. JS는 이 변수를 선언하는 방식이 3가지로 나눠져 있는데, 오늘은 var, let, const 이 세가지 선언 방법에 대해서 정리하고자 한다. 변수? 💡 프로그램 실행 도중에 계속해서 바뀔 수 있는 값을 저장하는 저장소 상수? 💡 처음 할당한 값이 바뀌지 않는 저장소. 따라서 초기 선언 시 값을 비우고 선언하는 것도 불가능하고, 프로그램 실행 중 값을 바꾸는 것도 불가능 변수명 규칙 변수명에는 기호를 쓸 수 없다. (but, 언더스코어_, 달러$ 는 제외) 변수명은 숫자가 아닌 문자로 시작해야 한다. (ex- 6age는 불가, age5은 가능) 예약어는 변수명으로 사용할 수 없다. (ex- if, el..

개발자는 HTML, CSS, Javascript 파일 등을 작성해 웹페이지를 만든다. 웹페이지가 보여지는 브라우저는 해당 파일을 어떻게 불러와 화면에 띄우는 것 일까? 사실 개발자들이 만들어내는 파일들은 단순히 "Text"에 불과하다. 단순 텍스트였던 파일들을 브라우저가 웹 페이지로 예쁘게 그려내는데 이것을 렌더링(Rendering)이라고 한다. 왜 렌더링을 알아야 할까? 개발자들의 숙명인 "속도 개선"을 위해선 브라우저가 렌더링을 하는 과정에 대해서 꼭 알아야 한다. 렌더링 과정을 알면 우리의 어떤 코드가 브라우저가 웹페이지를 그려내는데 오랜 시간을 들이게 하는지 알 수 있기 때문에, 속도 개선이나 효율을 위해서 알아두면 좋은 개념이자 필수 개념이라고 할 수 있다. 브라우저의 렌더링(Rendering)..

렌더링(Rendering) : HTML-CSS-Javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정 브라우저의 렌더링 과정은 아래와 같다. 1. 서버로 부터 받은 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받는다. 2. HTML를 DOM, CSS를 CSSOM으로 생성한다. 3. Render Tree를 생성한다. 4. Layout을 계산한다. (Viewport내에서 각각의 노드들의 위치를 계산한다) 5. Paint한다. (요소들을 화면에 그린다) 위 단계를 거쳐 우리가 보는 웹페이지를 만들어낸다.그런데 단순히 이해하기엔.. Layout이나 Paint는 대충 예상이나 가지만 나는 DOM도, CSSOM도 Render Tree 몰?루 그래서 개념을 정리하고자, 나..