코딩공부

1. $(document).ready() - 외부 리소스, 이미지에 상관없이 브라우저가 DOM(Document Object Model) 트리가 생성된 직후 실행된다. - window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행하여도 선언한 순서대로 실행된다. - (function(){ }); 와 같다. $(document).ready(function(){ }); | | $(function(){ }); 2. $(window).load() - DOM의 standard 이벤트 - html의 로딩이 끝난 후에 시작된다. - 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행된다. - 화면이 모두 그려진 다음의 메세징이나 이..

1. 함수 선언식(function declaration) function test(){ } 함수 선언식은 script가 로딩되는 시점에서 초기화하고 이것을 VO에 저장한다. 따라서 함수 선언 위치와 상관 없이 어디서든 호출하여 사용 가능하다. 2. 익명 함수 표현식(annoymous function expresstion) var test = function(){ } test(); // 함수호출 익명 함수 표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거친다. 함수는 객체 라는 정의가 가능하다. 함수 선언식과는 달리 Runtime 시에 함수가 해석되고 실행된다. cf) 런타임, 컴파일 타임 컴파일 타임 - 프로그램을 생성하기 위해 개발자는 먼저 소스코드를 작성하고 컴파일이라는 작업을 통..

Getter와 Setter 함수 사용하는 이유는 캡슐화, 정보은닉을 위해서 사용합니다. 단순히 사용하여서 결과를 얻을수 있지만, 얻는 과정의 내부로직은 알 수 없게 하는 이점이 있습니다. Getter 함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸려고 하거나, 특정 값을 조회하려고 할 때 우리가 원하는 코드를 실행 시킬 수 있습니다. const numbers = { a: 1, b: 2 } number.a =5; console.log(numbers); // Object { a: 5, b: 2} const numbers = { a: 1, b: 2, get sum() { console.log('sum 함수가 실행됩니다!'); // 함수를 무조건 반환해야합니다. return this.a = this.b..

객체 - 객체 안에 함수 넣기 const dog={ name: '멍멍이', sound:'멍멍!', say: funciton say(){ console.log(this.sound); //this는 함수가 위치한 객체의 자기자신 --> dog 를 의미 } }; dog.say(); //멍멍! // function을 지워줘도 동작함 const dog={ name: '멍멍이', sound:'멍멍!', say: say(){ console.log(this.sound); //this는 함수가 위치한 객체의 자기자신 --> dog 를 의미 } }; dog.say(); //멍멍! //화살표 함수를 사용했을때에는 동작안함 const dog={ name: '멍멍이', sound:'멍멍!', say: () =>{ console..

비구조화 할당 function print(hero){ const { alias, name, actor } = hero; const text ='${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.'; console.log(text); }; function print({alias, name, actor}){ const text ='${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.'; console.log(text); }; const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const {name} = ironman; // 비구조화 할당으로 name에 값을 채움 console.log..

객체란 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. 객체 사용하는 방법 const dogName ='멍멍이'; const dogAge = 2; console.log(dogName); console.log(dogAge); const dog = { name: '멍멍이', age:2, 'key is sample': 'sample' } console.log(dog); //object{name: "멍멍이", age:2, samplekey with space: "sample"} console.log(dog.name); //멍멍이 console.log(dog.age); //2 객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣어주면 됩니다. ..

ES6버전 이전 function hello(name){ console.log('Hello, ' +name + '!'); } hello('coding'); //Hello, coding! function add(a,b){ return a+b; } const sum = add(1,2); console.log(sum); //3 ES6버전 이후 fucntion hello(name){ return 'Hello ${name}!'; } const result = hello('Coding'); console.log(result); // Hello Coding! 화살표 함수 const add = (a, b) => { return a+b; } const sum = add(1, 2); console.log(sun); //3 ..

ES6 이전의 변수 선언방법 var ES6 이후의 변수 선언방법 var, let, const 현재에는 var를 거의 사용하지 않는 추세입니다. var를 사용하였을때 문제점 1. 변수 선언시 var 키워드 생략가능 coffee = 'good'; console.log(coffee); //good 2. 변수 선언 후 중복 선언 가능 var coffee = 'good'; console.log(coffee); //good var coffee= 1; console.log(coffee); //1 3. 변수가 선언도 되지 않았는데 참조 가능 ( 변수 호이스팅 ) console.log(coffee); // undefined var coffee ='good'; // (할당) console.log(coffee); //goo..