javascript 14

💡 클로져

✔️ 렉시컬 스코프 ‘’자바스크립트 엔진은 함수를 어디서 호출했는지가 아닌, 함수를 어디서 정의했는지에 따라서 상위 스코프 참조를 결정한다’’ 함수의 상위 스코프는 함수가 정의된 위치에서 결정되고, 변하지 않는다(정적 스코프) 실행 컨텍스트 개념을 적용시켜 보면 함수가 호출되어 실행 컨텍스트가 생성되고, 그 함수 렉시컬 환경의 외부 렉시컬 환경에 할당할 참조값을 결정한다는 것과 같은 의미이다. 이 참조값은 함수가 평가되는 시점에서 함수의 위치(환경)에 따라 결정된다, 이것이 렉시컬 스코프 ✔️ 자바스크립트 함수 내부 슬롯 [[Environment]] 렉시컬 스코프가 가능하려면, 함수가 호출되는 위치와 상관없이 상위 스코프에 대한 참조값을 기억하고 있어야 한다. "함수 객체 내부슬롯 [[Environmen..

javascript/DeepDive 2023.02.01

[Js 딥다이브] 15. let, const

📌 var 키워드의 단점 1. 변수의 중복 선언 허용 var x = 10; console.log(x); var x = 20; console.log(x); 이미 선언되고 초기화까지 완료된 변수 x 의 중복선언을 허용한다. 전역변수가 의도치않게 값이 변경되면 에러를 발생시킬 가능성이 매우 높다. 2. 함수 레벨 스코프 var x = 1; if(true){ var x = 10; } console.log(x); 함수 레벨 스코프에서 선언한 변수가 아니면, 스코프를 생성하지 않고 전역변수로 취급한다. 이 문제 역시 의도치 않게 변수 값을 변경시킨다. 3. 호이스팅 console.log(x); var x = 1; 런타임 이전 자바스크립트 엔진에 의해서 선언문이 제일 선두로 끌어 올려지고 undefined 로 초기화..

javascript/DeepDive 2022.11.14

[Js 딥다이브] 14. 전역변수의 문제점

변수는 유효범위(스코프)와 생명주기를 가진다. 📌 변수의 생명주기 변수는 선언에 의해서 생성되고 할당에 의해서 값을 가진다. 식별자(변수) 는 값이 저장된 메모리 주소를 식별한다. 만약 변수에 생명주기가 없다면 프로그램이 종료되기 까지 계속 메모리 공간을 사용하게 되고 이 변수가 사용되지 않는다면 메모리 공간을 낭비하게 된다. 변수는 자신이 선언된 위치(스코프)에서 생성되고 자신이 선언된 위치에서 소멸된다. 1️⃣ 지역변수 var sentence = "this is global variable"; function foo(){ var x = 10; console.log(sentence); // ? var sentence = "this is global variable"; return x; } foo(); ..

javascript/DeepDive 2022.11.10

[Js 딥다이브] 13. 스코프

1. 스코프 ? 자바스크립트의 스코프는 다른 언어들과 구별되는 특징이 있다. var, let, const 키워드로 선언한 변수들의 스코프는 각각 다르게 동작한다. // 매개변수로 정의한 x, y 는 함수 내부에서만 참조할 수 있다. // 매개변수의 스코프는 함수 내부이다. function add(x, y){ return x + y; } console.log(add(2, 4)); // 6 console.log(x, y); // ReferenceError : x is not defined. 변수는 선언된 위치에 의해서 유효 범위가 결정된다. 유효 범위란, 다른 곳에서 쓰인 코드가 선언한 변수를 참조할 수 있는 범위를 말한다. 스코프는 변수의 유효한 범위를 말하는 것이다. 즉, 선언된 변수가 어디까지 참조될 ..

javascript/DeepDive 2022.11.07

[Js 딥다이브] 12. 함수 (2)

3. 함수 호출 📌 매개변수와 인수 자바스크립트는 동적 타입 언어이기 때문에, 함수를 정의할때 사용하는 매개변수와 호출할 때 사용하는 인수의 타입과 갯수에 제한이 없다. 인수의 갯수가 매개변수의 갯수보다 많거나 적더라도 에러는 발생하지 않는다. function add(x, y){ return x + y; } console.log(add(2, 4)); // 6 // 인수가 부족한 경우 매개변수 y에 할당된 값이 없으므로 undefined console.log(add(2)); // NaN // 초과된 인수는 arguments 객체에 보존된다 console.log(add(2, 4, 10)); // 6 자바스크립트는 동적 타입 언어이기 때문에, 함수를 정의하는 시점에 매개변수의 타입을 결정할 수 없다. 따라서 ..

javascript/DeepDive 2022.11.06

[Js 딥다이브] 12. 함수 (1)

📌 Js 에서 함수 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this 바인팅, 프로토타입, 모듈화와 깊은 관련이 있기 때문에 js 함수는 정말 중요한 개념이다! 프로그래밍에서 함수를 사용하는 이유? var x = prompt(); var y = prompt(); if (Number(x) === Number(y)){ console.log(true) }else{ console.log(false) } function is_same(a, b){ return Number(a) === Number(b) } console.log(is_same(x, y)) 함수의 가장 큰 장점은 코드의 재사용이다. 함수 없이 두개를 비교해보는 경우를 생각해보면 if / else 를 반복적으로 써야하지..

javascript/DeepDive 2022.11.05

[DEEP DIVE] 11. 원시 vs 객체

원시 vs 객체 원시 : 원시 값을 변수에 할당하면 변수가 가르키게 되는 메모리의 주소에 실제 값이 저장된다. 이 변수를 다른 변수에 할당하면, 원시 값이 복사되어 전달된다 객체 : 객체를 변수에 할당하면 변수가 가르키게 되는 메모리의 주소에 참조 값(객체를 저장하고 있는 메모리의 첫번째 주소)이 저장된다. 이 변수를 다른 변수에 할당하면, 참조 값이 복사되어 전달된다 1. 원시 값 원시 값은 변경 불가능한 값이다. 즉, 한번 생성된 원시 값은 읽기 전용으로써 변경할 수가 없다. 🧐 '값을 변경할 수 없다.' 의 구체적인 의미가 무엇일까? var x = 10 x = 20 console.log(x) // 20 변수는 메모리 공간에서 주소를 식별하는 식별자이다. x는 10이 저장된 메모리의 주소를 기억하고,..

javascript/DeepDive 2022.11.02

[DEEP DIVE] 10. 객체 리터럴

1. 객체란? JS 는 객체 기반의 프로그래밍 언어이며, JS 를 구성하는 거의 모든 것이 "객체" 이다! 원시타입(Number, String, Boolean ...)의 데이터를 제외한 나머지는 모두 객체로 취급된다고 생각하면 편하다 !! 원시 타입의 데이터들은 변경 불가능 한 값이다 !! var x = 10 x = 20 console.log(x) // 20 이것은, x의 값이 변경된 것 처럼 보이지만 실제로는 10이 저장된 메모리 주소에 접근해서 10을 20으로 변경하는 것이 아니라, 새로운 메모리 주소에 값 20을 넣고 x가 그것을 가르키도록 하는것이다. 값을 변경하는 것이 아니라 x가 가르키는 메모리 주소가 변경된다. 10이 저장된 메모리 주소는 이제 아무런 변수도 가르키고 있지 않기 때문에 자동..

javascript/DeepDive 2022.10.28

[DEEP DIVE] 9. 타입 변환과 단축 평가

Js에서 표현식의 평과 결과로 만들어지는 모든 값은 타입을 가진다. 앞에서는 어떤 타입이 있는지, 타입이 왜 필요한지에 대해서 알아봤다. 이번에는 타입의 변환에 대해서 알아보자~ 1. 타입 변환? 📌 명시적 타입 변환 var age = 24; var str = age.toString(); console.log(typeof str, str); // String 24 console.log(typeof x , x); // number 24 위의 코드와 같이 코드 작성자가 의도적으로 변수의 타입을 변환하는 것을 명시적 타입 변환 이라고 한다. 📌 암묵적 타입 변환 var x = 10; console.log(typeof x, x) // number 10 var str = x + '' // 10 + '' conso..

javascript/DeepDive 2022.10.03

[DEEP DIVE] 8.제어문

일반적으로 코드는 위에서 아래로 순차적으로 실행 된다. 제어문을 사용해서 코드 실행순서를 인위적으로 변경할 수 있다, JUMP 시키는 것! 1. 블록문 0개 이상의 문을 중괄호로 묶은 것 {} 코드 블럭으로도 불림 Js는 블록문을 하나의 실행 단위로 취급 => 함수가 있고 그 함수를 호출 한다면 호출된 함수가 하나의 실행 단위가 된다 제어문, 함수를 정의할때 일반적으로 사용한다! 변수를 선언할때도 블록문을 사용해서 할 수 있지만 굳이... 하지 않는다 { var age = 24; } if (age >= 20){ console.log("성인 입니다."); }else{ console.log("성인 아닙니다."); } function sum(a, b){ return a * b; } 2. 조건문 불리언 값으로 ..

javascript/DeepDive 2022.09.30