데굴데굴

식별자가 유효한 범위 / 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 Quiz. 아래 코드에 존재하는 두 개의 console.log(x)의 결과는 각각 어떻게 될까? var x = 'global'; function foo() { var x = 'local'; console.log(x); } foo(); console.log(x); Answer. 'local' / 'global' 구분 설명 전역 스코프 코드의 가장 바깥 영역 지역 스코프 함수 몸체 내부 전역 변수는 어디서든지 참조가 가능하다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 참조할 수 있다. 지역 변수를 전역 변수에서 참조하려고 하면 ReferenceError가 발생한다. 스코프 체인 스코프가 계층적으로 연결된 것 스코프는..

궁금증이 피어오르게 된 문제 -> 백준 10825 - 국영수 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./test.txt"; let input = fs.readFileSync(filePath).toString().trim().split("\n"); const N = Number(input.shift()); const scores = input.map((el) => el.split(" ").map((v, idx) => { if (idx > 0) v = Number(v); return v; }) ); let names = []; function sortAlphabetically(a, b) ..

자바스크립트에서 문자를 숫자로 변환하기 위해 사용하는 방법으로는 parseInt()와 Number()가 있다. 더 간단하게는 문자 앞에 +를 붙여 숫자로 바꾸기도 한다. 어쨌든 둘 다 숫자로 변환해주니까 그 동안 아무거나 사용해왔었는데, 오히려 그러다 보니 이 둘은 대체 뭐가 다른건가 하는 의문이 자연스럽게 피어올랐다. 그래서 정리를 한 번 해보려고 한다. 참고 링크 단항 더하기 (+) - JavaScript | MDN 단항 더하기 연산자(+)는 피연산자 앞에 위치하며 피연산자를 평가하지만, 만약 피연산자가 숫자가 아니라면 숫자로 변환을 시도합니다. developer.mozilla.org Number() vs parseInt() - this vs that Number() vs parseInt() this..

참고 - 자바스크립트 Deep Dive, MDN 이벤트 입문 | MDN 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주 developer.mozilla.org 이벤트 전파와 이벤트 버블링, preventDefault()와 stopPropagation()의 차이가 궁금해져 정리해본 글이다. 이벤트 등록 이벤트 핸들러 어트리뷰트 Say Hi! function greeting(name) { console.log(`Hi, ${name}!`); }; html 태그에 이벤트 속성을 부여하는 방법이다. 'on + 이벤트 종류'에 함수를 호출하면 이벤트 핸들러..

다른 예시를 들어보려했는데 너무 헷갈림..! 학습하면서 자주 써왔던 Array로 설명해보자 Array로 이해해보기 nums라는 배열을 리터럴 방식으로 정의했다. let nums = [4, 5, 6]; nums 자체에는 메소드 함수가 정의되어 있지 않다. 하지만 우리는 nums.sort, nums.map, nums.filter, nums.reduce 등의 메소드를 자유롭게 사용할 수 있다. 그 이유는 무엇일까? 배열은 이렇게 new 키워드를 이용하여 만들 수도 있다. let nums = new Array(4, 5, 6); nums; // [4, 5, 6] 자세히 보니 어디서 많이 본 것 같다. 클래스로 인스턴스 객체를 만들 때에도 new 키워드를 쓴다! nums는 Array라는 클래스로 새롭게 만든 일종의..

MDN 등 여러 곳에서 자바스크립트를 '프로토타입 기반의 동적 언어'로 설명하고 있다. 프로토타입은 자바스크립트를 설명할 때 빠지지 않는 개념이기에 잘 이해하는 것이 중요하다. 모든 객체는 자신의 부모와도 같은 프로토타입을 가지고 있으며 이것과 연결되어 있다. 객체가 생성될 때 그 객체의 생성 방식에 따라 prototype 객체도 같이 생성된다. class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = ..

객체 지향 프로그래밍 (Object Oriented Programming, OOP) 초기의 C와 포트란 같은 언어는 절차적 언어이다. 절차적 언어는 순차적인 명령의 조합으로 작성된다. 절차 지향 관점에서는 프로그램을 명령어 또는 함수의 목록으로 본다. (딥다이브 260페이지) 객체 지향은 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론이다. 현실 세계의 사물들은 각각의 속성과 기능을 가지고 있으며, 이는 각 사물을 구분하는 단서가 된다. 객체 지향 관점에서는 프로그램을 객체의 집합으로 표현하며, 클래스에 데이터와 기능을 한 곳에 묶어서 처리한다. 객체 지향 언어에는 Java, C++, C# 등이 있다. 자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성이 가능하다. 객체 지향에는 네 가..

클래스(class)는 일종의 청사진이고, 청사진을 이용해 만든 새로운 객체가 인스턴스(instance)이다. 코드로 보기 // ES6 문법을 기반으로 작성한 Student 클래스 class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = new Student('김철수', 3, 'male'); chulsoo; // Student {name: '김철수', grade: 3, gender: 'male'} chul..