CS/Javascript (11) 썸네일형 리스트형 객체 key 값으로 정렬하기 배열 정렬은 많이 해봤지만, 객체를 Key 값으로 정렬할 경우가 생길 것 같아 기록해본다. const unordered = { 'b': 'foo', 'c': 'bar', 'a': 'baz' }; console.log(JSON.stringify(unordered)); // → '{"b":"foo","c":"bar","a":"baz"}' const ordered = Object.keys(unordered).sort().reduce( (obj, key) => { obj[key] = unordered[key]; return obj; }, {} ); console.log(JSON.stringify(ordered)); // → '{"a":"baz","b":"foo","c":"bar"}' 이벤트 버블링, 캡쳐링 및 이벤트 위임 예전에 모달을 만들 때, 모달의 'x'버튼을 누르면 모달이 꺼지는 이벤트가 모달을 눌렀을 때에도 적용이 되어 이것이 이벤트 버블링 현상에 의한 것이라는 것을 처음 알게 되었다. 오늘은 이벤트 버블링과 캡쳐링, 그리고 이벤트 위임에 대해 간단히 정리해보자. 이벤트 흐름이란? HTML 요소가 다른 요소의 내부에 중첩되어 있을 때 자식 요소를 클릭하면 부모 요소를 클릭한 된다. 이처럼 이벤트는 흐름을 가지고 있으며, 이것을 이벤트 흐름이라고 부른다. 이벤트 흐름에는 두가지 방식인 이벤트 버블링과 캡쳐링이 있다. DOM이 겹쳐져 있을 경우 이벤트 시발점과 관련된 모든 요소들이 이벤트에 탑승하게 된다. currnet target: 이벤트의 현재 주인 target: 이벤트의 시발점 예시를 살펴보자. 다음과 같이 d.. 변수란? 변수의 선언/초기화/할당 오늘은 내가 매일같이 쓰는 단어인 '변수', 그리고 변수의 '선언/할당/초기화'에 대해 간단히 정리해보자. 변수의 선언이 실행 컨텍스트와 연관지어 이해할 수 있다는 것을 처음 알았다! 깊이 있게 공부하자. 이해하자. 변수란? 하나의 값을 저장하기 위해 확보된 메모리 공간 자체이고 변할 수 있는 데이터이다. 변수명이란 메모리 공간을 식별하기 위한 식별자이다. 변수의 선언/초기화/할당 1. 선언 변수의 선언이란 var, let, const 키워드를 사용하여 변수를 정의하는 것을 의미한다. 자바스크립트는 코드 실행 전, 전체 코드를 훑으며 문제 사항을 확인하는 실행 컨텍스트 Execution phase(실행 단계)를 진행한다. 선언 단계는 바로 이 실행 컨텍스트에서 진행되며 우리가 만든 변수 또는 함수를 실행.. 객체지향 프로그래밍이란?(feat. javascript) 객체지향 프로그래밍이 무엇인지, 특징은 무엇인지 간단히 정리해보자. 예전에 강의에서 객체지향 프로그래밍과 그 특징에 대해 배웠는데 처음엔 너~~무 이해가 안돼서 몇 달간 요약했던 글을 다시 보고 다시 봐도 이해가 안됐다. 배운지 한 6개월이 지난 지금 다시 보니 이해가 잘된다. 역시 첫 술에 배부를 수 없고, 기적에는 시간이 반드시 필요하다. https://bbeeyaks-moment.tistory.com/entry/section2unit2Javascript-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D921 section2/unit2/Javascript 객체지향 프로그래밍(9/21) 블로깅 주제 Jav.. 자바스크립트는 어떤 언어인가? 오늘은 자바스크립트가 어떤 언어인지 서치해보았다. 지금까지 프론트엔드 개발자가 되겠다고 열심히 배웠는데 자바스크립트가 어떤 언어인지는 대강 느낌만 알고 있던 내 자신이 부끄러워진다. 구글링하면서 자주 나오는 논 블로킹이라는 단어가 뭐지 뭐지~ 했는데 이제 의미를 알겠다. 알아가는 즐거움! 객체 기반의 스크립트 언어이다. 스크립트 언어란 ? 소스 코드를 컴파일(Compile)하지 않고도 실행할 수 있는 프로그래밍 언어이다. 별도의 컴파일 없이 내장된 번역기에 의해 번역 되므로 바로 실행 할 수 있다. 예를 들어, 자바 스크립트가 있다. 컴파일 언어란 ? 작성한 소스를 컴파일러를 통해 기계어 코드로 변경해야 사용자가 실행 할 수 있는 실행 파일이 얻어지는 프로그래밍 언어이다. 예를 들어, 자바나 C++ 등이.. 자바스크립트 렉시컬 환경이란? 오늘은 렉시컬 환경에 대해 서치 한 내용을 작성해 보자. 전에는 몰랐는데 렉시컬 환경과 실행 컨텍스트, 호이스팅이 전부 밀접한 관계가 있다는 것을 깨달았다! 전부 다 따로따로 이뤄진 개념인 줄 알았더니.. 과장 보태서 신세계를 경험한 것과 같은 충격이었다. 나는 이 글을 정독하였고, 기술면접 및 기록을 위해 해당 블로그의 내용을 참고 및 요약하여 남기려고 한다. https://developer-alle.tistory.com/407 [JavaScript] 렉시컬 환경 스코프랑 클로저에 대해 전에도 정리했었지만, 이번엔 렉시컬 환경이라는 개념과 함께 정리하려고 한다. Lexical Environment의 개념 Lexical Environment는 코드 block, function, script를 실행하기 앞.. isNaN() 반환 값?! isNaN() 변수가 Number 형태인지 판별해주는 메소드이다. isNaN(변수) Number 라면 false, Number가 아니라면 true 반환된다. [js] slice vs splice / substr vs substring 항상 헷갈렸던 배열, 문자열 관련 메소드들을 싹 정리해보자. 배열 메소드(slice는 문자열에서도 사용 가능) 1. slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. => 원본 배열은 수정되지 않는다. slice(start[, end]) start: 추출 시작점에 대한 인덱스 undefined인 경우: 0부터 음수를 지정한 경우: 배열의 끝에서부터의 길이. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열 반환 start와 end가 같은 경우: 빈 배열 반환 end: 추출을 종료할 기준 인덱스(end를 제외하고 그 전의 요소까지만 추출) 지정하지 않을 경우: 배열의 끝까지 음수를 지정한.. 이전 1 2 다음
