Today Hailie Learned

prompt() 입력창의 제목 부분에 메시지를 삽입할 수 있고, 창 입력 공간에 메시지를 삽입할 수 있다. const 행성 = [ '수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성', ]; const num = prompt('몇 번째 행성이 궁금한가요?'); console.log(행성[num - 1]); 입력한대로 콘솔창에 로그된다. 4를 입력한다면 화성이 출력된다. const 행성 = [ '수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성', ]; const num = prompt('몇 번째 행성이 궁금한가요?', '9번째 명왕성은 제외되었습니다.'); console.log(행성[num - 1]); prompt("윈도우창", "입력창..

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문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자..

🍋 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 ..

예제1) result 값은? let x = 10; function outer () { x = 20; function inner () { x = x + 20; } inner(); } outer(); let result = x; 예제2) result 값은? let x = 10; function outer () { x = 20; function inner () { let x; x = x + 20; return x; } inner(); } outer(); let result = x; 예제3) result 값은? let x = 10; function outer () { let x = 20; function inner () { x = x + 10; return x; } inner(); } outer(); let r..

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

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

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

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

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

희소배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다. 자바스크립트는 문법적으로 희소 배열을 허용하지만, 희소 배열은 사용하지 않는 것이 좋다. 성능에도 좋지 않다. 배열에는 같은 타입의 요소를 연속적으로 위치시키자! 위 예제의 arr은 인덱스 1인 요소를 갖지 않은 희소 배열이다. arr[1]이 undefined인 이유는 객체인 arr에 프로퍼티 키가 '1'인 프로퍼티가 존재하지 않기 때문이다. 존재하지 않는 요소를 참조하면 undefined가 반환되고, 그 배열에는 empty라고 반환된다. ⭐️참고 Array.from에 length만 존재하는 유사 재열 객체를 전달하면 undefined를 요소로 채운다. Array.fro..