TIL 7일차(javascript공부 -데이터 타입)

어제 학습했던 6-2일차까지 작성이 끝나고, 오늘 배운 7일차를 정리해보고자한다.

우선 시작하면서 ES6 문법을 공부하게 되었다.

ES6문법은 2015년도에 개발되어 최신인 javascript문법이다.

함수를 등록하는 방법이 추가되었는데 기존 함수를 

function add()

{

//로직

}

과 같이 작성했다면

//arrow function

var add = (x) =>

{

    return 1

}

var add = (x) => 1;

arrow function을 이용하여서 간단하게 나열할수 있다. x자리에는 매개변수가 들어온다.

밑에 var add= (x) => 1; 과 같이 한줄로 간단하게 표현할 수도 있는데 이것은 return 1과 같이 한줄로 결과 값이 나오는 경우에만 가능하다.

 

그리고 데이터 영역과 변수 영역에 대해서 배웠다.

변수와 상수의 차이는

변수영역에 값(주소)을 바꿀 수 있냐 없냐로 나누고, 불변하냐 안하냐는 데이터 영역에 메모리 값이 변경되냐 안되냐로 나눌 수 있었다.

var a = 'abc'; 라는 값이 a = 'abcdef'라는 값으로 변경되는 것은 데이터영역 자체가 바뀌는 것이 아닌 변수 영역의 데이터영역 주소 값만 바꿔준다. 즉 위와 같은 방법은 변수이면서, 불변하다라고 말할 수 있다. 그리고 쓸모가 없어진 'abc'의 데이터 영역은 JS 가비지 컬렉터가 비워준다.

참조형 데이터는 또 다른 방법으로 저장되는데

var obj1 = {

    a: 1,

    b: 'bbb',

}

다음과 같은 코드가 저장되는 순서

변수영역)주소	1001	1002	1003	1004	1005
데이터	obj1/@7103~7104	obj2/@7103~7104
데이터영역)주소	5001	5002	5003	5004	5005
데이터	1	'bbb'	2	10
obj1별도영역)주소	7103	7104	7105	7106	7107
데이터	a/@5001	b/@5002

위의 표와 같이 5001번 , 5002번에 주소에 저장된 obj1객체 주소값을 변수영역인 obj객체가 가지는것으로 표현가능하다.

obj1의 a의 값을 2로 바꾸고 싶다면 7103주소에 있는 a의 주소데이터가 @5001이 아닌 @5003을 만들어 2를 넣고 가르키면 된다. 5001번 주소는 가비지컬렉터가 수거해간다.

복제하는 경우에도 obj2가 obj1의 값을 가지고 올때 obj1의 주소인 @7103~7104까지를 가져오면 된다.

하지만 이 복제한 값을 변경하는 방법은 다르고 중요하다.

obj2의 a값을 10으로 바꾼다면 데이터 영역주소에 10을 추가한다. 그리고 해당하는 7103의 a를 찾아가니 @5001번 주소를 가르키고 있는데 해당하는 주소를 @5004로 바꾸면 변경이된다. 하지만 이렇게 되면 문제가 생기는데 obj2의 변수영역의 데이터가 가르키는 주소가 7103~7104로 같아지는데 정보 값만 바뀌어버린다. 그래서 결론적으로 obj2의 데이터를 바뀌어도 obj1에서 복사한 결과 값이라서 obj1가 obj2가 바뀌어도 결과 값은 서로 같아지기때문에 다른 방식으로 바꾸어주어야한다. 

그래서 따로 obj2 = {a : 10, b : 'aaa'}; 와 같이 데이터영역이 가르키는 주소를 바꿔준다면 obj1과 obj2는 서로 다른 값을 가지게 되므로 위와 같은 방법으로 해결해 주어야한다.

코드로 예를 들어보자면

//user 객체를 생성

var user = {

    name : "wonjang",

    gender :"male",

};

// 이름을 변경하는 함수, 'changeName'을 정의

// 입력값 : 입력대상 user 객체, 변경하고자 하는 이름

// 출력값 : 새로운 user 객체

// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경

var changeName = function (user, newName)

{

    var newUser = user;

    newUser.name = newName;

    return newUser;

}

//변경한 user정보를 user2 변수에 할당

//가변이기 때문에 user1도 영향을 받게됨

var user2 = changeName(user, "twojang");

(1번 코드)

//user 객체를 생성

var user = {

    name : "wonjang",

    gender :"male",

};

// 이름을 변경하는 함수, 'changeName'을 정의

// 입력값 : 입력대상 user 객체, 변경하고자 하는 이름

// 출력값 : 새로운 user 객체

// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경

var changeName = function (user, newName)

{

    return{

        name: newName,

        gender: user.gender,

    };

};

//변경한 user정보를 user2 변수에 할당

//가변이기 때문에 user1도 영향을 받게됨

var user2 = changeName(user, "twojang");

(2번 코드)

가 있다. 1번 코드의 경우 실행해보면 user와 changeName이 적용된 user2가 같아진다. 그대로 user2에 받아온 정보주소가 user1에 적용되기때문에 user1과 user2의 name이 같다. 그리고 2번코드는 user1에 적용된 정보가 user2와 다르게 따로 user2에 데이터주소가 적용되기때문에 user1과 user2의 정보는 다르게 적용된다.

하지만 위와 같은 방법으로 변경하게 되면 user의 속성값이 많은 경우 하나하나 적용하기 힘들어지게 된다.

그래서 다음과 같은 코드를 짜면 쉽게 객체를 카피할 수 있다.

var copyObject = function(target)

{

    var result = {};

    //for~ in 구문을 이용하여, 객체의 모든 프로퍼티에 접근

    //하드코딩x

    //이 copyObject로 복사한다음, 복사를 완료한 객체의 프로퍼티(속성)을 변경하면됨

    for (var prop in target)

    {

        result[prop] = target[prop];

    }

    return result;

}

위 함수는 result라는 객체안에 target의 속성을 가지고와 result안에 넣어 생성해주는 방식을 취하고있다. 그리고 result를 return하면 result값을 쉽게 target에게서 가져올 수 있다.

단 위와 같은 복사는 얕은 복사인데 위와 같은 복사방법 객체안에 객체가 있고 그 객체 값을 다르게 변경하지 못한다는 단점이 있다.

이를 위해선 재귀함수를 통해 계속 스스로를 훑으면서 깊은 복사를 해야한다. 

오늘은 여기까지 공부를 진행하였는데 확실히 javascript만의 그런 문법을 외워야하고 하기 때문에 머리가 지끈지끈거린다. 그래도 하다보면 금방 적응 될거라고 믿고 착실하게 공부해나가야겠다.

내일부터는 개인과제프로젝트도 같이 진행하면서 공부를 해야겠다.