JavaScript 1

kim_memo·2021년 1월 14일
0

JavaScript

목록 보기
1/5
post-thumbnail

04. 조건문

if 문

const a=1;
if (a+1===2){
	console.log('a+1 is 2');
}

특정 조건이 만족 될 때에만 특정 코드를 실행 시킬 수 있습니다.

if(조건){
	코드
}

코드가 {}로 감싸져 있는데, 이를 코드 블록이라고 한다. 만약에 조건이 true가 된다면 지정한 코드가 실행, 아니라면 false라면 코드가 실행되지 않는다.

let과 const는 다른 블록 범위에서 똑같은 이름으로 선언할 수 있다.

const a =1;
if(true){
	const a=2;
    console.log('value a in if ' +a); // a=2
}
console.log('value a out of if ' +a); // a=1

if-else, if-else if

const a = 10;
if (a === 5) {
	console.log('5');
} else if {
	console.log('10');
} else {
	console.log('not 5 not 10');
}

switch/case

특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.

const device = 'iphone';

switch(device){
	case 'iphone':
    	console.log("iphone!");
    	break; // 그 다음 case 코드 방지
    case 'iPad':
    	console.log("IPad!");
        breake;
    case 'galaxy':
    	console.log("galaxy!");
        breake;
    default: // 우리가 case로 준비하지 않는 값 
    	console.log('i dont know');
}

05. 함수

함수는 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능이다.

const a =1;
const b =2;
const sum = a+b;

// function
function add(a, b){
	return a+b;
}
const sum = add(1, 2);
console.log(sum);

함수에서는 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 한다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. return을 하게 되면 함수는 끝난다.

function hello(name){
	console.log('hello, '+name+'!');
    //template Literal
    console.log(`hello, ${name}!`);
}
hello('cherry');
function getGrade(score){
	if(score===100){
    	return A++;
    } else if (score ===90) {
    	return A;
    } ...
}

const greate = getGrade(90);
console.log(grade);

arrow function

화살표 함수 문법. function 키워드 대신 텍스트 => 문자를 사용해서 함수를 구현하는데, 화살표 좌측에는 함수의 파라미터, 화살표 우측에는 코드 블록이 들어온다.

const add = (a, b) => {
	return a+b;
}
console.log(add(1,2));

// inside return
const add = (a, b) => a+b;
console.log(add(1,2));

06. 객체

객체는 우리 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다.

객체를 선언할 때에는 이렇게 {} 문자 안에 원하는 값들을 넣어주면 됩니다.

key(키) : value(원하는 값)

const dog = {
	name: 'dog',
    age: 2
}

함수에서 객체를 파라미터로 받기

const Jin = {
	name: 'seokjin',
    age: '30',
    stack: 'singer'
}
const RM = {
	name: 'namjoon',
    age: '28',
    stack: 'rap'
}

function print(hero){
	const text = `${hero.stack}(${age}) is ${hero.name}.`;
    console.log(text);
}

print(Jin);
// singer(30) is seokjin
print(RM);
// rap(28) is namjoon

객체 비구조화 할당

function print(hero){
	const { stack, name, age } = hero;
	const text = `${stack}(${age}) is ${name}.`;
    console.log(text);
}

const { stack, name, age } = hero;

-> 객체에서 값들을 추출해서 상수로 선언해주는 구조. 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할 수 있다.

function print({stack, name, age}) {
	...
    console.log(text);
}

객체 안에 함수 넣기

객체 안에도 함수를 넣을 수 있다.

const dog = {
	name: 'dog',
   	sound: 'bowwow',
  	say: function say(){
    	console.log(this.sound);
    }
}
dog.say();
//bowwow

여기서 함수가 객체 안에 들어가게 되면, this는 자신이 속해있는 객체를 가리키게 됩니다. 함수를 선언할 때에는 이름이 없어도 괜찮다. ex) say:function(), dog.say();

객체 안에 함수르 넣을 때, arrow function으로 선언한다면 제대로 작동하지 않는다. 왜냐하면 function으로 선언한 함수는 this가 자신이 속한 객체를 가리키게 되는데, arrow function은 자신이 종속된 인스턴스를 가리킨다.

Getter, Setter functioin

객체 안에 Getter 함수와 Setter함수를 설정하는 방법도 있다. 객체를 만들고 나면, 다음과 같이 객체 안의 값을 수정할 수도 있다.

const = numbers = {
	a :1,
    b: 2
};

numbers.a = 5;
console.log(numbers);

Getter함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸거나 특정 값을 조회하려고 할 때 원하는 코드를 실행시킬 수 있다.

Getter function

const numbers = {
	a:1,
    b:2,
    get sum(){
    	console.log('sum function start');
        return this.a + this.b;
    }
};
console.log(numbers.sum); // sum function start, 3
numbers.b= 5;
console.log(numbers.sum); // sum functoin start 6

numbers.sum()이 아닌, numbers.sum을 조회했을 뿐인데도 함수가 실행되며 그 결과 값이 출력된다. 이런 식으로 Getter함수는 특정 값을 조회할 때 우리가 설정한 함수로 연산되는 값을 반환합니다.

Setter function

const numbers = {
	_a:1;
    _b:2,
    sum:3,
    calculate(){
    	console.log('calculate');
        this.sum = this._a+this._b;
    },
    get a(){
    	return this._a;
    }
    get b(){
    	return this._b;
    }
    set a(value) {
    	console.log('a is change');
        this._a = value;
        this.calculate();
    }
    set b(value){
    	console.log('a is change');
        this._b = value;
        this.calculate();
    }
    
    console.log(numbers.sum);
    numbers.a=5;
    numbers.b=7;
    numbers.a=9;
    console.log(numbers.sum);
}

Setter함수를 설정 할 때에는 함수의 앞 부분에 set 키워드를 붙인다. Setter 함수를 설정하고 나면, numbers.a=5; 설정시 5를 함수의 파라미터로 받아오게 된다. 객체 안에 _a, _b라는 숫자를 선언해 주고 이 값들을 위한 getter와 setter 함수를 설정해 주었다.

이전에 만든 객체 에서는 numbers.sum이 조회 될 때마다 덧셈이 이루어졌지만, 이제는 a or b값이 바뀔 때마다 sum 값을 연산하게 된다.

profile
archive of study

0개의 댓글