[12/7] DAY3 자바스크립트 공부

3일 차 진도

 

 

 

 

 

스코프란

범위, 변수 혹은 함수가 갖게 되는 유효범위

 

 

 

- 전역 스코프(Global Scope) 

let sum = 0;

function add(num1, num2){
	sum = num1 + num2;
}

add(10,15);

console.log(sum); // 25

어디서든지 해당 변수에 접근 가능

 

 

 

- 지역 스코프(Local Scope)

function add(num1, num2) {
	let sum = num1 + num2;
	return sum;
}

console.log(sum);

 

지역을 벗어난 곳에서는 접근 불가능

 

 

 

const num = 10; // 전역 스코프

	function print() {
	const num = 100; // 지역 스코프
	console.log(`지역 스코프 ${num}` );
}

print();

console.log(`지역 스코프 ${num}`);

 

 

 

 

- 블록 스코프 : 같은 블록에서만 접근 가능한 범위를 말함

function print(){
	for (let i = 0; i < 10; i++){
		console.log(`블록 스코프 : ${i}`);	
	}
	console.log(i); // ERROR i is not defined
}

print();

블록 내부에 선언된 변수는 해당 블록에서만 접근 가능

 

 

 

 

 

let과 var의 차이

 

let num1 = 10;
let num1 = 100;

console.log(num1); // ERROR

let은 동일한 이름의 변수를 다시 선언할 수 없다

 

 

 

var num2 = 20;
var num2 = 200;

console.log(num2); // 200

var는 동일한 이름의 변수를 다시 선언할 수 있다. 기존에 선언한 동일한 변수는 무시된다.

 

var로 변수를 선언하면, 특정 변수가 이미 선언되었는지 확인하기 어려울 뿐만 아니라 어디서 어떻게 사용하는지 파악이 힘들어지며 오류를 발생할 수도 있다는 단점이 있다.

 

 

 

 

- var는 함수 스코프, let은 블록 스코프 

function print(){
	for (var i = 0; i < 10; i++){
	console.log(`블록 스코프 : ${i}`);
	}
	console.log(i); // 10
}

print();

 

위에서 오류가 났던 코드지만 for문의 변수 선언을 var로 고치니 오류 없이 실행된다.

 

 

 

 

함수 스코프 : 해당 함수의 내부에서만 접근 가능한 범위를 가짐

 

 

 

 

 

자바스크립트 호이스팅

호이스팅 : 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려 사용하는 작동방식

 

- 함수 호이스팅 

print();  // hello world

function print(){
    console.log(“hello world”);
}

 

함수의 선언보다 호출이 먼저 일어났음에도 오류가 없는 이유는 JS엔진이 코드를 해석하는 과정에서 print의 호출문을 선언문보다 아래에 작성된 코드로 받아들였기 때문이다.

 

함수의 선언문을 함수가 갖는 스코프의 가장 위쪽으로 끌어올려서 코드를 해석하는 JS 작동방식을 함수 호이스팅이라고 한다.

 

 

 

- 변수 호이스팅

console.log(num); // undefined

var num = 10;

 

변수 num 선언 전에, console.log를 먼저 출력했는데 오류가 아니라 undefined가 출력된다.

 

 

 

var num;

console.log(num); // undefined

num = 10;

이유는 코드를 위처럼 해석했기 때문이다.

 

변수에 값을 할당하는 것을 값을 초기화한다고 표현하기도 하는데, 변수 호이스팅은 변수 초기화문이 아니라, 변수 선언문만 해당 스코프의 최상단으로 올려 해석하는 방식이다.

 

그렇기에 num의 값에 undefined가 할당되어 코드 실행결과 undefined가 출력되게 된다.

 

 

 

console.log(num); // undefined
var num = 10;

console.log(num1); // error
let num1 = 10;

console.log(num2); // error
const num2 = 10;

 

동일한 코드를 let, const로 작성하면 에러가 나오는 것을 확인할 수 있다.

 

 

 

 

 

let, const에서 선언 전에 접근하면 에러가 나오는 이유

 

TDZ(Temporal Dead Zone)란 일시적인 사각지대이자, 변수를 사용하는 것을 허용하지 않는 공간을 말한다.

 

let, const는 호이스팅이 발생하지 않는 것이 아니라, 변수 스코프의 맨 위에서 변수의 초기화가 완료될 때까지 TDZ 공간에 존재하기 때문이다.

 

 

 

- let, const가 TDZ에 머무는 이유

 

var는 변수 선언 완료 시 메모리 공간을 미리 할당한다 하지만 let, const는 변수가 특정값으로 초기화 완료 된 이후, 메모리 공간을 할당한다.

 

즉 변수가 초기화될 때까지 메모리공간이 확보되지 않은 상태가 되어, 해당 키워드로 생성된 변수들은 변수를 사용할 수 없는 TDZ에 들어가게 되는 것이다

 

 

 

 

 

함수 생성 방법

 

- 함수 선언식

function print(){
	console.log(“hello world”)
}

 

 

- 함수 표현식

let print = function() {
	console.log(“hello world”);
};

 

 

 

함수 선언식 : 호이스팅 O

함수 표현식 : 호이스팅 X, 즉 선언문을 호출문보다 먼저 작성해야 함

 

 

 

함수 표현식을 화살표형 함수로 더 간단하게 나타낼 수 있다

const print = () => {
	console.log(“hello world”);
};

print();

화살표 함수는 위처럼 사용한다.

 

 

 

 

 

콜백함수

다른 함수에 매개변수로 넘겨준 함수

 

function start(name, callback) {
	console.log(`안녕하세요 ${name} 입니다.`);
	callback(); // finish();
}

function finish(){
	console.log(“감사합니다”);
}

start(“yongJin”, finish);

 

finish 함수처럼 다른 함수에 인수로 전달되는 함수를 callback 함수라고 한다.

 

 

 

 

 

객체

 

- 객체 생성 방법

 

1. 생성자

let person = new Object()

console.log(person); // {}

 

2. 객체 리터럴

let person = {};

console.log(person); // {}

 

 

 

객체의 프로퍼티는 객체의 중괄호 내부에 들어갈 값으로, key와 value 쌍으로 이루어진 데이터이다.

let person = {
	name : “이용진”,
	age : 24,
}

이렇게 작성된 name:”이용진” , age:24을 객체의 프로퍼티(속성)이라고 부른다.

 

객체의 value에는 어떤 값이 들어가도 상관없지만, 객체의 값을 찾을 때는 key 값을 통해 찾기에 key값은 고유해야 한다.

 

 

 

 

 

- 객체의 값 꺼내서 사용하기

let person = {
    name: “이용진”,
    age: 24,	
    pet : “cat”,
}

 

 

1. 점 표기법

console.log(person.name) // 이용진
console.log(person.age); // 24
console.log(person.pet); // cat

객체의 이름 뒤에 점을 찍고 객체의 key값을 입력하면 key 값에 해당하는 value 값을 가져온다.

 

 

 

2. 괄호 표기법

console.log(person[“name”]) // 이용진
console.log(person[“age”]) // 24
console.log(person[“pet”]) // cat

객체의 이름 뒤에 대괄호를 열어, key값을 작성하는 방법. 괄호 표기법 사용 시 대괄호 안에 큰 따옴표를 이용해서 문자열임을 명시해줘야 한다.

 

 

 

- 객체 프로퍼티 추가 및 수정

key 값이 없으면 생성, key 값이 있으면 해당 key의 value를 수정

 

1. 점 표기법

person.phone = “010-123-123”

 

2. 괄호 표기법

person.[“phone”] =  “010-123-123”

 

 

 

 

 

- const(상수)로 선언된 객체의 프로퍼티 값도 수정 가능하다.

const person = { name : “이용진”}

 

객체는 생성될 때 고유의 아이디를 가지게 되는데, 객체의 프로퍼티를 변경하는 것은 객체의 고유의 아이디를 변경하는 것이 아니기 때문이다

 

const person = { name : “이용진”}

person = {age : 24}

만약 위처럼 상수로 선언된 객체 자체에 새로운 프로퍼티를 저장하려 한다면 객체의 고유한 아이디를  변경하는 것이기에 에러가 나온다.

 

 

 

- 객체 프로퍼티를 삭제하기 위해서는 delete를 사용한다.

delete.객체이름.key값;
delete.객체이름[“key값”];

 

 

 

- 객체 프로퍼티가 함수일 때

const example = {
	content : “하이”,
	print : function(){
		console.log(“hello world”);
	}
}

 

해당 함수를 호출하기 위해서는 example.print();  또는 example[“print”]()를 사용하면 된다. 객체 프로퍼티의 값이 함수일 경우 이를 ‘메서드’라고 부른다

 

메서드는 객체 내부에 접근할 수 있는 특별한 기능이 있다.

 

 

 

const example = {
    content : “하이”,
    print : function(){
    console.log(`반갑다 ${this.content}`); // 반갑다 하이
	}
}

객체의 메서드에서는 this 키워드를 이용해서 자신이 속해있는 객체를 가리킬 수 있다.

 

*메서드 생성 시 주의점 : 화살표 함수가 아닌 function 키워드를 사용해야 한다 -> 화살표 함수는 자신이 속한 객체(this)를 가리키지 못한다.

 

 

 

 

 

[3일 차 QUIZ]

[1번 문제]

 

 

[1번 정답]

 

 

 

 

 

 

[2번 문제]

 

 

 

[2번 정답]