본문 바로가기

JavaScript

 (35)
실행 컨텍스트 # 소스코드의 타입 소스코드(실행 가능한 코드)를 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"; // ""이 할당..
표현식과 문 # 값 - 식(표현식)이 평가(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는 안쪽 스코프(중괄호 안쪽)에 선언되어있으므로, 바깥쪽..
화살표 함수의 this # 일반함수의 this 먼저, 일반함수 내부의 this는 어떻게 동작하는지 살펴보자. const object = { name: '별코딩', main: function () { console.log(this); }, }; object.main(); // object 객체 main이라는 메서드가 있다. - 메서드 : 객체의 속성으로 넣어진 함수 main이라는 함수는 function키워드를 사용한 일반 함수. 이렇게 function키워드를 사용해서 정의된 일반함수의 경우에는 함수를 어떻게 호출하느냐에 따라서 this값이 바뀐다. this는 함수를 호출한 객체가 된다. 그렇기 때문에 이 함수를 어떤 객체가 호출했느냐에 따라 this값이 달라진다. main함수를 호출했더니, main함수 안에 this값은 obje..

티스토리툴바