JavaScript
면접 때 받은 질문, 하지만 제대로 대답하지 못한 내용이라 정리해두려고 한다. 일반 함수와 화살표 함수의 차이점에 대해 알아보기 전에, 함수 정의 방법에 대해 알아보자. 함수를 정의하는 방법은 4가지가 있다. 함수 선언식 function add(x,y) { return x + y; } 함수 표현식 const add = function (x, y) { return x + y; } Function 생성자 함수 const add = new Function('x', 'y', 'return x + y'); 화살표 함수(ES6) const add = (x, y) => x + y; 모든 함수 정의 방식은 함수를 정의한다는 면에서는 동일하지만 중요한 차이가 있다. 변수는 '선언(declaration)'한다고 하지만, ..
앞으론 Set을 사용해야겠다! 1. Set [Set] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set 객체는 ES6에 추가된 문법으로 유일한 값을 저장할 수 있다. 이를 이용해 중복요소를 제거하고자 하는 배열을 전달하면 중복 값이 제거된 배열을 얻을 수 있다. // 1. spread 사용 const array = ['🐑', 1, 2, '🐑', '🐑', 3]; // Step 1 const uniqueSet = new Set(array); // Set { '🐑', 1, 2, 3 } // Step 2 const backToArray = [...uniqueSet]; // ['🐑', 1, 2, 3] // 2...
for문을 효율적으로! 우선, 고차 함수(higher order function)를 알아보자. 고차 함수는 함수를 인자(argumentm)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 부른다. (작업 완료 시 호출하는 경우가 많아 답신 전화라는 뜻의 콜백으로 이름 지어졌다.) 1. forEach() 주어진 함수를 배열의 요소 각각에 실행한 결과를 반환한다. 실행할 함수에는 세 가지 매개변수가 온다. • currentValue: 처리할 현재 요소 • index(optional): 처리할 현재 요소의 인덱스 • array(optional): forEach()를 호출한 배열 // for 반복문 const items = ['item1', 'item..
Spread 문법 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 배열 합치기 let parts = ['shoulders', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes']; let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; 배열 복사 let arr = [1, 2, 3]; let arr2 = [...arr]; // arr.slice() 와 유사 arr2.push(4); 객체에서 사용 l..
Loop(반복문) while loop: while the condition is truthy, body code is executed statement가 false될 때 까지 반복 let i = 3; while (i > 0) [ console.log(`while: ${i}`); i--; } do while loop: body code is executed first, then check the condition 먼저 블럭을 실행한 다음, 조건이 맞는지 아닌지 검사 do { console.log(`do while: ${i}`); i--; } while (i > 0); for loop: for(begin; condition; step) for (i = 3; i > 0; i = i - 2) { console...
String concatenation(+) cosole.log('my' + ' cat'); console.log('1' + 2); console.log(`string literals: 1 + 2 = ${1 + 2}`); Numeric operators console.log(1 + 1); // add console.log(1 - 1); // substract console.log(1 / 1); // divide (나누기) console.log(1 * 1); // multiply (곱하기) console.log(5 % 2); // remainder (나누고 나머지값) console.log(2 ** 3); // exponentiation (2의 3승) Increment(++), decrement(—) oper..
조건에 따라 사용자에게 반응하는 로직을 짜려면 조건문이 필요하다. 조건이 참인지 거짓인지 판별하는 비교연산자가 필요하다. Conditional operators(조건 연산자) - if if, else if , else const name = 'gazero'; if (name === 'gazero') { console.log('Welcome, Gazero!'); } else if (name === 'coder') { console.log('You are amazing coder'); } else { console.log('unknown'); } Ternary operator(삼항 조건 연산자) - ? : condition ? value1 : value2; true면 왼쪽 실행, false면 오른쪽 실행 c..
함수는 자주 사용하는 코드를 캡슐화해서 여러 번 사용할 수 있게 해 준다. Function(함수) - fundamental building block in the program - subprogram can be used multiple times - performs a task or calculates a value 함수의 기본 형태 function name(param1, param2) { body... return; } function greeting(name) { console.log(`hello ${name}!`) } 하나의 함수는 한 가지의 일만 수행하도록 만들어야 한다. 함수의 이름은 동사의 형태로 지정해야 하며, 카멜 케이스로 작성해야 한다. (doSomething) ⚡︎ 자바스크립트에서 함..
배열에 이어 다른 데이터 저장방법인 객체에 대해 알아보자. 객체는 배열과 다르게 index를 가지지 않는다. 순서 없이 데이터를 키-값 쌍 형식으로 저장할 수 있다. 예를 들어, 유저에 대한 정보를 저장한다고 생각해보자. 유저의 이름, 나이, 아이디, 비밀번호 등 이 모든 정보는 한 유저에 대한 정보이다. 언제든 유저의 정보를 추가할 수 있고, 필요한 부분만 수정하기에 객체가 용이하다. 객체의 기본 형태 const user = { name: "gazero", age: 28, nickname: "5gazero", cute: true, } 저장하고 싶은 데이터의 키-값 쌍을 중괄호(brace)안에 담아주면 된다. 변수명 = {키: 값, key: value} 객체의 접근 및 사용 user.name; // ga..
데이터 구조는 컴퓨터과학에서 중요한 부분이다. 우리가 어떻게 하면 데이터를 최선의 방법으로 정리할 수 있을까. 데이터를 검색하거나 삽입을 빠르게 할 수 있는 최선의 데이터 저장 방법을 찾는 것에 대한 고민. 데이터를 저장하는 방법 중 하나인 array(배열)에 대해 알아보려고 한다. 배열의 기본 형태 const array = [1, 2, "3", false, undefined, null] 저장하고 싶은 데이터들을 변수명을 정해 대괄호(bracket) 안에 담아주면 된다. 대괄호 안에는 숫자, 문자열, 불리언, undefined, null 다 넣을 수 있다. 변수명 = [데이터] 배열의 접근 및 사용 배열의 각 데이터들은 순서대로 0부터 시작하는 index를 갖는데, index를 이용해 값에 접근할 수 있..
html에 script를 포함하는 위치에 따라 성능면에서의 차이가 있다. 1. head 안에 script를 포함했을 시 사용자가 html 파일을 다운로드하였을 때, 브라우저가 html code를 한 줄씩 parsing 한다. 분석해서 이해한 것을 css와 병합해서 DOM요소로 변환한다. 분석하는 도중, script 태그를 만나게 되면 html parsing을 멈추고, 필요한 자바스크립트 파일을 서버에서 다운로드하여서 실행한 다음에 다시 parsing을 하게 된다. 이 방식의 단점은, JS파일이 무겁다면 사용자가 웹사이트를 보는 데까지 상당히 많은 시간이 소요될 것이다. 2. body 마지막에 script를 추가 html을 모두 parsing 한 후, JS파일을 다운로드하기 때문에 자바스크립트 파일을 다운..
1993 NCSA Mosaic Web Browser 지금처럼 집집마다 컴퓨터가 없던 시절, 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 ui요소가 더해진 모자이크 웹브라우저 출시 1994 Netscape Netscape Navigator 개발팀을 이끌던 Marc Andreessen은 대학교 졸업과 동시에 Netscape라는 회사를 설립해, 모자이크 웹브라우저 개발 경험을 토대로 ui요소가 조금 더 더해진 Netscape Navigator를 출시한다. 이 당시에는 html과 css로만 간단하게 웹페이지를 만들 수 있었다. 페이지간 이동만 가능한 정적인 웹사이트 넷스케이프 내비게이터는 시장점유율 80%를 자랑하며 급격히 성장해나갔다. Marc Andreessen은 웹사이트 안에서 dom 요소들을 조작하면서..
String concatenation(+) cosole.log('my' + ' cat'); console.log('1' + 2); console.log(`string literals: 1 + 2 = ${1 + 2}`); Numeric operators console.log(1 + 1); // add console.log(1 - 1); // substract console.log(1 / 1); // divide (나누기) console.log(1 * 1); // multiply (곱하기) console.log(5 % 2); // remainder (나누고 나머지값) console.log(2 ** 3); // exponentiation (2의 3승) Increment(++), decrement(—) oper..
Variable types premitive: value로 값이 저장됨 object: 오브젝트가 가리키는 레퍼런스가 저장됨 메모리값이 다른 방식으로 저장된다. 숫자(Number) let number = 6; 미리 정해진 값 const infinity = 1 / 0; const negativeInfinity = -1 / 0; const NaN = 'not a number' / 2 console.log(infinity); console.log(negativeInfinity); console.log(NaN); bigInt →원래 숫자 범위: (-2**53) ~ 2*53 (53승) const bigInt = 1234568901234567890123456890n console.log(`value: ${bigInt..
변수(Variable): Mutable type rw(read/write) - 변경될 수 있는 값 - let (added in ES6)으로만 선언 - var 사용금지: 사용시 hoisting현상(변수 선언 위치와 관계없이 항상 제일 위로 선언을 끌어올려주는 것), block 무시하고 전역에 적용 - block scope {안에서만 값 적용} - global scope 전역적용 상수(Constant): Immutable type r(read only) - 할당한 값 변경 불가(immutable data type) - const로 선언 변수 할당 타입 숫자(Number) 문자열(String)- ''로 감싸서 선언 - `` template literals 참 거짓(Boolean)- false: 0, null,..
