DevLog

결론부터 간단히 말하자면 `for...in`은 객체 key를 순회하는 반복문이고, `for...of`는 배열 요소를 순회할 때 주로 사용하는 반복문이다. for ... in /* for ... in */ const obj = { name = "mankkong", age = 50, gender = 'F', }; for(const key in obj){ console.log(obj[key]); } // --> mankkong 50 F /* for .. in으로 배열을 순회하면 저장된 데이터가 아니라 정수 인덱스가 출력됨 */ const arr = ['a', 'b', 'c', 'd'] for(const elem in arr){ console.log(elem); } // --> 0 1 2 3 `for...in`..

자바스크립트의 함수 선언 방식에는 크게 두 가지 방법이 있다. // 함수 선언문 function hello(){ console.log("hello"); } hello(); 함수 선언문은 여타 프로그래밍 언어와 같이 `function func_name(param){ /* code */ }`와 같이 선언되며, 이때 함수 선언문 이전에 함수를 호출해도 에러 없이 작동한다는 특징이 있다. 자바스크립트는 위에서 아래로 코드를 읽어 순차적으로 실행하는 인터프리터 언어지만, 실행 전 초기화 단계에서 소스 코드 내부의 모든 선언문을 찾아서 최상단에 재배치하는 방식으로 작동하기 때문에 실제 함수 사용 가능 범위가 늘어나게 되는데, 이를 호이스팅(hoisting)이라고 한다. 이 때문에 함수 선언문은 코드 내부에서 상대적..

JS 데이터 타입: Number, String, Boolean, null, undefined * typeof null의 결과는 Object이나 실제로 null 타입이 객체인 것은 아님! 자동 형변환 (암시적 형변환) 프로그래밍 이론상 다른 타입 데이터끼리의 연산은 불가능한 것이 일반적이지만, 자바스크립트를 사용하면 아래 코드는 모두 에러를 일으키지 않고 정상적으로 작동한다..! // 문자 + 숫자 연산 "3" + 5 // --> "35" // 문자 / 숫자 연산 "2000" / 2 // --> 1000 // 문자 / 문자 연산 "8" / "4" // --> 2 문자와 숫자, 심지어 문자와 문자 간 나눗셈도 가능한데, 이는 JS에서 제공하는 자동 형변환 기능 덕분! JS는 명령을 처리할 때 자동으로 알아서..

배열 자르기 arr.splice(start, n) 배열의 start 인덱스부터 n개의 항목을 제거하는 함수 배열 내 특정 요소를 지우고 삭제 요소를 반환한다. (배열의 n번째 인덱스부터 m개 항목을 제거) // arr.splice(n,m) -> 배열 내 특정 요소 지우고 삭제 요소 반환 (n번째부터 m개) let arr = [1,2,3,4,5]; let result = arr.splice(1,2); // arr == [1,4,5] result == [2,3] `splice()` 함수는 배열 중간에 새로운 요소를 삽입하는 용도로도 사용이 가능하다! // arr == [1,2,3,4,5]; // arr.splice(n,m,x) -> 특정 요소 지우고 n자리부터 다른 요소 x 추가 arr.splice(1,3,..

Array(배열) 변수에 여러 값을 할당하고 싶을 경우 사용하는 데이터 구조. 파이썬과 같이 대괄호`[ ]` 안에 값들을 입력하고, 인덱스로 항목에 접근할 수 있다. 배열에 값을 삽입하는 메소드로는 `.push()`와 `.unshift()`가, 값을 삭제하는 메소드로는 `.pop()`와 `.shift()`가 있다. 이들은 항목 삽입 / 삭제 시 배열에 접근하는 위치가 각각 배열 맨 뒤와 맨 앞이라는 차이를 갖는다. const day = ["Tue", "Wed", "Thu", "Fri", "Sat"]; // 배열 기본 메소드 day.push("Sun"); // 맨 뒤에 삽입 day.pop(); // 맨 뒤에 삭제 day.unshift("Mon"); // 맨 앞에 삽입 day.shift(); // 맨 앞에 ..

문자열 메소드 문자열 변환 `str.toUpperCase()` / `str.toLowerCase()` 문자열 전체를 대문자 / 소문자로 변환한다. 문자열 탐색 `str.indexOf(txt)` 문자열 첫번째 시작 위치 인덱스를 반환한다. 문자열 내부에 찾는 문자(열)이 없으면 -1을 반환한다. `str.includes(txt)` 문자열이 포함되는지 여부를 판단하여 반환한다. 문자열 슬라이싱 `str.slice(n, m)` 인덱스 n부터 (m-1)까지 슬라이싱한다. `str.substring(n, m)` 인덱스 n과 인덱스 m 사이 문자열을 잘라서 반환한다. n과 m의 순서를 바꿔도 똑같이 작동한다. 음수는 0으로 인식하기 때문에 허용 X `str.substr(n, m)` 인덱스 n부터 m개의 문자를 잘라..

본 포스팅은 유튜브 코딩앙마 님의 "자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다. 심볼(Symbol) 객체 프로퍼티 key는 일반적으로 문자열을 사용하지만 심볼형으로도 선언할 수 있다. 심볼(symbol)이란 유일한 식별자로, 심볼을 객체 프로퍼티 key로 사용하게 되면 프로퍼티의 유일성이 보장된다. 심볼 생성하기 `const sb = Symbol(); // 심볼 생성` 심볼은 `Symbol()` 함수를 사용해서 선언한다. 이때 new 연산자는 사용하지 않음! 위 함수는 호출될 때마다 매번 다른 심볼 값을 생성하며, 같은 이름의 심볼을 여러 개 생성해도 다르게 인식하기 때문에 고유성을 유지할 수 있다. 또한 심볼을 생성할 때 선택적으로 문자열을 더해서 심볼에 대한 설명을 ..

본 포스팅은 유튜브 코딩앙마 님의 "자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다. 계산된 프로퍼티(computed property) 객체를 생성할 때, 프로퍼티 key로 `[ ]`를 사용할 수 있다. 객체 속성 이름(key)으로 [변수명]을 사용하면 해당 변수에 할당된 값이 속성 key로 설정되고, [식]을 사용하면 식이 계산된 결과가 key로 설정된다. const a = "age"; const user = { name: "mankkong", [a]: 22, // age: 22 [1 + 4]: 5 // 5: 5 }; function MakeObj(key, val){ this.[key] = val; }; 객체 메소드(object method) .assign() 객체를 복사하..

본 포스팅은 유튜브 코딩앙마 님의 "자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다. 객체 (Object) 연관된 property(속성)를 갖는 데이터들을 묶어서 저장하는 구조. array가 같은 속성을 갖는 데이터들을 나열하는 구조라면, object는 서로 다른 속성들을 하나의 그룹으로 묶어서 정리한다. 자바스크립트를 쓰다보면 익숙해질 수밖에 없는 자료구조! 객체는 일반적으로 중괄호 `{ }` 를 사용하여 선언하는데, 이러한 객체 생성 방식을 객체 리터럴이라 부른다. // 객체 리터럴 방식으로 객체 선언 const object = { prop1: value1, prop2: value2, }; 객체 내부의 속성 값은 두 가지 방식으로 접근이 가능하다. 첫째로 dot(`.`) ..

본 포스팅은 유튜브 코딩앙마 님의"자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다.   자바스크립트의 변수 선언은 크게 세 단계로 분류해볼 수 있다.1. 선언 단계 → 2. 초기화 단계(undefined 상태) → 3. 할당 단계(실제 값 할당)  JS에서는 각 변수 선언 과정과 관련해서 세 가지 변수 키워드 `const` `let` `var`를 사용하여 변수를 선언한다.  var : 변수 재선언 가능, 재할당 가능선언 단계와 초기화 단계가 동시에 동작하는 변수. 선언과 동시에 `undefined`로 값이 초기화된다. 초기 JS에서의 변수 선언 방식으로, 실수로 값을 업데이트 해도 문제를 알 수 없다는 단점이 있다.이후 언어 차원에서 변수 값의 보호를 위해 `const`(수정..