본문 바로가기

JavaScript

 (36)
실행 컨텍스트 # 소스코드의 타입 소스코드(실행 가능한 코드)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드 함수 코드 함수 내부에 존재하는 소스코드 eval 코드 빌트인 전역함수인 eval함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 모듈 내부에 존재하는 소스코드 ## 소스코드를 4가지 타입으로 구분하는 이유 → 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다. 전역, 함수, eval, 모듈 코드가 각각 평가가 되면, 전역, 함수, eval, 모듈 실행 컨텍스트가 생성된다. # 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 2개의 과정, '소스코드의 평가'와 '소스코드의 실행' 과정을 나..
실행 컨텍스트 스택 const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); }; bar(); }; foo(); 위 예제는 소스코드의 타입으로 분류할 때, 전역코드와 함수 코드로 이루어져 있다. 자바스크립트 엔진은 먼저 1) 전역 코드를 평가하여 실행 컨텍스트를 생성한다. 그리고 2) 함수가 호출되면 3) 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다. 코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트 스텍에는 다음과 같이 실행 컨텍스트가 추가되고, 제거된다. 1/ 전역코드의 평가와 실행 1) 전역 코드 평가 자바스크립트 엔진은 먼저 전역코드를 평가 → '전역 실행 컨텍스트' 생성 → 실행 컨텍스트 스택..
2차원 배열에서의 index error 처리 2차원 이상의 배열에서 인덱스의 범위를 벗어나는 경우, 에러가 발생한다. 공원산책 문제를 풀면서 계속 error가 났다. 풀다가 도저히 해결이 나지 않아 질문을 올리니 index error가 난다는 답변이 달렸다. index error가 도대체 뭔가 싶어 구글링을 하였다. # 2차원 배열에서 인덱스를 벗어나면? - 인덱스를 벗어나서 에러가 발생하는 상황을 확인해보자. - 2차원 배열에서 두 가지의 경우를 살펴보자. 1/ 배열의 두 번째 인덱스값을 벗어난 경우 → arr[0][5] 2/ 배열의 첫 번째 인덱스값을 벗어난 경우 → arr[-1][0] const arr=[[1, 2, 3, 4, 5], [3, 7, 1, 6, 1], [7, 2, 5, 3, 4], [4, 3, 6, 4, 1], [8, 7, 3, ..
[JavaScript] 옵셔널 체이닝 (?.) 옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. # 옵셔널 체이닝이 필요한 이유 예시 1 user가 여러명 있다고 해보자. 그 중 몇 명은 address 정보를 가지고 있지 않다. 이럴때 user.address.street을 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; alert(user.address.street); // TypeError:Cannot read property 'street' of undefined // user.address의 값이 undefined이므로 예시 2 다른 사례로는, 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 ..
[JavaScript] 논리적 AND 연산자 (&&) # 설명 - 모든 불리언 피연산자가 true가 되었을 때 해당 피연산자의 집합은 true가 된다. - 왼쪽에서 오른쪽으로 평가할 때 처음으로 만나는 falsy한 피연산자의 값을 즉시 반환한다. [ falsy한 값의 예시 ] false null NaN 0 빈 문자열("" or '' or ``) undefined - 모두 truthy값이라면 마지막 피연산자의 값을 반환한다. const a = 3; const b = -2; console.log(a > 0 && b > 0); // false // b > 0의 값이 false이므로, 값 그대로 false 반환 - AND 연산자는 non-Boolean 값을 보존하고, non-Boolean값 그대로 반환한다. result = "" && "foo"; // ""이 할당..
널 병합 연산자 ?? (Nullish coalescing operator) # 널 병합 연산자란? - 왼쪽 피연산자가 null 또는 undefined일때 오른쪽 피연산자를 반환. - 왼쪽 피연산자가 null 또는 undefined이 아니면 왼쪽 피연산자를 반환하는 '논리 연산자' # 논리 연산자 OR과의 차이점 논리 연산자 OR (||) : 왼쪽 연산자가 null 또는 undefined 뿐만 아니라 falsy값('' 또는 0 등)에 해당할 경우 오른쪽 피연산자를 반환. const foo = null ?? 'default string'; console.log(foo); // 'default string' const baz = 0 ?? 42; console.log(bas); // 0 const result = 0 || 42; console.log(result); // 42 # 특징..
표현식과 문 # 값 - 식(표현식)이 평가(evaluate)되어 생성된 결과 # 평가 - 식을 해석해서 값을 생성하거나 참조하는 것 ex: 아래 예제의 '식'은 '평가'되어 숫자 '값' 30을 생성한다. //10 + 20이라는 식은 평가되어 숫자 값 30을 생성. 10 + 20; // 30 모든 값은 데이터타입을 가지며, 메모리에 2진수, 즉 bit의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 '숫자'로 해석하면 65, '문자'로 해석하면 'A'. - 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 따라서 변수에 할당되는 것은 '값'이다. //변수에는 10 + ..
스코프 의미, 규칙 및 종류 컴퓨터 공학, 그리고 자바스크립트에서의 스코프의 의미 : "변수의 유효범위" # 스코프 규칙 1 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다. 하지만 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능하다. 1. 예제로 알아보는 스코프(1) let username = 'kimcoding'; if (username) { let message = `Hello, ${username}!`; //username을 바깥 스코프에서 가져올 수 있으므로 정상적으로 출력. console.log(message); // 'Hello, kimcoding' } console.log(message); // ReferenceError. message는 안쪽 스코프(중괄호 안쪽)에 선언되어있으므로, 바깥쪽..

티스토리툴바