seohyun han

13장_스코프 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되고, 이것을 스코프라고 한다. 즉 스코프는 식별자가 유효한 범위를 말한다. var x = 'global'; function foo(){ var x = 'local'; console.log(x); //local } foo(); console.log(x); //global 코드의 가장 바깥영역과 foo 함수 내부에 같은 x 라는 변수를 선언했다. 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것이지를 결정해야하는데 이를 식별자 결정이라고 한다. 식별자 결정을 할 때 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지를 결정한다. 자바스크립트 엔전은..

10장_객체 리터럴 원시값은 변경불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 -개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 : 객체의 상태를 나타내는 값 메셔드 : 프로퍼티를 참조하고 조작할 수 있는 동작 객체 리터럴에 의한 객체 생성 자바와 같은 클래스 기반 객체 지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자를 사용하여 인스턴스를 생성하는 방식으로 객체를 생성한다. 하지만 자바스크립트는 프로토타입 기반 객체 지향 언어로서 클래스라는 개념이 없고 별도의 객체 생성 방법이 존재한다. 객체 리터럴에 의한 객체 생성은 가장 일반적인 자바스크립트의 객체 생성 방식이다. 객체 리터럴은 중괄호({...}) 내에 0개 이사의 프로..

8장_제어문 블록문 블록문은 0개 이상의 문을 중괄호{}로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행단위로 취급한다. 문의 끝에는 세미콜론을 붙이는 것이 일반적이나 블록문은 자체종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다 { var foo = 10 }조건문 조건문은 주어진 조건식의 평가결과에 따라 코드블록의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다. if else 문 if else 문은 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. if문의 조건식은 boolean 값으로 평가되어야 한다. (그렇지 않을경우 자바스크립트 엔진에 의해 암묵적으로 boolean 값으로 변환된다) 대부분의 if else 문은..

모던 자바스크립트 Deep Dive [북스터디] 자바스트립트의 기본 개념과 동작원리 / 이웅모지음 개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 용어의 의미를 정확히 설명할 수 없다면 개념을 제대로 이하히지 못한 경우가 많다. 4장_변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 메모리 컴퓨터는 메모리를 사용해 데이터를 기억하고, CPU 를 사용해 연산한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트이다 각 메모리 셀은 고유의 메모리 주소를 갖는다 메모리에 저장되는 데이터는 2진수로 저장된다 10 + 20 10 과 20은 메모리 주소에 기억되고 CP..

▶ Optional Chaining Js 의 Optional Chaining 은 객체 속성이나 메소드에 접근할 때 해당 객체가 null 또는 undefined 인 경우 발생하는 TypeError 예외를 방지할 수 있는 기능이다. name, address 정보를 가진 person 객체가 있다. const person = { name: "John", address: { city: "New York", state: "NY" } }; person 객체에서 address 속성의 city 값을 가져오는 코드를 작성하고자 할 때, 일반적으로는 다음과 같은 코드를 작성할 수 있다. const city = person.address.city; 하지만 ! 만약 person 객체가 null 또는 undefined 라면 ....

※ Generator - 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 - Itarable 이면서 iterator 이다 ▶ 기본 구조 function 옆에 * 을 붙이고 yield 키워드 사용 - yield 에서 함수의 실행을 멈출 수 있다 function* fn (){ console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return "finish"; } const a = fn(); fn() 함수를 실행하면 generator 객체가 반환됨 ▷ next() a.next(); // console : 1 // {value : 1, done : false} 를 실행하면 가장 가까운 yield 문을..

async await 를 사용하면 promise 에 then 메서드를 사용하여 체인형식으로 호출하는 것 보다 가독성이 좋아짐 ▶ async function 앞에 사용 async 를 붙이면 해당 함수는 항상 Promise 를 반환. async function getName(){ return "Mike"; } console.log(getName()); //Promise{fulfilled : "mike"} 함수 호출 후 then 사용 가능 async function getName(){ return Promise.resolve("Tom"); } getName().then(name=>{ console.log(name); //Tom }); 함수 내부에서 예외가 발생하면 rejected 상태가 반환된다. catch ..

※ Promise 사용자가 상점에 물건을 구매하러갔다. 찾는 물건이 없다. 물건이 들어올때 까지 계속 상점에 물건이 있는지 물어봐야할까 ? => NO 상점에 물건이 들어오면 연락달라고 전화번호를 남기고 간다 = > YES => Promise ▶ 프로미스 생성 ▷ 기본형태 const pr = new Promise((resolve, reject)=>{ }); resolve : 성공한 경우 실행 reject : 실패했을 때 실행 = > 이렇게 어떤일이 완료된 후 실행되는 함수를 콜백함수 라고한다. new Promise 생성자가 반환하는 객체는 state 와 result를 프로퍼티로 갖는다 어떤 일이 성공해서 resolve 가 호출되면 state : fulfilled result : value 가 되고 실패해서..

setTimeout : 일정시간이 지난 후 함수 실행 setInterval : 일정시간 간격으로 함수를 반복 clearTimeout : 일정시간 후 실행 예정인 함수를 없앰 (setTimeout 무효화) setTimeout(실행될 함수, 시간); 인수가 더 필요하다면 시간 뒤에 적어준다 ex ) setTimeout(showName, 3000, 'sian'); - 여기서 세번째 인자 sian은 3초 후 실행될 함수 showName 의 인자이다 function showNmae(name){ console.log(name); } ※ call & apply & bind - 함수 호출 방식과 관계없이 this 를 지정할 수 있다 ▶ call call 메서드는 모든 함수에서 사용할 수 있으며, this 를 특정값으로..

구조분해할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 ▶ 배열 구조분해 let [x,y] = [1,2]; //일반 let user1 = users[0]; let user2 = users[1]; let user3 = users[2]; //구조분해할당 let users = ['sian','jian','wian']; let str = "한-서-현"; let [name1,name2,name3] = str.split('-'); console.log(user1); //한 console.log(user2); //서 console.log(user3); //현 let [a,b,c] = [1,2]; //a = 1 //b = 2 //c = undefined 이런 undefined 를..