이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 프로퍼티 나열 컨테이너의 컨텐츠를 리스트로 나열하라고 하면 일반적으로 배열을 생각하지만 자바스크립트에서 객체또한 컨테이너이고 프로퍼티 나열을 지원합니다. 주의해야할 점은 프로퍼티 나열에서 순서대로 나열된다는 보장이 없다는 점입니다. For ... in const SYM = Symbol(); const o = { a: 1, b: 2, c:3, [SYM]: 4};//for...in 루프에서는 키가 심볼인 프로퍼티는 포함X for(let prop in o){ if (!o.hasOwnProperty(prop)) continue; console.log(`${prop}: ${o[prop]}`); } hasOwnProp..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 배열의 기초 시작하기 전에 자바스크립트 배열의 기본적인 사항들을 확인해봅시다. 배열은 객체와 달리 순서가 있는 데이터 집합이며 0부터 시작하는 숫자형 인덱스를 사용합니다. 한 배열의 요소가 같은 타입일 필요가 없습니다. 다른 배열의 객체도 요소로 사용할 수 있습니다. 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다. 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며 빈자리는 undefined로 채워집니다. 드물게 사용하지만 Array 생성자를 사용해서 배열을 만들 수도 있습니다. 배열 요소 조작 배열 조작 메서드의 일부는 배열 ..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 스코프는 변수와 상수, 매개변수가 언제 어디서 정의되는지 결정합니다. 스코프는 프로그램의 현재 실행 중인 부분, 즉 실행 컨텍스트에서 현재 보이고 접근할 수 있는 식별자들을 의미합니다. 정적 스코프 자바스크립트의 전역 스코프, 블록 스코프, 함수 스코프는 정적입니다. const x = 3; function f() { console.log(x); console.log(y); } { const y = 5; f(); } x는 함수 f를 정의할 때 존재하지만 y는 그렇지 않습니다. y는 다른 스코프에 존재하기 때문에 다른 스코프에서 y를 선언하고 그 스코프에서 f를 호출하더라도 y는 스코프 안에 존재하지 않습니다...
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 함수는 하나의 단위로 실행되는 문의 집합입니다. 모든 함수에는 바디가 있습니다. 함수 바디는 함수를 구성하는 문의 모음입니다. 함수선언 function sayHello(){ console.log("hello!"); } 함수호출(실행) sayHello(); 반환값 함수 호출 또한 표현식이고 이는 값이 될 수 있다는 것을 의미합니다. 반환 값은 함수 호출의 값을 의미합니다. return 키워드는 함수를 즉시 종료하고 값을 반환합니다. function getGreeting(){ return "Hello world!"; } getGreeting(); // "Hello, World!" return을 명시적으로 호출하..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 제어문 블록 문 엄밀히는 제어문이 아니지만 제어문과 함께 쓰입니다. 문 여러 개를 중괄호로 묶은 것이며 JS는 이들을 하나의 단위로 취급합니다. { console.log("statement 1"); console.log("statement 2"); } 블록문은 제어문과 함께 쓸 때 유용하게 사용할 수 있습니다. 제어문 내에서 사용되는 일반적인 개념임에도 불구하고 JS에서는 일부러 파트를 떼어 설명하는 이유는 차후에 클로저나 유효범위를 좀 더 쉽게 설명하기 위함인 듯 합니다. while 루프 let funds = 50; while(funds > 1 && funds < 100) { //돈을 겁니다. //주사위를..
2020년 회고 - 번데기
많은 사람들은 2020년은 코로나로 인해 힘든 해였다고 한다. 나 또한 코로나로 인해 군대 내에서 연초부터 휴가가 짤리고 아르바이트도 구하기 힘들어지고 바라던 여행같은 밖에서 행하는 것들을 할 수가 없었지만 막상 돌이켜보면 신기하게도 그다지 별 상관 없지 않았나..? 하는 생각이 든다. 아마 워낙 집밖으로 안나가는 성향인지라 남들보다 더 코로나 시대에 적응하기 편했던 부분도 있었던 것 같다. 2018년, 갓 군대에 입대했을 시절 내게 2020년은 머나먼 미래였다. 지금 당장 훈련소의 한달 반을 견디는 것도 한 세월이였는데 2년이란 시간은 정말 막연히 긴 시간이었다. 그 머나먼 미래가 벌써 끝나가고 있다는 사실은 진심으로 받아들이기가 참 힘들다. 내가 있던 부대는 92년생 초등학교 선생님 두 명, 그 외 ..
1. 변수와 상수 let targetTempC; // let targetTempC = undefined; 와 동일 let targetTempC, room1 = "conference_room_a", room2 = "lobby"; // 변수를 여러 개 선언할 수 있다. 오해하지 말아야 할 점은 초기값을 할당하지 않은 변수는 room1이 아니라 // targetTempC이다. 자바스크립트에서 변수는 let, 상수는 const로 표현한다. (둘 다 ES6에서 생김) 상수는 일반적으로 대문자와 밑줄만 사용한다.(스네이크 케이스) 3. 식별자 이름 자바스크립트는 다른 언어와 달리 달러 기호를 식별자 이름에 사용가능하다. 이를 이용해 제이쿼리에서 달러 기호를 식별자를 사용한다. 5. 원시 타입과 객체 원시 타입에는 ..
오늘의 뻘짓(1) - matchedGeometryEffect 애니메이션 문제
원래 블로그 제목을 뻘짓으로 지을려고 했을 정도로 간단한 문제를 빙빙 돌아서 해결하는 경향이 짖다. 시간낭비로 인한 멘탈 붕괴는 덤. 나 같은 사람이 있다면 조금이라도 도움이 되길 바라며 시리즈를 써보기로 했다. 내 나쁜 코딩 습관은 생각 하던 결과가 나오지 않을 때 디버깅과 코드 체크를 매우 매우 매우 비효율적으로 한다는 점이다. 한번 코드를 뒤지고 나면 열은 다 깨져있고 온통 주석칠에 원인을 찾고나면 이전 커밋 버전을 다시 불러와 작업을 이어 나갈 정도로 더 이상 써먹지 못하는 코드 상태가 된다. 매번 고쳐야 하는 걸 알면서도 원하는 결과가 안나온다는 빡침모드에 들어서면 원인부터 찾고보자 상태가 되버려서 바꾸기가 쉽지 않다... 무튼간 오늘의 뻘짓은 matchedGeometryEffect 적용문제인데..
• The Problem That Generics Solve func swapTwoInts(_ a: inout Int, _ b: inout Int) { let temporaryA = a a = b b = temporaryA } 받은 두 변수를 스왑시켜주는 간단한 함수가 있다. func swapTwoStrings(_ a: inout String, _ b: inout String) { let temporaryA = a a = b b = temporaryA } func swapTwoDoubles(_ a: inout Double, _ b: inout Double) { let temporaryA = a a = b b = temporaryA } 간단한 기능을 가진 함수지만, 타입마다 함수를 새로 만들어 줘야 한다...