5/24 메모

https://www.notion.so/teamsparta/1e13acaf1bff4a158238965c31a5d85f
공부 참고용

5/24 회고

문제)

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

// function sort(num) {
//     for (let i = 0; strings.length; i++) {
//         index[i] = strings[i].substr(num, 1); // 문자열가져왔어
//         strings[i] = index[i].conscat(strings[i]) // 문자열 붙였어
//     }
//     strings.sort().reverse(); // 배열 내림차순
//     return strings
// }
let strings = ['abc', 'pizza', 'tale'];
let index = [];
let newStrings = [];
for (let i = 0; i < strings.length; i++) {
    index[i] = strings[i].substring(1, 2); // 문자열가져왔어
    strings[i] = index[i].concat(strings[i]) // 문자열 붙였어
};
strings.sort(); // 배열 내림차순
for (let j = 0; j < strings.length; j++) {

    newStrings[j] = strings[j].substring(1);
};

console.log(newStrings)

어거지로 출력만 낸 느낌이다. substr() 오류도 있었고, 인덱스를 받아서 처리하는 함수와 substr() 으로 다시 코딩

---

시도

var strings = ['abc', 'pizza', 'tale'];
let index = [];
var newStrings = [];

var newSort = function (num) {
    // var newStrings = [];
    for (let i = 0; i < strings.length; i++) {
        index[i] = strings[i].substring(num, num + 1); // 문자열가져왔어
        strings[i] = index[i].concat(strings[i]) // 문자열 붙였어
    };
    // return newStrings;
    strings.sort(); // 배열 내림차순

    for (let j = 0; j < strings.length; j++) {
        newStrings[j] = strings[j].substr(1);
    };
}
newSort(1);
console.log(strings);
console.log(newStrings);

기능 정상

---

회고

console을 잘못 찍어서 위치를 많이 바꿨다.

substr()은 아까는 왜 안된 지 모르겠다.

다만 배열을 substr(start, str.length) 를 찍을 시
문자열의 길이가 아니라 배열의 크기만큼 짤라 출력하는 듯 하다.

실행컨텍스트 의 호이스팅을 배워서 순서가 많이 헷갈렸다.
호이스팅의 대한 이해를 높여야 코딩의 질이 높아질 것 같다

---

5/24 기록

javscript문법종합반 3주차

// user 객체 명 생성
var user = {
    name : 'lee',
    age : 27,
};



function changName(user, newName) {
    var newUser = user;
    newUser.name = newName;
    return newUser;
};

var user2 = changName(user, 'seo')

console.log(user.name)
console.log(user2.name)
console.log(user === user2)

// 참조객체를 복사할 시 주소를 복사하기 때문에 한 개의 항목만 바뀌면
// 기존객체도 변한다

var user1 = {
    name : 'lee',
    age : 27,
};



function changName(user, newName) {
    return{
        name: newName,
        age: user.age,
    };
}; // 01과 다르게 복사가 아닌 새로운 객체를 반환하므로 정상출력


var user2 = changName(user1, 'park');

console.log(user1.name)
console.log(user2.name)
console.log(user1 === user2)

얕은복사
var copyObject = function (target) {
    var result = {};

    for ( var prop in target){
        result[prop] = target[prop];
    }
    return result;
}

// for ~ in 을 통해 객체의 모든 프로퍼티에 접근



var user1 = {
    name : 'lee',
    age : 27,
};

var user14 = copyObject(user1);
user14.name = 'two'

console.log(user1.name)
console.log(user14.name)
console.log(user1 === user14)

null과 undefined
// null은 개발자가 명시적으로 해놓은 것
// undefined 는 시스템상으로 되어진 것

// 1. undefined

// 1-1 데이터 x
var a;

// 1-2 없는 프로퍼티에 접근할 때
var b = {
    name: 'ss',
};
// console(b.age); // 오류발생 

// 1-3 함수의 리턴 값이 없을 때
function change() { };
var www = change();
console.log(www); 

// 2. null
var n = null;
console.log(typeof n); // object

//동등연산자(equality operator)
console.log(n == undefined); // true
console.log(n == null); // true

//일치연산자(identity operator)
console.log(n === undefined);
console.log(n === null);

실행컨텍스트
// 실행컨텍스트 (스코프, 변수, 객체, 호이스팅)
// : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체


// 실행 컨텍스트 객체의 실체(= 담기는 정보)
// 1. Variablenvironment(VE)
// 1-1 현재 컨텍스트 내의 식별자 정보(=record)를 갖는다
// - var a = 3 의 경우 var a 를 의미
// 1-2 외부 환경 정보(=outer) 를 갖는다
// 1-3 선언 시점 LexicalEnvironment의 snapshot

// 2. LexicalEnvironment(LE)
// 2-1 Variablenvironment(VE) 와 동일하지만 변경사항 실시간 반영

// 3. ThisBinding
// 3-1 this 식별자가 바라봐야할 존재



// VE vs LE
// = 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음
//   이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용

// 호이스팅 : 함수에서 정의부를 먼저 수집하는 과정

// 함수의  정의방식 3가지와 주의내용
// 함수 선언문
// function a() {}
// a(); 실행 ok

// 함수 표현식
// 1. 익명 함수 표현식 var b = function () {}
// b(); 실행 ok

// 2. 기명 함수 표현식 var b = function c() {}, 잘 사용 안함
// b(); 실행 ok
// c(); 에러 

// 호이스팅과정에서 함수 선언문은 함수가 위까지 영향을 끼침
// 함수 표현식은 함수명만 올리기 때문에 영향 x

this(정의, 활용방법, 바인딩, call, apply, bind)
// 전역환경

// 런타임
// : 코드가 돌아가는 환경
// 1. 노드
// 2. 브라우저
// 전역 환경에서 this => 노드(global 객체), 브라우저(window 객체)

// 메서드 vs 함수 에서의 this
// 1. 메서드 : 종속적 (객체.메서드())
// 2. 함수 : 독립적 (혼자 사용가능)

// 함수에서 this 는 전역객체를 바라본다 (= 복잡)
// 메서드에서 this 는 해당객체를 바라본다

// 그래서 this를 우회할 수 있는 방법

// 1. self
// 2. 화살표 함수

// 3-12 명시적 this 바인딩
// call apply bind
// 1. call
var func = function (a, b, c) {
    console.log(this, a, b, c);
}

// no binding
func(1, 2, 3);

// 명시적 binding
func.call({ x: 1 }, 11, 22, 33);

var obj = {
    a: 1,
    method: function (x, y) {
        console.log(this.a, x, y);
    }
};

// method 는 obj를 찍고있다. 따라서 method 안에 this는 obj를 찍고있다.
obj.method(2, 3) // 1, 2, 3
obj.method.call({ a: 11 }, 2, 3) // 11 2 3


obj.method.apply({ a: 11 }, [2, 3]) // 대괄호 빼고는 동일한 기능

// 유사배열
var likeArr = {
    0 : 'd',
    1 : 'a',
    2 : 'b',
    3 : 'c',
    length : 4 // 꼭 있어야 유사배열로 인지 
}
// 객체 -> 배열
var arr = Array.from(likeArr)
console.log(arr)



function Person(name, gender) {
    this.name = name;
    this.gender = gender;
}
function Student(name, gender, school) {
    Person.apply(this, [name, gender]) // 여기서 this는 student 인스턴스!
    this.school = school;
}
function Employee(name, gender, company) {
    Person.call(this, name, gender) // 여기서 this는 employee 인스턴스!
    this.company = company;
}
var kd = new Student('길동', 'male', '서울대');
var ks = new Employee('길순', 'female', '삼성');

console.log(kd)
console.log(ks)

---

이번 주 목표

• Git 강의 다시 듣기 & 실습
• js 문법종합반 1회독
• 프로그래머스 60문제

---