javascript

Wald Eisen·2023년 7월 11일

study

목록 보기
3/26

// 우선: 콘솔로그를 찍으면 왜 저게 뜨는지에 대해선 어셈블리어나 c언어를 공부해야 함.
// 허나 개발을 하는 이유는 현실에서 일어나는 일들 중 반복적이거나
// 불편하거나 한 일들을 편하고 쉽게 만드는 일임. 원리를 파고드는게 개발의 이유가 아님.
// 그러니 우선은 생략한다.

// 노드 js는? 브라우저에서 돌아가는 노드를 코드상에서도 돌아가게 하는것이다.

클래스? 함수? 메서드?

  • 함수는 우리가 알던 그것이다. 여러문장들이 하나의 기능을 구현하는 블럭이다.
function a(){ }
  • 메서드는 "클래스 안에 있는 함수"를 메서드라고 한다
class asdf{
	function a(){
    
    }
}
  • json? : 자바스크립트 객체 형태의 문자열
    json을 쓰는 이유: 현재 다양한 언어가 있지만 자바의 객체는 자스의 객체로 사용할 수 없다.
    중간에서 공통적으로 사용할 수 있는 데이터가 필요.
//스트링파이는 문자열로 바꾸는 내부함수.
        const objJson = JSON.stringify(obj);
        // "{\"name\":\"홍길동\",\"age\":12}"

좀더 정확하게 말하면

함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다.

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

obj.show1(); // 메서드
show2();     // 함수

자바와 자스의 차이 및 자바로 드는 비유

// 자스는 타입을 명시하지 않아도 된다.
// 자바: String str = "a";
var str = "a"; // 함수단위 스코프
let str1 = "a"; // 블록단위 스코프
const str2 = "a"; // const는 블록단위 스코프 + final
// 이 var이라는 변수는 일종의 함수단위 스코프다. 타입이 아니다.

//자바는 모든 코드가 클래스 안에 작성되나 자바스크립트는 클래스가
//없어도 코드를 작성할 수 있다.
function add(a,b){
return a+b;
}
console.log(add(1,2));

// 자바스크립트에서는 or 조건을 사용하면 마지막 값이나 false가 아닌 값이 출력된다.
console.log(false || false || true);
console.log(false || false || "ㅎㅇ");
// or 조건에서 0이나 null등도 false 조건으로 판단한다.
console.log(0 || null || "ㅎㅇ");

// if나 while의 조건 안에 boolean이 아닌 값이 들어가면 true를 대신할 수 있다
if(data){
console.log("널이 아닙니다.");
}

const str3 = "12";
//typeof 를 사용해서 타입을 판단 가능.
console.log(typeof str3);

// 자바 정수 / 정수 == 정수
// 자바스크립트 정수 / 정수 == 정수 또는 실수
console.log(3/2);
// 자바스크립트에서 ==은 값만 비교한다.
console.log("12" == 12);
console.log(true == 1);
console.log(false == 0);
console.log(undefined == null);

// === 는 값과 타입 모두를 비교한다.
console.log("12" === 12);
console.log(true === 1);
console.log(false === 0);
console.log(undefined === null);

기본 요소 / 형변환 및 함수 객체

 //형변환
 const str4 = String(12);
 console.log(typeof str4);

 //문자열과 char은 공유된다
 //홀따옴표도 문자열.
 console.log("a123");
 console.log(typeof 'a123');
 //백틱도 문자열.
 console.log(`a123`);
 //백틱 사용시 문자열 포맷팅이 가능하다
 console.log(`a123 ${str}`);

함수의 종류

// 기본함수
function add(a,b){
   return a+b;
}

// 익명함수
const add1 = function(a,b){
   return a+b;
}


// 화살표 함수 / 람다 함수
// 익명함수와 같지만 펑션이 화살표로 바뀌어버린걸로 보면 편함.
const add2 = (a,b) => {
   return a+b;
}

// 결과 코드가 한줄이면 중괄호와 return을 생락할 수 있다.
// 철저한 언어가 아니라서 가능. '단, 한줄만.'
const add3 = (a,b) => a+b;

객체

    //객체를 만드는 법

    //클래스없는 인스턴스
    const obj = {
        // 자바스크립트에서 객체의 변수를 프로퍼티라고 한다.
        // 변수명 - 클론 값 - 쉼표 로 구성
        name : "홍길동",
        age : 12,

        // 객체안에 여러가지 메서드를 만들 수 있다.
        // 이 방법으로 하는걸 추천한다.
        // function 이 왜 없느냐? 는 유튜브에 그 이유가 있다. 
        getName(){
            return this.name;
        },
        // getName1 : function(){
        //     return this.name;
        // },
        // getName2 : () => this.name,
    }

    //클래스 있는 인스턴스
    class Cat{
        constructor(name, age){
            //자바스크립트에서는 생성자에서 this.~~를 사용해서
            //초기화해주면 프로퍼티가 생성된다
            this.name = name;
            this.age = age;
        }
        getName() {
            return this.name;
        }
    }

    const cat = new Cat("야옹이",12);
    console.log(cat.name);

객체

   //객체를 만드는 법

   //클래스없는 인스턴스
   const obj = {
       // 자바스크립트에서 객체의 변수를 프로퍼티라고 한다.
       // 변수명 - 클론 값 - 쉼표 로 구성
       name : "홍길동",
       age : 12,

       // 객체안에 여러가지 메서드를 만들 수 있다.
       // 이 방법으로 하는걸 추천한다.
       // function 이 왜 없느냐? 는 유튜브에 그 이유가 있다. 
       getName(){
           return this.name;
       },
       // getName1 : function(){
       //     return this.name;
       // },
       // getName2 : () => this.name,
   }

   //클래스 있는 인스턴스
   class Cat{
       constructor(name, age){
           //자바스크립트에서는 생성자에서 this.~~를 사용해서
           //초기화해주면 프로퍼티가 생성된다
           this.name = name;
           this.age = age;
       }
       getName() {
           return this.name;
       }
   }

   const cat = new Cat("야옹이",12);
   console.log(cat.name);

함수, 객체의 심화

함수가 들어가는 메소드

//함수가 들어가는 메소드
   // 자스는 느슨한 언어이기에 매개변수가 있는지 없는지도 모르는 상태에서 집어넣기 가능.
   class Cat{
       constructor(name){
           this.name = name;
       }

       // 이것이다. 생성자와 유사한 역할을 한다.
       call(func){
           //함수의 매개변수로 들어가는 함수를 콜백 함수라고 한다.
           func(this.name);
       }
   }

   const cat = new Cat("야옹이");

   const hello = (value) => console.log(value + "안녕?");

   cat.call(hello);

배열 안의 객체

    //배열 안의 객체
   const objArray = [
       {name:"홍길동", age:12},
       {name:"임꺽정", age:13}
   ]

   for (let i=0; i<objArray.length; i++){
       const el = objArray[i];
       console.log(el);
       console.log(el.name);
   }

0개의 댓글