Self-study/Javascript

[JavaScript] 기본형과 참조형

Munyoung 2023. 8. 31. 12:13

참조형 복사하기(Reference Type Copy)

let number1 = [1,2,3];
let number2 = number1; 

number2.push(4); 

console.log(number1); 
console.log(number2); 

// 이 경우, 참조형은 주소값을 복사하기 때문에, number1과 number2가 동일한 리턴값을 가짐.

//다르게 하고 싶다면 
let number1 = [1,2,3];
let number2 = number1.slice(); 

number2.push(4); 

console.log(number1); 
console.log(number2);

객체의 경우, 

let course1 = {
	title: 'comp1537'; 
    language: 'JavaScript', 
}; 

let course2 = Object.assign({}, course1); 

course2.title = 'comp2537'; 

console.log(course1); 
console.log(course2);

// for-in구문 활용 

function cloneObject(object){
	let temp = {}; 
    for(let key in course1){
	temp[key] = object[key]; 
}
return temp;
}

let course1 = {
	title: 'comp1537'; 
    language: 'JavaScript', 
}; 

let course2 = cloneObject(course1); 

course2.title = 'comp2537'; 

console.log(course1); 
console.log(course2);

 

 

 

var의 문제점

1. 중복 선언 허용

똑같은 이름으로 변수를 한 번 더 선언하게 되면, 에러가 발생하는 것이 아니라 그냥 기존의 변수를 덮어써 버리는 문제가 발생한다. 

var myVariable = 'codeit';
console.log(myVariable);
var myVariable = 'Codeit!';
console.log(myVariable);

//결과값: codeit, Codeit!

2. 함수 scope의 문제

let과 const 키워드로 선언한 변수는 if, for, function 등등 어떤 키워드와 관계없이 코드블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope을 갖게 되지만, var 키워드로 선언한 변수는 scope가 function에서만 구분돼 있다. 

즉, 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할을 하게 될 수 있다. 

// 1. let의 경우 

{
  let x = 3;
}

function myFunction() {
  let y = 4;
}

console.log(x);
console.log(y);

//결과값: Uncaught ReferenceError: x is not defined

//2. var의 경우 
{
  var x = 3;
}

function myFunction() {
  var y = 4;
}

console.log(x);
console.log(y);

//결과값: 3, Uncaught ReferenceError: y is not defined

3. 끌어올림(Hoisting)

let과 const는 선언 전에 사용될 수 없다. 하지만, var 변수는 함수 스코프를 기준으로 선언되기 전에 접근이 가능하다. 

console.log(myVariable);
var myVariable;

//결과값: undefined

'Self-study > Javascript' 카테고리의 다른 글

[JavaScript] 문자열심화  (0) 2023.08.30
[JavaScript] 숫자표기법  (2) 2023.08.29
[JavaScript] 배열(Array)  (2) 2023.08.26
[JavaScript] 객체와 프로퍼티  (0) 2023.08.26
[JavaScript] 제어문  (0) 2023.08.25