728x90 반응형 분류 전체보기77 [Javascript] 14장 전역 변수의 문제점 (deep dive) 전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 이번 장에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보자. 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기가 있다. 1. 지역 변수의 생명 주기 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 일반적으로 지역 변수의 생명 주기는 함수의 생명주기와 일치한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x.. 2022. 5. 24. [Javascript] 13장 스코프 (deep dive) 스코프란? 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어에서 기본적이며 중요한 개념이다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 이것이 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다. function add(x, y) { console.log(x, y); return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y);.. 2022. 5. 24. [Javascript] 12장 함수(2) (deep dive) 참조에 의한 전달과 외부 상태의 변경 // 매개변수 primitive는 원시 값을 전달받고, obj는 객체를 전달받는다 function changeVal(primitive, obj){ primitive += 100; obj.name = 'Kim'; } // 외부 상태 var num = 50; var person = { name: 'Lee' }; console.log(num); // 50 console.log(person); // {name: "Lee"} changeVal(num, person); console.log(num); // 50 console.log(person); // {name: "Kim"} 원시 타입 인수를 받은 매개변수 primitive의 경우 원시 값은 변경 불가능한 값이므로 직접 변경.. 2022. 5. 17. [Javascript] 12장 함수(1) (deep dive) 함수란 수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 또한 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다. // 함수 정의 function add(x, y){ // add기 함수 이름. x, y가 매개변수 return x + y; // x + y 가 반환값 } // 함수 호출 add(2, 5); //.. 2022. 5. 16. [Javascript] 11장 원시 값과 객체의 비교 (deep dive) 6장 데이터 타입에서 보았듯이 자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 구분된다. 원시 타입과 객체타입은 크게 세 가지 측면에서 다르다 1. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 2. 원시 값을 변수에 할당하면 메모리 공간에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 메모리 공간에는 참조값이 저장된다. 3. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다(값에 의한 전달). 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다(참조에 의한 전달). 원시 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 한번 생성된 .. 2022. 5. 16. [Javascript] 10장 객체 리터럴 (deep dive) 객체란? 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 객체는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 객체 리터럴에 의한 객체 생성 자바스크립트는 다양한 객체 생성 방법을 지원한다. 객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 이러한 객체 생성 방법 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다. 객체 리터럴은 중괄호({...})내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다. var person = { name:.. 2022. 5. 13. [Javascript] 9장 단축평가 (deep dive) 단축 평가 'Cat' && 'Dog' // "Dog" 'Cat' || 'Dog' // "Cat" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자인 'Cat'은 Truthy 값이므로 true로 평가되고, 두 번째 피연산자를 평가해 보아야 표현식을 평가할 수 있다. 이 때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자인 'Dog'를 문자열 그대로 반환한다. 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 논리합 연산자 또한 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자인 'Cat'은 true로 평가되고 이 때 두 번째 피연산자를.. 2022. 5. 13. [Javascript] 9장 타입 변환 (deep dive) 타입 변환 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라 한다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환 되는 것을 암묵적 타입 변환 혹은 타입 강제 변환이라 한다. 명시적 타입 변환이나 암묵적 타입 변환 모두 기존의 값을 직접 병경하는 것은 아니다. 기존 값을 사용해 다른 타입의 새로운 값을 생성하는 것이다. 암묵적 타입 변환 1. 문자열 타입으로 변환 + 연산자는 연산자 파트에서 보았듯이 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다. 템플릿 리터럴 또한 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환을 한다. // 템플릿 리터럴 `1 + 1 = ${1 + 1}` // "1 +.. 2022. 5. 11. [Javascript] 8장 제어문 (deep dive) 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 제어문을 사용하면 위에서 아래 방향으로 순차적으로 진행되는 코드의 흐름을 제어하여 변경할 수 있다. 하지만 인위적으로 코드의 흐름을 변경할 경우 가독성을 해치는 경우가 생길 수 있다. 나중에 살펴볼 forEach, map, filter, reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려 노력한다. 제어문을 바르게 이해하는 것이 코딩 스킬에 많은 영향을 주기 때문에 확실히 이해해보자. 블록문 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다. 일반적으로 제어문이나 함수를 정의할 때 사용한다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문.. 2022. 5. 9. 이전 1 ··· 5 6 7 8 9 다음 728x90 반응형
