JavaScript 200제15 객체 속성 기술자 이해하기 예제 ⬇️ let user = { name: "jeado" }; let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); console.log(descriptor); let user2 = {}; Object.defineProperty(user2, "name", { value: "jeado", enumerable: true, configurable: true, writable: false }); console.log(user2.name); user2.name = "bbo"; console.log(user2.name); let user3 = { name: "jeado", toString() { return this.name; } }; Object.de.. 2022. 7. 28. 클로저 이해하기 예제 ⬇️ function createCounterClosure() { let count = 0; return { increase: function() { count++; }, getCount: function() { return count; } }; } const counter1 = createCounterClosure(); const counter2 = createCounterClosure(); counter1.increase(); counter1.increase(); console.log('counter 1의 값 :' + counter1.getCount()); // counter 1의 값 :2 counter2.increase(); console.log('counter 2의 값 :' + counter.. 2022. 7. 28. 함수 호이스팅 이해하기 자바스크립트에서 함수를 선언하기 전에 호출이 가능하다. 이러한 현상을 호이스팅 이라고 한다. 호이스팅을 직역하면 '끌어올리기'인데 함수가 실제 호출하기 이전으로 끌어 올라간 것처럼 동작하기 때문이다. 예제 ⬇️ // 함수 선언문 hello(); function hello(){ console.log('안녕하세요'); } 결과 ⬇️ 안녕하세요 예제 ⬇️ // 함수 표현식 hello2(); var hello2 = function() { console.log('안녕하세요'); } 결과 ⬇️ TypeError: hello2 is not a function 함수 표현식을 통해 변수에 할당하여 호출하게 되면 TypeError가 발생한다. 실제로 hello2 이름으로 선언된 변수는 호이스팅이 이루어졌고 여기에는 und.. 2022. 7. 28. 스코프 이해하기 스코프는 유효 범위로써 변수와 매개변수가 어디까지 유효한지를 나타낸다. 예를 들어 코드에서 a라고 작성했을 때 a라는 식별자가 어디를 참조할지, 실제 값이 무엇인지를 찾을 때 스코프를 활용하여 찾게 된다. 자바스크립트는 기본적으로 전역과 함수 단위로 스코프를 생성한다. 함수 안에서 선언된 변수는 함수 블록 안에서만 접근이 가능하다. 그리고 전역에 선언한 변수들은 코드 어디에서든 접근이 가능하다. 예제 ⬇️ var a = 10; console.log(a); // 10 function print() { var b = 20; if (true) { var c = 30; } console.log(c); // 30 } print(); console.log(b); // console.log(b); // ^ // Re.. 2022. 7. 27. 함수 나머지 매개변수 이해하기 ES6에서 새로 추가된 나머지 매개변수는 매개변수를 정의할 때 정해지지 않은 매개변수들을 정의할 수 있게 한다. arguments 객체와 유사하나 arguments 객체는 함수에 전달되는 모든 전달인자를 포함하는 반면에, 나머지 매개변수는 정해지지 않은 나머지를 의미한다. 나머지 매개변수는 arguments 객체와 다르게 매개변수를 작성하는 곳에 작성하고, 다른 매개변수와의 차이점을 두기 위해 ... 연산자와 함께 작성한다. function(parameter, ...restParameter){ // arguments 객체는 나머지 매개변수와 다르게 함수 몸통에서만 사용한다. } arguments 객체와 나머지 매개변수와의 가장 큰 차이점은 arguments 객체는 배열이 아니지만 나머지 매개변수는 배열이.. 2022. 7. 27. 함수 기본 매개변수 처리하기 ES6에 새롭게 추가된 기본 매개변수는 매개변수를 정의할 때 기본으로 할당된 인자값과 함께 작성하는 매개변수를 말한다. 값을 할당하는 연산자인 =를 이용하여 정의하게 된다. 예제 ⬇️ function drawChart(width = 200, height = 400){ console.log(`${width} X ${height} 차트를 그립니다.`); }; drawChart(100); // 100 X 400 차트를 그립니다. drawChart(); // 200 X 400 차트를 그립니다. function drawChart2(width=200, height= width/2){ console.log(`${width} X ${height} 차트를 그립니다.`); }; drawChart2(300); // 300 .. 2022. 7. 27. arguments 객체 이해하기 자바스크립트 함수는 매개변수를 가진다. 여기서 매개변수와 같이 사용되는 용어가 있는데 바로 전달 인자(argument)이다. 매개변수가 함수 선언 시 작성되는 변수라면 전달 인자는 함수가 호출될 때 전달되는 값이다. 자바스크립트는 전달 인자의 개수와 매개변수의 개수가 달라도 에러를 발생하지 않는다. 그래서 매개변수와 무관하게 함수호 출시 더 많은 인자를 전달할 수 있다. 매개변수 외에 함수에서만 사용 가능한 특별한 객체를 제공한다 바로 argument 객체이다 예제 ⬇️ function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i] }; console.log(arguments instance.. 2022. 7. 27. 예외처리 하기 예외 처리 시 에러 종류는 두 가지다 예상치 못한 에러 : try-catch-finally문 개발자가 의도한 에러 : throw문, try-catch-finally문 * 개발자가 의도한 에러란? 코드에서 잘못될 가능성을 예상하고 발생시키는 에러 throw문 예제 ⬇️ function checkNumber(val) { // 숫자형 값 여부를 확인하는 함수를 선언한다. if (typeof val !== 'number') throw '유효하지 않은 값입니다.'; // typeof val을 통해 숫자형 값이 아닌 경우, throw 문을 통해 함수 블록을 빠져나간다. console.log('숫자형 값으로 확인되었습니다.') // 숫자형이 확인되면 출력되는 문장이다 } checkNumber(100); // 슷자형 .. 2022. 7. 27. 심볼형 이해하기 예제 ⬇️ const symbol = Symbol(); // 심볼(Symbol)은 함수 호출을 통해 생성이 가능하다. new 키워드를 통한 호출(new Symbol())을 할경우 에러! const hello = Symbol('hello'); console.log(Number(3) === Number(3)); // true console.log(Symbol('symbol') === Symbol('symbol')); // false console.log(Symbol() === Symbol()); // false console.log(typeof Symbol()); // symbol // Symbol을 함수 호출 시 값을 전달할 수 있는데 이 값은 디버깅 용도이며 고유한 Symbol 값은 만들어 지지 않는다 .. 2022. 7. 27. ES6의 향상된 객체 문법 - 비구조화 할당 비구조화 할당(Destructuring Assignment)이란? 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다. ES6 이전에는 변수 하나에 값 하나를 일일히 할당해야 했으나 ES6부터는 비구조화 할당을 통해 손쉽게 값을 할당할 수 있게 되었다. 중괄호 {} 안에 속성 이름을 넣어 객체의 여러 속성을 한 번에 가져올 수 있다. 예제 ⬇️ let obj = { a: 1, b: 2, c: 30, d: 44, e: 5 } let {a, c} = obj; console.log(`a >>> ${a}`); console.log(`c >>> ${c}`); // obj 객체에는 a, b, c, d, e 속성이 정의되었다. 여기서 비구조화를 통해 속성 a와 c속성값을 가져와 // 변수에 할당한다. 중괄호 안에 원하.. 2022. 7. 27. ES6의 향상된 객체 문법 - 속성 계산명 속성 계산명(Computed Property Name)은 속성 이름을 정의하는 다른 방법이다. 대괄호 []안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있다. 예제⬇️ let obj = {}; // 객체를 변수 obj에 대입한다. for (let i = 0; i < 4; i++) { // 변수 i가 0부터 3까지 반복하는 for문을 작성한다. obj['key' + i] = i; // 객체 obj에 속성을 추가한다. 속성 접근자 []를 활용하여 계산된 속성명을 정의한다. // 이때 속성 명은 key0, key1, key2, key3으로 숫자가 증가하도록 정의한다. } console.log(obj); // 객체 obj를 콘솔 출력한다. let profile = 'chloe:30'; //.. 2022. 7. 27. ES6의 향상된 객체 문법 - 단축 속성명 ES6에 새로 추가된 자바스크립트 기능인 단축 속성명을 활용하여, 객체의 속성을 좀 더 간단하게 정의할 수 있다. 기존에는 객체 속성을 리터럴로 정의하기 위해서는 {키 : 값}으로 작성해야 했지만 단축 속성명은 변수가 미리 준비되어 있는 경우 활용 가능하며, 변수명으로 속성의 키와 값을 한번에 정의할 수 있다, 이는 객체 리터럴 선언 시 코드를 더 짧고 가독성 있게 만들어 준다. {변수명} 예제⬇️ let address = 'Seoul'; let members = {}; let addFamily = function(age, name, role){ this.members[role] = {age, name}; }; let getHeadcount = function(){ return Object.keys(th.. 2022. 7. 27. 이전 1 2 다음
